##문서 구조의 이해
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
#1. 부모와 자식
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다.
자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다.
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
#2. 조상과 자손
조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다.
정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다.
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.
- <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
- <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
- <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
- <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
- <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
보통 문서의 요소들은 모두 이처럼 어느 요소의 자식(자손) 요소이자 부모(조상) 요소가 되는 경우가 많습니다.
#3. 형제
같은 부모를 가지는 요소들은 서로 형제 관계에 있다.
위 코드에서 <div>,<p>가 형제요소
형제관계중에 인접한 관계도 있음
형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해있다고 함
##문서 구조 관련 선택자
1. 자손선택자
선택자와 선택자 사이에 공백으로 구분함
div span { color: red; }div의 자손 요소인 span에 red적용됨
2. 자식선택자
꺾쇠 기호를 넣어주면 됨(공백 있어도 되고 없어도 됨)
div > h1 { color: red; }div요소의 h1에 해당하는 부분만 red로 적용됨
3. 인접형제 선택자
선택자 사이에 + 기호 삽입(공백 있어도 되고 없어도 됨)
div + p { color: red; }+ 뒤의 선택자를 선택한다.
4. 일반형제 선택자
선택자 사이에 ~ 기호 삽입
div ~ span { color: red; }부모 요소가 동일하고, 뒤쪽 선택자 요소가 뒤에 위치할 때 선택한다. 두 요소가 HTML상 붙어있지 않아도 뒤에 나오는 span을 모두 적용하게 된다.
5. 일반구조 선택자
| 구분 | 설명 |
| :first-child | 형제 관계 중에 첫번째 위치하는 태그 선택 (html 태그 구조 상 맨 첫번째일 경우 가능) |
| :last-child | 형제 관계 중에 마지막 위치하는 태그 선택 |
| :nth-child | 형제 관계 중에 수열번째 태그 선택 (짝수: even, 홀수: odd) :nth-child(even) / :nth-child(odd) |
| :nth-last-child | 형제 관계 중에 마지막 수열번째 태그 선택 |
🐱👤nth-child 표기법
짝수 표기법 :nth-child(2n)
홀수 표기법 :nth-child(2n+1)
괄호 안에 몇번째 인지만 지정해서 사용할 수도 있다.
n 에는 0부터 넣어서 계산한다.
🐱👤:nth-child 사용시 주의사항
동위관계에 있는 태그 중 다른 태그가 있다면 적용되지 않는다.
ul>li 처럼 동일한 태그로 있어야 적용이 된다.
<div class="boxList">
<p>첫번째</p>
<h1>두번째</h1>
<h3>세번째</h3>
</div>.boxList:nth-child(2) {color: red;}
이럴때 사용하는 것이 형태구조 선택자이다.
6. 형태구조 선택자
선택자가 목록에 섞여있으면 그 목록 중 처음과 끝을 찾을 수 있다.
목록의 첫번째에 있지 않아도 된다.
| 구분 | 설명 |
| :first-of-type | 자손 중에 첫번째로 나오는 특정태그 |
| :last-of-type | 자손 중에 마지막에 나오는 특정태그 |
<div class="boxList">
<p>첫번째</p>
<h1>두번째</h1>
<h3>세번째</h3>
<h1>네번째</h1>
</div>.boxList h1:first-of-type {color: red;}
각자 태그의 성격이 다르지만 h1의 첫번째를 선택할 수 있다.
참고자료
'MarkUp > CSS' 카테고리의 다른 글
| [CSS] 레이아웃(display, visibility, float, clear, position ) (0) | 2021.01.12 |
|---|---|
| [CSS] 폰트&텍스트 알아보기 (0) | 2021.01.11 |
| [CSS] boxmodel 구성 알아보기 (0) | 2021.01.10 |
| CSS_가상선택자 알아보기 (0) | 2021.01.08 |
| CSS_CSS문법과 적용 (0) | 2021.01.07 |