국비 CSS - Selector

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

이안의 평일코딩

국비 CSS - Selector 본문

Front-end/CSS & SASS

국비 CSS - Selector

이안92 2020. 9. 14. 09:42

2020.09.14(월)

CSS => Selector

> Jsoup

> 1) 태그명

태그명{속성:값; 속성:값..}

2) ID <h1 id="aaa"> ID는 중복이 없는 경우에 사용

#ID명 {속성:값; 속성;값..} *** 속성은이미 만들어져 있다

3) Class <h1 class="aaa"> Class는 중복이 허용

.class명 {속성:값;속성:값..}

====> 데이터 수집이 좋다

4) 가상 선택자, 중복 선택자

2. 방법

1) 인라인 CSS

<태그 style="">

2) 내부 CSS <head> <style> </style> </head>

3) 외부 CSS 파일제작 => <link rel="" href=""> 재사용

3. 태그

=> block 속성 : 태그가 전체를 화면을 차지하고 있다

다음줄에 출력 System.out.println() div, h1~h6...

=> inline 속성 : System.out.print() a, img, input...

Selector : 태그 가지고 오는 방법

1. 인라인 CSS (한태그만 적용하는것)

=> 태그안에 style을 적용한다

색상 변경 color

많이 사용하는 방식이 아니라

내부 style, 외부 style

<body>
	<center>
		<h1 style="color:red">자바</h1>
		<h1 style="color:blue">오라클</h1>
		<h1 style="color:yellow">HTML</h1>
		<h1 style="color:green">CSS</h1>
		<h1 style="color:magenta">JSP</h1>
	</center>
</body>

/* CSS의 주석처리 */

오라클 대신 사용 : XML, JSON => JavaScript

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
/* SELECTOR */
/* 태그 */
h1{
	background-color:orange;
	/*글자 색상*/
	color:blue;
}
/*
	CSS를 적용하는 태그 읽기
	=> 속성
	=> 값을 설정
*/
/*
	h1 => background-color: orange; 은 전체가 적용
	h1 => color => 각자 다르게 설정
*/
#aaa{
	color:black;
}
#bbb{
	color:green;
}
#ccc{
	color:red;
}
.ddd{
	color:magenta;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<center>
	<!-- 
		태그를 구분
			1) ID => 중복이 없는 태그 (한개만 제어할때 사용)
				#id
			2) Class => 중복이 있는 경우
				포스터를 여러개, 테이블, input
				.class명
			=============== JavaScript, CSS에 사용 (디자인, 태그 제어)
			3) Name
			=============== 자바에서 전송된 데이터를 받을 경
	 -->
	<h1 id="aaa">Java</h1>
	<h1 id="bbb">Oracle</h1>
	<h1 id="ccc">JSP</h1>
	<!-- 동시에 제어 (반드시 class를 설정) -->
	<h1 class="ddd">Spring</h1>
	<h1 class="ddd">Kotlin</h1>
	</center>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#bbb h1{
	background-color: green;
	
}
#aaa {
	background-color: blue;
}
#ccc h1{
	background-color: orange;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"> /*마우스대면 색바뀜*/
$(function(){
	$('#ccc h1').hover(function(){
		$('#ccc h1').css("color","green");
	},function(){
		$('#ccc h1').css("color","blue");
	});
});
</script>
</head>
<body>
	<h1 id="aaa">Java</h1><!-- background => blue -->
	<span id="bbb"><!-- background => green -->
		<h1>Oracle</h1>
		<h1>JSP</h1>
	</span>
	<span id="ccc">
		<h1>Spring</h1><!-- background => orange -->
	</span>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
/* div 태그 바로 밑에 있는 경우*/
div > p{
	color:red;
	font-size:35px;
}
/*
	doc.select("div span p")
*/
div span p {
	color:orange;
	font-size:30px;
}
a{
	/* 검정색, 언더라인 */
	text-decoration: none;
	color: black;
	
}
/* 클릭하기 위해 문자위에 마우스 올렸을 때 : 가상 셀렉터 */
a:hover{
	text-decoration: underline;
	color:green;
}
img {
	/* 투명 : 0.0~1.0 */
	opacity: 1.0;
}
img:hover {
	opacity: 0.3;
}
</style>
</head>
<body>
	<center>
		<div>
			<p>Java</p>
			<p>JavaScript</p>
			<span><p>Oracle</p></span>
		</div>
		
		<a href="#">Hello1</a><br>
		<a href="#">Hello2</a><br>
		<img src="a.jpg" width=300 height=350>
		<img src="b.jpg" width=300 height=350>
	</center>
