::after2 HTML-CSS 가상 요소 선택자(Pseudo-Elements) 1. ABC::before 가상 요소 선택자 선택자 ABC 요소의 내부 앞에 내용을 삽입. 가상의 인라인(글자) 요소(ex. 앞!)를 만들어서 선택자 태그의 내부의 앞에 삽입됨 ! cf. 인라인 요소는 가로, 세로 값을 설정해도 적용되지 않는 특성이 있다 ! => 가로, 세로 값 적용해주고 싶으면 가상 요소 선택자를 블록 요소로 설정해주면 가능하다. !! display: block; 2. ABC::after 가상 요소 선택자 선택자 ABC 요소의 내부 뒤에 내용을 삽입. 가상의 인라인(글자) 요소(ex. 뒤!)를 만들어서 선택자 태그의 내부의 뒤에 삽입됨 ! !! ::before와 ::after 가상 요소 선택자를 사용할 때는, 내용이 삽입하려는 내용이 있든 없든 반드시 content: " ";를 작성해.. 2022. 7. 4. [프론트엔드][자바스크립트] TIL Day-21 overflow와 ::before& ::after # overflow의 속성값은 visible이 기본값이고, 위의 속성들이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이를 설정하거나, white-space를 nowrap으로 설정해야 한다. ::before( :before)과 ::after( :after) 선택한 요소의 첫 자식으로 의사 요소(pseudo elements)를 하나 생성한다. 보통 content 속성과 함께 쌍으로 사용되는데, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. 옆의 CSS 스타일링을 참고하면서 보면, id btnMnav는 display: none;을 주어 삼선(햄버거 버튼)을 만들게 되고, ::before는 span요소의 앞에 붙어서 아래 이미지에서 보듯 사이트의 삼선(햄버거 버튼)에서의 맨 위의 선을.. 2022. 4. 25. 이전 1 다음
