1. 개요
CSS는 HTML 문서의 요소 혹은 요소 그룹에 적용할 스타일 규칙을 정의하는 스타일시트 언어이다.
CSS에서 자주 쓰이는 선택자, 결합자, 의사 클래스 / 요소를 정리한다.
2. 선택자
* {...} /* 모든 요소에 적용 */
p {...} /* <p> 요소 내부 텍스트에 적용 */
.warning {...} /* warning class를 가진 요소에 적용 */
div.warning {...} /* warning class를 가진 <div> 요소에 적용 */
#customized {...} /* id가 customized인 요소에 적용 */
/* {...} 생략 */
a[title] /* title 속성이 있는 <a> 요소에 적용 */
a[href="ex"] /* href 속성에 특정한 값이 있는 <a> 요소에 적용 */
a[href~="ex am"] /* href 속성 목록에 있는 값 중 일치하는 것이 있는 <a> 요소에 적용(공백으로 구분) */
h1, h2, a {...} /* <h1>, <h2>, <a> 요소에 적용 */3. 결합자
li li {...} /* <li> 안의 <li> 요소에 적용 */
div > span {...} /* <div> 바로 아래 <span> 요소에 적용 */
img ~ p {...} /* <img>, <p>의 부모 요소가 동일하고, <p>가 <img>보다 뒤에 있을 때 적용 */
img + p {...} /* <img> 바로 뒤에 있는 <p> 요소에 적용 */4. 의사 클래스 / 요소
/* 의사 클래스 */
/* 요소가 특정 상태일 때 스타일을 적용 */
button:hover {...} /* <button> 요소에 마우스 커서가 위치할 때 적용 */
a:visited {...} /* 사용자가 방문한 적이 있는 링크에 적용 */
:checked {...} /* check된 checkbox나 on 상태인 radio에 적용 */
/* 의사 요소 */
/* 요소의 특정 부분에 스타일을 적용 */
p::first-line {...} /* <p> 요소의 첫 번째 줄에 적용 */