</body>
</html>

MainClass.java (DB연동)

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class MainClass {
	public static void main(String[] args) {
		try{
        	Class.forName("oracle.jdbc.driver.OracleDriver");
        	String url="jdbc:oracle:thin:@211.238.142.000:1521:XE";
        	Connection conn=DriverManager.getConnection(url,"hr","happy");
        	String sql="SELECT empno,ename,job FROM emp";
        	PreparedStatement ps=conn.prepareStatement(sql);
        	ResultSet rs=ps.executeQuery();
        	while(rs.next()){
        		System.out.println(rs.getInt(1)+" "+rs.getString(2)+" "+rs.getString(3));
        	}
        	rs.close();
        }catch(Exception ex) {System.out.println(ex.getMessage());}
	}
}

emp.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#sawon_list {
	color:white;
	background-color: orange;
}
#table_header{
	background-color: lime;
}
#sawon_table {
	width: 600px;
}
.td1 {
	text-align: center;
}
</style>
</head>
<body>
	<center>
		<h1 id="sawon_list">사원 목록</h1>
		<table id="sawon_table">
			<tr id="table_header">
				<th>사번</th>
				<th>이름</th>
				<th>직위</th>
				<th>입사일</th>
				<th>급여</th>
			</tr>
			<tr>
				<td class="td1">1</td>
				<td class="td1">1</td>
				<td class="td1">1</td>
				<td class="td1">1</td>
				<td class="td1">1</td>
			</tr>
		</table>
	</center>
</body>
</html>

EmpVO

package com.sist.dao;
import java.util.*;

public class EmpVO {
	private int empno;
	private String ename;
	private String job;
	private Date hiredate;
	private int sal;
	public int getEmpno() {
		return empno;
	}
	public void setEmpno(int empno) {
		this.empno = empno;
	}
	public String getEname() {
		return ename;
	}
	public void setEname(String ename) {
		this.ename = ename;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public Date getHiredate() {
		return hiredate;
	}
	public void setHiredate(Date hiredate) {
		this.hiredate = hiredate;
	}
	public int getSal() {
		return sal;
	}
	public void setSal(int sal) {
		this.sal = sal;
	}
	
}

EmpDAO

package com.sist.dao;
import java.util.*;
import java.sql.*;
public class EmpDAO {
	// 오라클 연결
	private Connection conn;
	// SQL문장 전송
	private PreparedStatement ps;
	// 오라클 주소 설정
	private final String URL="jdbc:oracle:thin:@211.238.142.000:1521:XE";
	// 오라클 연결 => 드라이버를 등록 (한번만 수행 => 생성자)
	public EmpDAO() {
		try {
			Class.forName("oracle.jdbc.dirveer.OracleDriver");
		}catch(Exception ex) {}
	}
	// 연결
	public void getConnection() {
		try {
			// 오라클에 conn hr/happy
			conn=DriverManager.getConnection(URL,"hr","happy");
		}catch(Exception ex) {}
	}
	// 닫기
	public void disConnection() {
		try {
			if(ps!=null)ps.close();
			if(conn!=null)conn.close();
		}catch(Exception ex) {}
	}
	
