2018. 1. 16. 11:07ㆍ웹 표준 퍼블리싱 바이블
1. 구체적으로 찾아가는 방법
1-1. 자손(하위) 선택자 (Descendant selectors)
자손(하위) 선택자는 "E, F"의 형식(띄어쓰기)으로 작성하는데, "E"요소의 하위에 있는 모든 "F" 요소를 선택하는 방법입니다. 다음의 예제에는 세 개의 <p>요소가 있지만, 선택할 때 ".area"하위의 <p> 요소를 지정했으므로 클래스 명이 ".area" 인 요소의 하위에 있는 2개의 <p>요소들만 선택됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area p{color: orange;} </style> </head> <body> <div class="area"> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> </div> </body> </html>
|
1-2. 자식 선택자(Child selectors)
자식 선택자는 "E>F"의 형식으로 작성하며 "E"의 자식요소인 "F"를 선택하는 방법입니다. "자식 선택자"와 "자손 선택자"의 차이점은 바로 다음에 놓인 하나의 자식 요소만이 선택된다는 점입니다.
※ 익스플로러 버전 6에서는 적용되지 않습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area > p{color: orange;} </style> </head> <body> <div class="area"> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> </div> </body> </html>
|
1-3. 인접 형제 선택자 (Adjacent sibling selectors)
"E+F"로 작성하는 인접 형제 선택자는 "E"요소 다음에 오는 "F"요소를 선택하는 방법입니다. 다음에 예제에서는 클래스 명이 ".area"인 요소 하위의 요소 중에서 첫 번째 <p>요소 다음의 <p>요소를 지정했으며 결국 <div>요소(".area") 하위의 첫 번째 <p>요소는 건너뛰고 그 다음에 오는 <p>요소에 스타일이 적용됩니다.
※ 익스플로러 버전 6에서는 적용되지 않습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area p+p{color: orange;} </style> </head> <body> <div class="area"> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> </div> </body> </html>
|
1-4. 형제 선택자(Sibling selectors)
"형제 선택자"는 앞서 본 "인접 형제 선택자"와 유사하지만 큰 차이가 있습니다. "형제 선택자"는 "E~F"형태로 표현되고, "E"요소 다음에 오는 "F"요소를 "모두" 선택하는 방법입니다.("인접 형제 선택자"의 경우에는 바로 다음에 오는 "F"요소만을 지정했었죠) 다음 예제에서는 ".area"클래스 요소에 속한 요소들 중에서 "<h1>요소 다음의 <p>요소 (h1~p)"를 모두 선택하였습니다.
※ "형제 선택자"도 익스플로러 버전 6이하의 브라우저에서 지원되지 않습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area h1~p{color: orange;} </style> </head> <body> <div class="area"> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> </div> </body> </html>
|
1-5. 그룹화(Grouping)
여러 선택자(요소)들에 같은 CSS 내용을 적용해야 할 경우가 있습니다. 이런 경우 쉼표(,)를 활용하여 그룹화할 수 있습니다. 다음 예제에서는 <p>요소와 <address>요소 모두에 같은 스타일을 적용했습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s 일상 Story</title> <style type="text/css"> .area h1, p{color: orange;} </style> </head> <body> <div class="area"> <h1>앙큼한유채`s 일상 Story</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing exit. </p> </div> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-2. 다양한 선택자 알아보기 - 4 (0) | 2018.01.18 |
|---|---|
| 4-2. 다양한 선택자 알아보기 - 3 (0) | 2018.01.17 |
| 4-2. 다양한 선택자 알아보기 - 1 (0) | 2018.01.15 |
| 4-1. CSS의 적용 방법과 기본문법 - 3 (0) | 2018.01.12 |
| 4-1. CSS의 적용 방법과 기본문법 - 2 (0) | 2018.01.11 |