[CSS]CSS3 기초

 

1. 선택자의 용도와 사용법

• 선택자는 HTML 요소를 선택해 스타일을 적용할 때 사용하는 기본 도구
• 특정 요소만 선택하여 스타일을 다르게 지정가능

---

2. 기본 선택자

선택자	설명	예시
전체 선택자	모든 요소 선택	`* {}`
태그 선택자	특정 태그 전체 선택	`h1 {}`
아이디 선택자	특정 ID 요소 선택	`#header {}`
클래스 선택자	특정 클래스 요소 선택	`.title {}`

 

• 여러 태그에 동일 스타일 적용 가능
• id 속성을 중복 사용하면 해당 id 속성을 표시한 모든 태그에 스타일 적용 (단, 자바스크립트에서는 문제 발생)

h1 { color: red; }
#header { width: 100%; }
.title { font-size: 24px; }
body, p, h1, h2 { margin: 0; }

 

---

3. 속성 선택자

• 특정 속성을 가진 요소만 선택

input[type="text"] { background-color: yellow; }

---

4. 후손 선택자와 자손 선택자

선택자	설명	예시
후손 선택자	특정 요소의 모든 하위 요소 선택	`div p {}`
자손 선택자	특정 요소의 바로 아래 자식 요소 선택	`div > p {}`

div p { color: blue; }   /* div 내부 모든 p */
div > p { color: green; } /* div 바로 아래 p만 */

 

• `<table>`태그는 `<tbody>`를 생략해도 F12검사 시 자동 추가
• `<th>`스타일 변경 시, `table > tbody > tr > td` 로 해야함

    <table>
      <tr>
        <th>이름</th>
        <th>지역</th>
      </tr>
      <tr>
        <td>홍길동</td>
        <td>서울특별시</td>
      </tr>
    </table>

---

5. 반응•상태•구조 선택자

5.1 반응 선택자

• 사용자 반응으로 생성되는 특정한 상태 선택

선택자	설명
`:active`	클릭했을 때
`:focus`	입력창에 포커스 맞췄을 때
`:hover`	마우스 올렸을 때

a:hover { color: red; }
input:focus { border: 2px solid blue; }

5.2 상태 선택자

• 입력 양식의 상태를 선택

선택자	설명
`:checked`	체크박스가 선택된 상태
`:disabled`	비활성화된 요소
`:enabled`	활성화된 요소

input:checked { background-color: yellow; }

5.3 구조 선택자

• 특정한 위치에 있는 태그 선택

선택자	설명
`:first-child`	첫 번째 자식 요소
`:last-child`	마지막 자식 요소
`:nth-child(n)`	n번째 자식 요소
`:nth-of-type(n)`	특정 타입의 n번째 자식

li:first-child { color: red; }
p:nth-child(2) { font-weight: bold; }

---

6. CSS3 단위

6.1 크기 단위

단위	설명	예시
px	고정 크기 (절대 단위)	`font-size: 16px;`
em	부모 요소 기준 상대 단위	`font-size: 1.5em;`
rem	최상위 요소(html) 기준	`font-size: 1rem;`
%	부모 요소 대비 백분율	`width: 80%;`

• EM: 상대적인 단위. 부모요소의 폰트 사이즈에 자식요소의 폰트 사이트 결정
• REM: Root + EM. Root의 폰트 사이즈에 의해 결정(html 선택자 또는 body선택자)

6.2 색상 단위

방식	설명	예시
색상명	기본 색상명 지정	`color: red;`
16진수	#RRGGBB	`color: #FF0000;`
RGB	RGB 값 지정	`color: rgb(255, 0, 0);`
RGBA	투명도 포함	`color: rgba(255, 0, 0, 0.5);`

6.3 URL 단위

• 이미지 경로 지정 등에 사용

/* 현재 폴더의 Desert.jpg */
background-image: url('Desert.jpg');

/* Other 폴더의 Desert.jpg */
background-image: url('Other/Desert.jpg');

/* 루트 폴더의 Desert.jpg */
background-image: url('/Desert.jpg');

---

📎 참고자료

• MDN CSS 선택자
• MDN CSS 단위
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)