Today I Learned
오늘은 CSS 의 가상 요소인 ::before 와 ::after 에 대해 알아보았다.
먼저 가상 요소에 대해 설명하자면
CSS에서 요소의 특정 부분에 스타일을 적용하기 위해 사용되는 장치이다.
가상 요소는 실제 HTML 문서에는 존재하지 않지만 CSS를 사용하여 선택한 요소의 특정 위치에 가상의 요소를 생성하고 스타일을 지정할 수 있다.
따라서 선택한 요소의 일부에만 스타일이 적용된다.
가상 요소는 두 개의 콜론(::) 으로 시작한다. 가상 요소 에는 first-line, first-letter, selection, before, after 등 이있지만, 나는 before 와 after 를 사용해야 했기 때문에 이 두가지를 공부해보았다.
먼저 ::before 는
특정 요소의 시작 부분에 내용을 추가한다.
가상 요소의 내용은 content 속성을 사용하여 정의된다.
주로 요소의 시작 위치에 장식적인 콘텐츠를 추가할 때 사용된다.
css
.example::before {
content: "Before Content ";
}html
<div class="example">Main Content</div>결과
Before Content Main Content이 경우 .example::before에 "Before Content "라는 문자열이 콘텐츠로 삽입되어 있고, .example에 "Main Content"라는 실제 콘텐츠가 있다. 따라서 결과는 "Before Content Main Content"가 된다.
다음으로 ::after 는
::after는 특정 요소의 끝 부분에 내용을 추가한다.
역시 content 속성을 사용하여 내용을 정의합니다.
주로 요소의 끝 위치에 장식적인 콘텐츠를 추가할 때 사용된다.
css
.example::after {
content: " After Content";
}html
<div class="example">Main Content</div>결과
Main Content After Content
이 경우, .example라는 요소에 가상 요소 ::before와 ::after가 적용되어 각각 "Main Content "와 "After Content"가 콘텐츠로 추가된다. 따라서 결과적으로 "Main Content After Content"가 나타난다.
주의할 점은 ::before 와 ::after 는 가상 요소이기 때문에 실제로 HTML 문서에는 추가되지 않는다. 단순히 CSS를 사용하여 요소의 시작 부분이나 끝 부분에 가상의 콘텐츠를 삽입하는 것이다. 이를 통해 디자인 요소를 추가하거나 스타일을 적용할 수 있다.