	public ArrayList<EmpVO> empListData(){
		ArrayList<EmpVO> list = new ArrayList<EmpVO>();
		try {
			getConnection();
			String sql="SELECT empno,ename,job,hiredate,sal "
					+"FROM emp";
			// 전송
			ps=conn.prepareStatement(sql);
			// 실행 결과 값 받기
			ResultSet rs=ps.executeQuery();
			while(rs.next()) {
				EmpVO vo = new EmpVO();
				vo.setEmpno(rs.getInt(1));
				vo.setEname(rs.getString(2));
				vo.setJob(rs.getString(3));
				vo.setHiredate(rs.getDate(4));
				vo.setSal(rs.getInt(5));
				list.add(vo);
			}
			rs.close();
		}catch(Exception ex) {
			System.out.println(ex.getMessage());
		}finally {
			disConnection();
		}
		return list;
	}
}

emp.jsp

<%@ page language="java" contentType="text/html; charsetEUC-KR"
    pageEncoding="EUC-KR" import="java.util.*, com.sist.dao.*"%>
<%
	// DAO를 연결해서 데이터를 가지고 온다
	EmpDAO dao = new EmpDAO();
	ArrayList<EmpVO> list=dao.empListData();
	// 오라클에서 데이터를 읽어온다
	// 가지고 온 데이터를 화면에 출력 => HTML (약간의 화면 디자인 => CSS)
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#sawon_list {
	color:white;
	background-color: orange;
}
#table_header{
	background-color: lime;
}
#sawon_table {
	width: 600px;
}
.td1 {
	text-align: center;
}
</style>
</head>
<body>
	<center>
		<h1 id="sawon_list">사원 목록</h1>
		<table id="sawon_table">
			<tr id="table_header">
				<th>사번</th>
				<th>이름</th>
				<th>직위</th>
				<th>입사일</th>
				<th>급여</th>
			</tr>
			<%-- 출력 위치 --%>
			<%
				for(EmpVO vo:list)
				{
			%>
			<tr>
				<td class="td1"><%=vo.getEmpno() %></td>
				<td class="td1"><%=vo.getEname() %></td>
				<td class="td1"><%=vo.getJob() %></td>
				<td class="td1"><%=vo.getHiredate().toString() %></td>
				<td class="td1"><%=vo.getSal() %></td>
			</tr>
			<%
				}
			%>
		</table>
	</center>
</body>
</html>

내부 -> 외부 CSS(파일로 만들어서 링크)

1. 파일로 만들기 : 외부 CSS

2. <style>태그로 만들기 : 내부 CSS

3. 각 태그에서 만들기 : 인라인 CSS

table.css

#sawon_list {
	color:white;
	background-color: orange;
}
#table_header{
	background-color: lime;
}
#sawon_table {
	width: 600px;
}
.td1 {
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="table.css"> 
</head>

MovieVO

package com.sist.dao;

public class MovieVO {
	private int mno;
	private String title;
	private String poster;
	private String director;
	private String actor;
	private String genre;
	public int getMno() {
		return mno;
	}
	public void setMno(int mno) {
		this.mno = mno;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getPoster() {
		return poster;
	}
	public void setPoster(String poster) {
		this.poster = poster;
	}
	public String getDirector() {
		return director;
	}
	public void setDirector(String director) {
		this.director = director;
	}
	public String getActor() {
		return actor;
	}
	public void setActor(String actor) {
		this.actor = actor;
	}
	public String getGenre() {
		return genre;
	}
	public void setGenre(String genre) {
		this.genre = genre;
	}
	
}

movie.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.*, com.sist.dao.*"%>
<%
	// 데이터 가지고 오기
	EmpDAO dao = new EmpDAO();
	ArrayList<String> list=dao.movieGetPoster();
%>
<%--
	CSS => 태그를 선택해서 처리
	1) 태그명
	태그명 {속성:값; 속성:값...}
	2) ID명
	#ID명 {속성:값; 속성:값...}
	3) class명
	.class명 {속성:값; 속성:값...}
	4) 복합셀렉터
		= 자손
	상위태그 > 자손태그 {속성:값; 속성:값...}
		<div> ==> h1,h1,span
			<h1></h1>
			<h1></h1>
			<span><h1></h1></span>
		</div>
		= 후손
	상위태그 자손태그 {속성:값; 속성:값...}
		<div> ==> h1,h1,span
			<h1></h1>
			<h1></h1>
			<span><h1>후</h1></span>
		</div>
	5) 가상셀렉터
	태그명:hover 태그명:focus... 태그명:first
	======================
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
img {
	opacity : 1.0;
	/* 굵기, 라인종류, 색상 */
	/*
		라인종류
			solid : 일반 라인선
			dot : 점선.....
			dash : ------
	*/
	border: 2px double red;
}
img:hover {
	opacity : .3;
	cursor: pointer;
}
</style>
</head>
<body>
	<center>
		<h1 id="movie_text">영화목록</h1>
		<table id="user-table" width=800>
			<tr>
				<%
					for(String poster:list){
				%>
					<td align="center">
						<img src="<%=poster %>" width=150 height=250>
					</td>
				<%
					}
				%>
			</tr>
		</table>
	</center>
