CSS 가상요소(Pseudo-elements)는 선택한 요소의 특정 부분을 스타일링하거나, 요소 안에 존재하지 않는 내용을 추가할 수 있게 해주는 기능입니다. 가상요소는 :: 구문을 사용하여 정의하며, 가상요소를 통해 요소의 일부분만 선택할 수 있습니다.
주요 가상요소는 다음과 같습니다
1. ::before
선택한 요소의 콘텐츠 앞에 가상으로 콘텐츠를 추가합니다.
요소 내부의 첫 번째 자식으로 간주됩니다.
p::before {
content: "안녕하세요! ";
color: red;
}이 코드는 p 요소 앞에 "안녕하세요!"라는 텍스트를 빨간색으로 추가합니다.
2. ::after
선택한 요소의 콘텐츠 뒤에 가상으로 콘텐츠를 추가합니다.
요소 내부의 마지막 자식으로 간주됩니다.
p::after {
content: " 감사합니다!";
color: blue;
}이 코드는 p 요소 뒤에 "감사합니다!"라는 텍스트를 파란색으로 추가합니다.
3. ::first-line
블록 요소의 첫 번째 줄만 선택하여 스타일을 적용할 수 있습니다. 이 가상요소는 텍스트의 첫 줄만을 대상으로 하며, 레이아웃이나 글꼴 크기와 같은 요소들에 의해 달라질 수 있습니다.
p::first-line {
font-weight: bold;
color: green;
}이 코드는 p 요소의 첫 번째 줄 텍스트를 굵게 하고 초록색으로 만듭니다.
4. ::first-letter
블록 요소의 첫 번째 글자만 선택하여 스타일을 적용할 수 있습니다. 주로 첫 글자를 강조할 때 사용됩니다.
p::first-letter {
font-size: 2em;
color: purple;
}이 코드는 p 요소의 첫 번째 글자를 크게 하고 보라색으로 만듭니다.
5. ::selection
사용자가 선택한 영역에 스타일을 적용할 수 있습니다. 보통 텍스트를 선택할 때 나타나는 배경색과 글자색을 변경할 수 있습니다.
::selection {
background: yellow;
color: black;
}이 코드는 사용자가 텍스트를 선택할 때 배경을 노란색으로, 글자를 검은색으로 변경합니다.
가상요소의 주요 특징:
가상요소는 실제 DOM 트리에 존재하지 않는 요소입니다. 따라서 자바스크립트로 직접 접근하거나 변경할 수는 없습니다.
가상요소는 ::을 사용하지만, 이전 버전의 CSS에서는 단일 콜론 :을 사용하는 경우도 있으며, 이는 여전히 일부 브라우저에서 지원됩니다.
이 가상요소들을 적절하게 사용하면, 실제로 HTML을 수정하지 않고도 다양한 시각적 효과를 줄 수 있어 매우 유용합니다.
<ul>
<li>float Item 1</li>
<li>float Item 2</li>
<li>float Item 3</li>
</ul>
<div class="nextBox">How to float clear</div>ul{
padding:15px 20px;
background:#e5e5e5;
}
ul:after{
content:'';
display:block;
clear:both;
}
ul > li{
float:left;
margin:5px;
padding:5px 10px;
background:pink;
list-style:none;
}1. 가상요소 ::after의 역할
ul:after는 리스트 아이템들(li)이 float:left로 설정된 상황에서 부모 요소인 ul에 높이를 자동으로 조정하고, 다음 요소(.nextBox)가 올바르게 배치되도록 도와주는 역할을 합니다.
2. Float 문제와 Clearfix 패턴
float 속성을 적용하면 요소가 문서 흐름에서 벗어나게 됩니다. 즉, 부모 요소(ul)는 float된 자식 요소들을 인식하지 못해 높이가 0이 되는 문제가 발생할 수 있습니다. 이 경우, ul의 배경색이나 레이아웃이 제대로 잡히지 않고, ul 이후에 나오는 요소들이(여기서는 .nextBox) 의도하지 않은 위치에 배치될 수 있습니다.
문제 예시: float된 li 요소들로 인해 ul의 높이가 0으로 축소되고, .nextBox는 ul의 배경 위가 아니라, li들이 떠 있는 곳 옆에 배치될 수 있습니다.
3. Clearfix 패턴 적용 원리
ul:after 가상요소를 사용한 이유는 부모 요소(ul)가 float된 자식 요소들을 정상적으로 감싸도록 하기 위함입니다. 이를 위해 clear:both를 가상요소에 적용합니다.
Clearfix 원리:
ul:after는 가상요소로, ul의 마지막에 추가되는 보이지 않는 블록 요소입니다.
content:'';는 가상요소에 콘텐츠를 추가하지 않겠다는 의미입니다. (즉, 시각적으로 아무것도 나타나지 않음)
display:block;은 이 가상요소가 블록 레벨 요소로 동작하도록 설정합니다.
clear:both;는 가상요소가 좌우 모두에서 떠 있는(float) 요소들을 정리하게 만듭니다. 이로 인해 ul 요소는 더 이상 높이가 0으로 축소되지 않고, float된 자식 요소들의 높이를 감싸게 됩니다.
4. 가상요소를 사용한 이유
가상요소를 사용한 이유는 HTML 구조를 변경하지 않고 CSS만으로 float 문제를 해결하기 위함입니다. ::after를 사용하면 별도의 추가적인 HTML 요소를 삽입하지 않아도, CSS로만 부모 요소가 float된 자식 요소들을 감싸는 효과를 낼 수 있습니다.
5. 최종적으로 Clearfix 패턴이 적용된 결과
ul 요소는 float된 자식들(li)을 제대로 감싸게 되어 배경색이나 레이아웃이 의도한 대로 나타납니다.
.nextBox는 ul의 아래쪽에 정상적으로 배치됩니다.
따라서 가상요소 ::after를 사용한 Clearfix는 레이아웃 문제를 해결하는 유용한 패턴입니다. HTML 구조를 변경하지 않고도 float로 인해 발생하는 문제를 깔끔하게 처리할 수 있습니다.
CSS 가상요소가 실제로 동작하는 이유
CSS 가상요소가 실제로 동작하는 이유는 가상요소가 DOM 트리에는 존재하지 않지만, 렌더링 엔진이 이를 인식하고 화면에 표시하기 때문입니다.
가상요소는 브라우저가 HTML 문서를 해석할 때, 가상으로 생성되어 특정 위치에 스타일을 적용할 수 있도록 해주는 특별한 요소입니다.
이 과정에서 가상요소는 실제 HTML 코드에 없더라도 브라우저는 가상요소를 기반으로 화면에 적절한 스타일을 적용합니다.
1. 브라우저의 렌더링 과정
브라우저는 HTML 문서를 해석하여 DOM 트리와 CSSOM 트리를 만듭니다. 그리고 이 두 트리를 결합하여 렌더 트리를 생성한 후, 화면에 요소들을 배치하고 그리는 작업을 합니다.
- DOM 트리: HTML 문서의 구조를 나타냅니다.
- CSSOM 트리: CSS 스타일을 나타냅니다.
- 렌더 트리: DOM과 CSSOM을 결합하여 실제로 렌더링할 요소들을 계산한 트리입니다.
가상요소는 HTML에는 없지만, CSS에서 선언되면 브라우저의 렌더 트리에 포함되어 렌더링됩니다. 즉, 브라우저는 가상요소에 정의된 스타일을 읽고, 그것을 실제 DOM 구조에 있는 것처럼 렌더링하여 화면에 나타냅니다.
2. 가상요소의 동작 방식
가상요소는 CSS 선택자로 선택된 요소에 따라 특별히 생성되며, 그 요소의 특정 위치(앞이나 뒤, 첫 글자 등)에 스타일을 적용할 수 있게 해줍니다.
ul:after {
content: '';
display: block;
clear: both;
}ul:after는 ul 요소의 마지막에 보이지 않는 가상요소를 생성합니다.content: '';은 가상요소가 화면에 보이지 않도록 설정하지만, 이 가상요소는 여전히 존재합니다.display: block;으로 이 가상요소는 블록 레벨 요소로 동작합니다.clear: both;로 인해 이 가상요소는 float된 요소들 아래에 배치되어 부모 요소(ul)의 높이를 계산할 수 있게 만듭니다.
즉, 가상요소는 HTML에는 존재하지 않지만, CSS에 정의되면 브라우저가 이를 인식하고 특정한 위치에 렌더링하여 스타일이 적용되도록 합니다. 따라서 실제 HTML에 없는 가상요소라도 브라우저는 CSS에 따라 이를 렌더링 트리에 포함시켜 실제로 화면에 스타일을 적용할 수 있게 됩니다.
3. ::before와 ::after가 자주 사용되는 이유
특히 ::before와 ::after는 매우 자주 사용되는데, 이들은 DOM의 첫 번째 자식 또는 마지막 자식처럼 동작하면서 콘텐츠를 추가하거나, 레이아웃 조정 같은 작업을 할 수 있기 때문입니다. 이 가상요소들이 브라우저에 의해 인식되기 때문에, 추가적인 HTML 코드 없이도 스타일을 변경하거나 레이아웃 문제를 해결할 수 있습니다.
CSS 가상요소는 DOM에 실제로 존재하지 않더라도, 브라우저가 렌더링 과정에서 가상으로 생성하고 처리하기 때문에 실제로 화면에 적용됩니다. 가상요소는 스타일링과 레이아웃을 간단하게 처리할 수 있는 강력한 도구로, 이를 통해 HTML을 수정하지 않고도 많은 작업을 수행할 수 있습니다.
