[CSS3] HTML/CSS 5일차

HTML / CSS

✔ Preview

전체 선택자, 태그선택자, 아이디 선택자, 클래스 선택자, 계층 선택자, 상태 선택자 등의 다양한 선택자 종류 정리

---

✍ Summary

전체 선택자 (Universial Selector)

: HTML의 모든 요소를 선택하는 기능이다. 별표(*) 를 사용한다.

* {
	color:#424242;
}

 

태그 선택자 (Type Selector)

: HTML 요소(태그)를 선택하는 기능이다. 원하는 HTML 요소를 선택해 CSS를 정의하면 해당 요소에만 스타일이 적용된다.

/* p 태그에만 스타일을 적용하는 경우 */
p {
	text-decoration-line:underline; /* 밑줄 */
	text-decoration-color:red;
	text-decoration-style:wavy; /* 물결모양 */
    
	/* 한 번에 작성하는 방법 */
	text-decoration:underline red wavy;
	
	text-indent:20px; /* 들여쓰기(양수), 내어쓰기(음수) 설정 */
	letter-spacing:1px; /* 글자와 글자 사이의 간격 */
	word-spacing:1px; /* 단어와 단어 사이의 간격 */
	
	text-shadow:1px 1px #c0c0c0; /* 글자 그림자 설정 	*/
}

 

아이디 선택자 (ID Selector)

: HTML 내에 정의한 id를 선택자로 지정할 수 있는 기능이다. # 을 사용한다.

/* id가 idname1인 경우 */
#idname1 {
	color:gray;
}

/* 협업 시 명시된 아이디가 어떤 요소인지 알 수 있도록 작성하는 방법 (띄어쓰기 X) */
li#idname2 {
	color:grey;
}

 

클래스 선택자 (Class Selector)

: HTML 내에 정의한 클래스(class)를 선택자로 지정할 수 있는 기능이다. .을 사용한다.

/* class가 classname 인 경우 */
.classname {
	color:#fc0322;
}

 

계층 선택자

종류	형식	설명
자손 선택자(Descendant Selector)	#id p { border:red; }	특정 태그 안에 포함된 모든 하위 태그
자식 선택자(Child Selector)	#id > p { border:red; }	특정 자식 태그 선택할 때 사용
형제(근접후행) 선택자(Adjacent Sibling Selector)	h2 + h3 { border:red; }	<h2> 태그 뒤에 오는 첫 번째 <h3> 태그 하나 선택
형제(후행) 선택자(Sibling Selector)	h2 ~ h3 { border:red; }	<h2> 태그 뒤에 오는 모든 <h3> 태그 선택

 

• 자손 선택자(Descendant Selector) 예시

ul li a {
	text-decoration:none; /* a 태그에 하이퍼링크 작성시 생기는 밑줄 제거 */
	color:skyblue;
}

 

상태 선택자 (Pseudo Classes)

: 지정된 특정 상태 태그를 선택자로 지정할 수 있는 기능이다. 지정된 특정 상태 조건을 충족하는 태그에만 스타일이 적용된다.

종류	형식	설명
링크 선택자	선택자:link	href 속성을 가진(방문 전) <a> 태그 선택
	선택자:visited	방문했던 링크를 가진 <a> 태그 선택
반응 선택자	선택자:hover	마우스 포인터를 올려놓은(누르지 않은) 태그 선택
	선택자:active	마우스 포인터로 클릭한 태그를 선택
부정 선택자	선택자:not	선택 대상을 반대로 적용

 

• 반응 선택자 (:hover) 예시

img:hover {
	border-radius:50%; /* 테두리 둥글게 */
	opacity:0.7; /* 0.0(투명) ~ 1.0(불투명) */	
}