인프런 커뮤니티 질문&답변
작성한 질문수
:after에 설명해주신 css 차이가 이해가 어렵습니다.
작성
·
214
0
header .lnb li a span:after{position: absolute; left:0; bottom:0; content:""; display:block; width: 100%; height: 1px; background: #2d5b79;}
header .spot li:after{content:""; position: absolute; left: 0; top: 50%; width: 1px; height: 7px; background: #ccc; transform: translateY(-50%); }
1강에서 40분쯤에 이렇게 강의를 해주셨는데
span:after 에는 display:block;을 주셨고
li:after 에는 display:block; 을 안주셨더라고요
둘 다 똑같이 선을 만드는 css인데요 (차이는 좌우에 만드느냐, 아래에 만드느냐)
이 두개의 차이는 뭔지 설명 좀 부탁드리겠습니다 : )
ㅜㅜ
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
rooftop7788님, CSS의 :after 의사 요소에 관련된 질문 주셔서 감사합니다.
span:after에 display: block; 속성을 부여한 이유와 li:after에 해당 속성을 부여하지 않은 이유에 대해 설명드리겠습니다.
:after 의사 요소는 기본적으로 인라인(inline) 요소로 취급됩니다. display: block; 속성을 지정하게 되면 해당 요소가 블록 레벨(block-level) 요소처럼 동작하게 되어, 가로 폭 전체를 차지하며 줄바꿈이 일어납니다.
span:after에서 display: block;을 추가하신 이유는 아마도 span 태그 내부에 새로운 블록 레벨 요소로 선을 만들기 위함으로 추측됩니다. 선을 만들기 위해 width: 100%;와 height: 1px;를 지정하고 있으며, display: block;을 통해 가로 선의 형태를 만드는 데 필요한 블록 레벨 요소의 특성을 부여한 것입니다.
반면, li:after에서는 display: block;을 지정하지 않았는데, 여기서도 선을 만들고 있지만, width: 1px;과 height: 7px;로 세로 선을 만들고 있음을 알 수 있습니다. 아마도 li:after가 인라인 요소로 충분하기 때문에 별도로 블록 레벨 요소로 변경할 필요가 없었던 것으로 보입니다. 또한, top: 50%;와 transform: translateY(-50%);를 이용하여 선을 수직 정렬하고 있는데, 이는 선을 li 요소의 중앙에 위치시키기 위함입니다.
두 코드에서 공통적으로 position: absolute;를 사용하여 요소를 절대 위치에 놓고, 차이점은 가로 선을 만들느냐 세로 선을 만들느냐에 있습니다. 따라서 display: block; 속성의 유무는 이러한 디자인 목적에 따라 달라질 수 있습니다.
설명이 도움이 되셨기를 바라며, 질문이 더 있으신 경우 언제든지 문의해 주세요!