HTML+CSS 기초 강의 - 27. CSS 선택자 기초 4 - 가상요소
강의 내용이 초보자에게는 조금 어렵습니다.
어려운 개념이고, 중급 과정 정도에서 배우게되면 좋을 내용이지만, 워낙 빈번하게 사용하기 때문에 이런 선택자를 사용한다는 것만이라도 알아야 해서 기초 과정에 살짝 끼워넣었습니다.
초보자는 이해 안되는 부분들은 읽고서 일단 넘어가기를 권합니다.
클래스/태그::before, 클래스/태그::after
요소 앞/뒤에 내용을 추가할 수 있는 가상요소(pseudo-element) 선택자입니다.
가상요소는 실제 존재하지 않지만 기존 요소 앞뒤에 요소가 있는것처럼 사용할 수 있는 요소입니다.
처음접하면 개념도 난해하고, 이런걸 왜쓰나 싶지만, 실무에서 고급 CSS 작성 기법으로 많이 사용합니다.
굉장히 유용한 CSS 선택자이므로 꼭 알아두어야 합니다.
CSS2 표준에도 있었지만 사용이 많지 않았고 CSS3에서부터 본격적으로 사용되고 있습니다.
CSS2 표준에서는 단일 콜론(:before, :after)이었지만, CSS3 규격에서는 가상요소와 관련된 선택자는 더블콜론(::before, ::after)이 표준입니다.
다만, :가상요소도 대부분 웹브라우저가 지원합니다.
CSS 선택자 중에서 가장 특별한 선택자로, 선택한 요소 앞이나 뒤에 새로운 내용을 추가하거나 CSS 속성을 부여할 수 있는 특별한 선택자입니다.
예를 들면 특정 요소들 앞에 아이콘이나 리본같은 아이콘을 부여하거나 부가적인 내용을 추가할 수도 있습니다.
가상요소를 사용해 엘리먼트(들)을 선택한 경우 "content" CSS 속성을 추가로 사용할 수 있습니다.
예를들어
.aside p::before{ content:'- ', color:red}
처럼 가상요소를 정의했다면
<div class="aside"> <p>내용1</p> <p>내용2</p></div>
와 같은 섹션은 웹 브라우저에서는
- 내용1- 내용2
처럼 보이게 됩니다.
클래스/태그::first-letter, 클래스/태그::first-line
텍스트 내용의 일부를 선택하는 가상요소 선택자입니다.
일반적인 CSS 선택자의 최소 기본단위인 요소 단위가 아니라 텍스트 내용의 일부만을 선택할 수 있는 가상선택자입니다.
예를 들면 문단의 첫글자나 첫줄을 선택할 수 있습니다.
문단의 첫글자나 첫줄을 강조해서 문서를 좀더 보기좋게 장식을 넣을 수 있습니다.
*첫줄의 범위
처음 이 개념을 접하면 상당히 혼란스러운데, 간단하게 결론만! 말하면 웹브라우저 화면에 보이는 첫줄이 됩니다.
화면 레이아웃에 따라서는 한줄로 입력된 내용이 두줄, 혹은 그 이상으로 줄이 늘어날 수도 있습니다.
즉, 화면 레이아웃에 따라 같은 내용의 줄수가 달라지게 되고, 달라지는 줄수에 따른 첫줄!이 가상 선택자에 의해 선택되는 범위가 됩니다.
가상요소 선택자라는 것은 태그로 지정해 범위가 정해진 것이 아니라 그때그때 화면 레이아웃에 따라 가변이라는 점이 중요합니다.
예를들어
.aside p::before{ content:'- ', color:red}
처럼 가상요소를 정의했다면
<div class="aside"> <p>내용1</p> <p>내용2</p></div>
와 같은 섹션은 웹 브라우저에서는
- 내용1- 내용2
처럼 보이게 됩니다.
가상요소 선택자를 사용하지 않을 경우
위와 같이 보이도록 만들려면 아래처럼
.firstletter{ font-size:24px; color:red}<div class="aside"> <p><span class="firstletter">내</span>용1</p> <p><span class="firstletter">내</span>용2 </p></div>
정의해야 합니다.
문서 안에 적용되는 요소의 수가 작으면 이런식의 작업이 별문제 없겠지만,
문서 내 전체 문단에 대해 적용한다거나, 내용이 바뀐다거나 하면 굉장히 번거로운 HTML 수정 작업을 해야 합니다.
클래스/태그:hover
:hover 상태 선택자는 하이퍼링크 태그에 주로 사용하지만 사실상 모든 태그에 사용할 수 있습니다.
마우스 오버 되었을 대 요소에 변화를 줌으로써 이용자와의 인터렉션을 늘릴 수 있고, HTML 페이지에 다채로운 변화를 줄 수 있습니다.
div.divactive:hover { border:5px solid red;}
로 CSS를 정의했다고 하면
이 CSS는 .dicactive 클래스를 가진 <div></div> 태그에 마우스 오버가 되면 5픽셀로 된 빨강색 테두리가 보이도록 해 사용자의 시선을 끌 수 있습니다.
예를 들어
<div class="divactive">항목1</div><div>항목2</div><div class="divactive">항목3</div><p class="divactive">항목4</p>
와 간은 섹션에서 위 CSS는 항목1과 항목3에 마우스 오버가 되는 경우에만 빨강 테두리가 생깁니다.
클래스/태그:not(한정자)
가상요소 선택자입니다.
다른 가상요소 선택자와 달리 콜론(:)을 1개만 사용합니다.
클래스/태그로 선택한 요소(들)에서 한정자가 없는!(not) 요소들만을 선택해 CSS 속성을 적용합니다.
단순하지만 강력하며, 한정자의 사용 가능 범위가 굉장히 넓어 가상요소 선택자까지 사용 가능합니다.
예를 들어
li:not(.even)p:not(:nth-child(4n+1))p:not(:first-child)div:not(::first-line)
과 같은 한정자로 요소를 선택할 수 있습니다.
예를 들어
li:not(.even)
이런 CSS 선택자 정의를 했다면
<ul> <li>홀수</li> <li class="even">짝수</li> <li>홀수</li> <li class="even">짝수</li></ul>
리스트에서 짝수는 li.even 으로 쉽게 선택할 수 있습니다.
홀수는 .odd 클래스를 만들어 홀수 li에 적용해 li.odd 와 같은 식으로 선택할 수도 있지만
li:not(.even) 으로 선택을 하면 홀수 li만 간편하게 선택할 수 있고, HTML 문서에 추가 코딩을 할 필요도 없게 됩니다.
좀더 간결하고 깨끗한 HTML 문서를 만드는데 있어서 :not 과 같은 가상요소 선택자는 매우 중요합니다.
div:not(::first-line)
이 예처럼 한정자를 첫줄을 선택하는 가상요소 선택자로 사용할 경우, <div></div> 안의 텍스트 내용중 첫줄을 제외한 나머지 줄들을 선택합니다.