Deve.haeri

[CSS/기본] 선택자 본문

HTML-CSS

[CSS/기본] 선택자

hhaeri 2020. 11. 8. 23:26

1. 선택자의 종류

 

 1) 전체 선택자 : * 

  *{ 
  font-family : 'Roboto',sans-serif; 
  }


 2) 태그 선택자 : 태그 이름 

div{ 
font-family : 'Roboto',sans-serif; 
}


 3)  id 속성 선택자 : #id 

#box { 
font-family : 'Roboto',sans-serif; 
}


 4)  class 속성 선택자 : .class 

.centered { 
font-family : 'Roboto',sans-serif; 
}


 5)  자식 선택자 : 부모 > 자식 

div > a{ 
text-decoration : none; 
}


 6) 후손 선택자 : 부모 후손 (부모 아래의 모든 후손이 선택된다.) 

    div a{ 
text-decoration : none; 
}


 7) 인접 형제 선택자 : 형 + 동생 (형의 첫번 쨰 동생만 선택된다.) 

div + p{ 
text-decoration : none; 
}


 8) 일반 형제 선택자 : 형 ~ 동생 (형의 모든 동생들이 선택된다.) 

div ~ p{ 
text-align : none; 
}

 

 

2. 자식 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	/*1. 자식 선택자  */
	table > thead{ /*table 태그의 자식 태그인 thead 태그  */
		background : lightgray;
	}
	
	table > td{ /*table 태그의 자식 태그로 td 태그는 없다. (td 태그는 후손 태그이다.) */
	
		background : red;
	}
	
	table > thead > tr > td{ /*table 태그의 자식 태그로 td 태그는 없다. (td 태그는 후손 태그이다.) */
	
		background : red;
	}
	
	thead > tr > td{ /*시작 요소는(thead) 마음대로 정해도 된다. */
	
		background : blue;
	}
	
	/*2. 후손 선택자  */
	table td{ /* table 태그 아래의 모든 td(수주 상관 없이 모든 td 태그) 태그 */
		font-style : italic;
	}
	
	/* table 태그에서 자식 선택자의 주의점 */
	/* table 태그 아래에는 tbody 태그가 자동으로 추가된다. */
	/* tr 태그는 처리할 수 없다 */
	#t > tr > td { /*tbody 태그 누락으로 선택이 안된다.  */
		color : blue ;
	}
	
	
	#t > tbody > tr > td { 
		color : orange ;
	}
	
	
	
</style>
</head>
<body>
	<table border = "1">
	
		<thead>
			<tr>
				<td>이름</td>
				<td>주소</td>
			<tr>
		</thead>
		
		<tbody>
			<tr>
				<td>james</td>
				<td>london</td>
			</tr>
				<tr>
				<td>emily</td>
				<td>seoul</td>
			</tr>
				<tr>
				<td>jessica</td>
				<td>newyork</td>
			</tr>
		</tbody>
	
	</table>
	
	<!-- thead,tbody,tfoot이 없는 테이블  -->
	<table id = "t" border = "1">
		<tr>
			<td>제품명</td>
			<td>가격</td>
		</tr>
		<tr>
			<td>세탁기</td>
			<td>150</td>
		</tr>
		<tr>
			<td>건조기</td>
			<td>150</td>
		</tr>
</body>
</html>



2. 인접 형제 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style tpye = "text/css">
	/*1. 일반 형제 선택자 */
	h3 ~ div { /* h3 태그의 모든 div 동생 태그들이 선택된다. */
		line-height : 100px; /* 세로정렬 용도로 사용한다. */
	}
	
	/*2.인접 형제 선택자  */
	h3 + div {
		background : yellow;
	}
</style>
</head>
<body>
	<h3>
		선택자
	</h3>
	<div>
		1. 자식 선택자
	</div>
	<div>
		2.형제 선택자
	</div>
</body>
</html>
저작자표시 (새창열림)

'HTML-CSS' 카테고리의 다른 글

[html/css] height 100% 적용 안될 경우  (0) 2021.07.07
[CSS/기본] Icon 넣기  (0) 2020.11.08
[CSS/기본] Webfont  (0) 2020.11.08
[CSS/기본] Font  (0) 2020.11.08
[CSS/기본] Text  (0) 2020.11.08
'HTML-CSS' Related Articles more
Comments