</body>
</html>

EmpDAO

package com.sist.dao;
import java.util.*;
import java.sql.*;
public class EmpDAO {
	//오라클 연결
   private   Connection conn;
    // SQL문장 전송
   private PreparedStatement ps;
    // 오라클 주소 설정
   private final String URL = "jdbc:oracle:thin:@211.238.142.000:1521:XE";
    // 오라클 연결 => 드라이버를 등록 (한번만 수행 =>생성자)
   public EmpDAO() {
      try {
         Class.forName("oracle.jdbc.driver.OracleDriver");
      } catch (Exception e) {
         System.out.println(e.getMessage());
      }
   }
   // 연결
   public void getConnection() {
      try {
    	  // 오라클에 conn hr/happy
         conn = DriverManager.getConnection(URL, "hr", "happy");
      } catch (Exception e) {
         System.out.println(e.getMessage());
      }
   }
   // 닫기
   public void disConnection() {
      try {
         if(ps != null) {
            ps.close();
         }
         if(conn != null) {
            conn.close();
         }
      } catch (Exception e) {
         System.out.println(e.getMessage());
      }
   }
   
   public ArrayList<EmpVO> empListData(){
      ArrayList<EmpVO> list= new ArrayList<EmpVO>();
      
      try {
         getConnection();
         String sql = "SELECT empno, ename, job, hiredate, sal FROM emp";
         // 전송
         ps = conn.prepareStatement(sql);
         // 실행 결과값 받기
         ResultSet rs = ps.executeQuery();
         while(rs.next()) {
            EmpVO vo = new EmpVO();
            vo.setEmpno(rs.getInt(1));
            vo.setEname(rs.getString(2));
            vo.setJob(rs.getString(3));
            vo.setHiredate(rs.getDate(4));
            vo.setSal(rs.getInt(5));
            list.add(vo);
            
         }
         rs.close();
      
      
      } catch (Exception e) {
         System.out.println(e.getMessage());
      }
      finally {
         disConnection();
      }
      return list;
   }
   
   // 영화목록 가지고 오기
	/*
	 *  DB
	 *  ===
	 *    오라클 ==> JDBC ==> DBCP ==> XML, JSON ==> MyBatis(ORM)
	 *    ==> MongoDB
	 *    
	 *    1) Spring 구동, MyBatis(ORM), VO, HTML
	 */
   public ArrayList<String> movieGetPoster(){
      ArrayList<String> list = new ArrayList<String>();
      
      try {
    	  // 연결
         getConnection();
          // SQL문장 전송
         String sql = "SELECT poster, rownum FROM daum_movie WHERE rownum <= 10";
          // 오라클로 SQL문장을 보내주는 상태
         ps = conn.prepareStatement(sql);
          // 실행 요청 => 데이터를 메모리에 저장
         ResultSet rs = ps.executeQuery();
         while(rs.next()) {
            list.add(rs.getString(1));
            
         }
         rs.close();
         
      } catch (Exception e) {
         System.out.println(e.getMessage());
      }
      finally {
         disConnection();
      }
      
      return list;
   }
	public ArrayList<MovieVO> movieListData(){
		ArrayList<MovieVO> list=
				new ArrayList<MovieVO>();
		try {
			//연결
			getConnection();
			String sql="SELECT no,title,poster,director,actor,genre "
					+"FROM daum_movie ORDER BY no";
			ps=conn.prepareStatement(sql);
			ResultSet rs=ps.executeQuery();
			while(rs.next()) {
				MovieVO vo=new MovieVO();
				vo.setMno(rs.getInt(1));
				vo.setTitle(rs.getString(2));
				vo.setPoster(rs.getString(3));
				vo.setDirector(rs.getString(4));
				vo.setActor(rs.getString(5));
				vo.setGenre(rs.getString(6));
				
				list.add(vo);
			}
			rs.close();
		}catch(Exception ex) {
			System.out.println(ex.getMessage());
		}finally {
			disConnection();
		}
		return list;
	}
}

