개인공부 기록/HTML&CSS
2022. 6. 29.
자기소개 페이지 네비게이션 바에 :Hover, ::after 선택자 적용하기
자기소개 페이지를 만들 때 내용도 부실하고, 좀 밋밋한 느낌을 많이 받아서 고민하던 중 멋있어 보이는 CSS 기능이 있어서 적용했다. 어떤 것을 적용했는지, 무슨 개념인지 정리한 글이다. :Hover? 객체에 마우스 커서를 가져다 놓으면 다른 스타일 값을 보여주고 싶을 때 사용하는 태그. 가상 요소(Pseudo-Element)? 일부 내용에 스타일을 적용할 때 사용한다. 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙여 표시하고, 가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식하지만 웹브라우저, explore에서는 인식이 안될 수 있다. CSS3부터는 가상 클래스는 :로(:hover, :active, 등), 가상 요소는::로(::after, ::before,..