반응형
부모와 자식
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐
자식 요소는 부모 요소와 반대. 되며 자식 요소는 여러 개
html > body > p, div > h1 > span
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
조상과 자손
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소
html > body > p, div > h1 > span
- <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>
형제
같은 부모를 가지고 있는 요소들은 서로 형제 관계
형제 관계 중에는 인접한 관계. 형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해 있다고 함
자손, 자식, 인접형제 선택자
자손 : div span { color: red; }
자식 : div > h1 { color: red; }
인접 형제 : div + p { color: red; }
반응형
'○ WEB > 19.03 FastCampus_CSS' 카테고리의 다른 글
| div내의 div를 가운데 정렬하고자 할 때 (0) | 2019.07.24 |
|---|---|
| 스타일 우선 적용 구체성 / 상속 (0) | 2019.07.23 |
| CSS란 / 적용방법 4가지 / 선택자 / 속성값 (0) | 2019.07.23 |
| 블록 레벨 / 인라인 레벨 (0) | 2019.07.23 |
| Semantic MarkUp / HTML5 new elements (0) | 2019.07.23 |
