문서 구조의 이해
선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지를 살펴보겠습니다.
부모와 자식
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다.
자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다.
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
조상과 자손
조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다.
정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다.
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.
- <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>, <p>가 형제 요소입니다.
형제 관계 중에는 인접한 관계도 있습니다.
형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해 있다고 합니다.
여기서 <p>가 <div>에 인접한 형제 요소가 됩니다.
문서의 구조는 흔히 가계도나 조직도의 관계와 비슷하다고 생각하면 이해하기가 쉽습니다.
문서 구조 관련 선택자
문서 구조를 이용한 선택자는 3가지 있습니다.
자손 선택자와 자식 선택자 그리고 인접 선택자입니다.
문서 구조를 잘 이해하셨다면 쉽게 예측할 수 있습니다.
자손 선택자
|
1
|
div span { color: red; }
|
cs |
자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
이 선택자는 <div>의 자손 요소인 <span>를 선택하는 선택자 입니다.
자식 선택자
|
1
|
div > h1 { color: red; }
|
cs |
자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.
꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다.
이 선택자는 <div>의 자식 요소인 <h1>를 선택하는 선택자 입니다.
인접 형제 선택자
|
1
|
div + p { color: red; }
|
cs |
인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.
자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없습니다.
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다.
|
1
2
3
|
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
body > div table + ul { ... }
|
cs |
위 코드처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있습니다.
유의할 점은 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소라는 것입니다.
가상 클래스(pseudo class)
가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다.
우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.
예를 들어, <p>가 있다고 가정하겠습니다.
이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요?
가상 클래스가 없다면 이런 과정을 거치게 됩니다.
- 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
- p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
- p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.
여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다.
어쩔 수 없이 다른 언어를 사용해야 하는데, 이는 개발 비용이 들어가는 일입니다.
그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했습니다.
|
1
2
3
|
:pseudo-class {
property: value;
}
|
cs |
위처럼 가상 클래스는 :(콜론) 기호를 써서 나타냅니다.
가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적입니다.
":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있습니다.)"
문서 구조와 관련된 가상 클래스
문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자 입니다.
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
|
1
2
3
4
5
|
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
|
cs |
|
1
2
|
li:first-child { color: red; }
li:last-child { color: blue; }
|
cs |
첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용됩니다.
실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하게 됩니다.
|
1
2
3
4
5
|
<ul>
<li class="first-child">HTML</li>
<li>CSS</li>
<li class="last-child">JS</li>
</ul>
|
cs |
앵커 요소와 관련된 가상 클래스
앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있습니다.
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미합니다.
|
1
2
|
a:link { color: blue; }
a:visited { color: gray; }
|
cs |
사용자 동작과 관련된 가상 클래스
이 클래스들도 <a>에 주로 많이 쓰입니다.
<a>에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능합니다.
- :focus: 현재 입력 초점을 가진 요소에 적용
- :hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용
|
1
2
3
|
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }
|
cs |
:focus는 현재 입력 초점을 가진 요소에 적용됩니다.
focus(초점)는 지금 현재 선택을 받는 것을 의미합니다.
예를 들면, 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태입니다.
또 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태입니다.
:hover는 마우스 커서가 있는 요소에 적용됩니다. (마우스를 올렸을 때를 의미합니다.)
:active는 사용자 입력으로 활성화된 요소를 의미하는데, <a>를 클릭할 때 또는 <button>를 눌렀을 때처럼 순간적으로 활성화됩니다.
'웹 > 웹 이론 정리' 카테고리의 다른 글
| [웹 개발] 단위, 배경, 박스모델 (1) (0) | 2021.01.09 |
|---|---|
| [웹 개발] 선택자 (3) (0) | 2021.01.09 |
| [웹 개발] 선택자 (1) (0) | 2021.01.08 |
| [웹 개발] CSS 이해하기 (0) | 2021.01.08 |
| [웹 개발] 콘텐츠 모델, 시맨틱 마크업, 블록 & 인라인 (0) | 2021.01.08 |