list.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.*,com.sist.dao.*"%>
<%
	/*
	자바 : 오라클 <==> HTML을 연결시켜주는 역할
	오라클 : 공유에 필요한 데이터를 저장하는 공간
	HTML : 사용자 => 화면을 보여줄 내용
	CSS : HTML을 디자인 (변경할 정도)
	JavaScript : 브라우저 안에서 이벤트 발생 (마우스 클릭...)
	 	ajax,reactjs,nodejs,vuejs
	*/
	EmpDAO dao=new EmpDAO();
	ArrayList<MovieVO> list=dao.movieListData();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 외부 CSS -->
<link rel="stylesheet" href="table1.css">
</head>
<body>
	<center>
		<h1>영화목록</h1>
		<table id="table_content" width=900>
			<tr>
				<th>번호</th>
				<th></th>
				<th>제목</th>
				<th>감독</th>
				<th>출연</th>
				<th>장르</th>
				<%--
					<th> : 가운데 정렬되어 있음
					<td align=center> : td는 가운데 정렬 따로해줘야함
				 --%>
			</tr>
			<%-- 출력 --%>
			<%
				for(MovieVO vo:list){
			%>
				<tr class="dataTr">
					<td align=center><%=vo.getMno() %></td>
					<td align=center>
						<img src="<%=vo.getPoster() %>" width=35 height=35>
					</td>
					<td><%=vo.getTitle() %></td>
					<td><%=vo.getDirector() %></td>
					<td><%=vo.getActor() %></td>
					<td><%=vo.getGenre() %></td>
				</tr>
			<%
				}
			%>
		</table>
	</center>
</body>
</html>

table1.css

#table_content{
	border-collapse:collapse;  /*라인선을 한개로 통합*/
	border-top-width: 2px; /*위부분에 라인*/
	border-top-color: #333; /*진한 회색*/
	border-top-style: solid; /*일반 라인선*/
	
	border-bottom-width: 1px; /*아래 라인선 추가*/
	border-bottom-color: #333;
	border-bottom-style: solid;
}
/*
	th,td가 공통으로 들어가는 부분
*/
#table_content th,td{
	/*
		margin : top left bottom right
		margin-top
		margin-left
		margin-bottom
		margin-right
	예)
		margin : 0px (),(),()
					0px 0px 0px
		margin : 50px 20px
				 50px 20px 50px 20px
				 top=bottom left=right
				 
		margin : 50 20 30 => 자동으로 left(20)
		
		=> bottom값이 생략되면 => top값을 설정
		=> right값이 생략이되면 => left값을 설정
		=> padding도 같은 방법으로 적용
		
	*/
	margin: 0px;
	padding: 8px;
	font-size: 9pt;
	
}
/* th만 설정되는 부분 */
#table_content th{
	background-color: #999;
	color:white;
	border-bottom-width: 1px;
	border-bottom-color: #333;
}
/* td만 설정되는 부분 */
#table_content td{
	border-bottom-width: 1px;
	border-bottom-color: #333;
	border-bottom-style: dotted;
}
/*
	색상
	1) 지정된 칼라색상 : black, red...
	2) 16진법 #CCCCFF
	3) RGB(255,255,255) => 그림판
	원하는 위치만 제어 : nth-child(2n+1) ==> 2n+1 ==> n(0) 1 3 5...
							   3n+1
*/
#table_content tr:nth-child(2n+1){
	background-color: RGB(255,255,230);
}
#table_content .dataTr:hover{
	background-color: #FC6;
	cursor: pointer; /*Hand_Cursor*/	
}
img{
	border-radius: 12px; /*타원형식으로 출력*/
}

복합 셀렉터 (Combinator)

'Front-end > CSS & SASS' 카테고리의 다른 글

[CSS] 우선순위 배치 Navbar 가장 최상단으로 올리기 (0)	2021.05.12
[CSS in JS] Styled-Components란? (0)	2021.03.09
SASS/SCSS 기초 문법 총정리 (0)	2021.01.01
국비 CSS - 화면분할 (0)	2020.09.17
국비 CSS - DB연동 (0)	2020.09.15

'Front-end/CSS & SASS' Related Articles

Comments

이안의 평일코딩

국비 CSS - Selector 본문

국비 CSS - Selector

2020.09.14(월)

'Front-end > CSS & SASS' 카테고리의 다른 글

티스토리툴바