한 줄 요약
부모에 position: relative, 가상 요소에 position: absolute를 주면 HTML을 늘리지 않고 카드 배지, 이미지 오버레이, 장식 도형을 만들 수 있습니다.
비유로 이해하기
position 시리즈 4편의 텐트 말뚝과 로프를 기억하시나요? 부모(말뚝)에 relative, 자식(로프)에 absolute를 주는 공식이었죠. 이번에는 로프가 HTML 요소가 아니라 가상 요소입니다.
예를 들어 카드마다 “NEW” 배지를 붙이려고 HTML에 span을 하나씩 추가할 필요가 없습니다. 카드에 ::after를 붙이고 absolute로 모서리에 놓으면 끝이에요. 이미지 위에 글씨가 잘 보이도록 깔아 주는 반투명 검은 막(오버레이)도 같은 방법으로 만듭니다.
비교해 보기
- HTML로 배지 추가: 카드마다 코드를 넣어야 하고, 빼먹기 쉽습니다.
- ::after로 배지: 클래스 하나만 붙이면 배지가 생깁니다.
- 오버레이:
inset: 0은 “부모를 꽉 채워라”라는 뜻입니다. top, right, bottom, left를 모두 0으로 준 것과 같아요.
직접 실행해 보기
.card의 position: relative;를 지워 보세요. NEW 배지가 카드를 벗어나 엉뚱한 곳으로 날아갑니다(말뚝이 없어진 거예요). 다시 넣은 뒤, 오버레이의 투명도 0.45를 0.7이나 0.1로 바꿔 보세요.
GenerateBlocks에서는
GenerateBlocks에서 섹션 배경에 사진을 깔고 글씨가 잘 안 보일 때, 컨테이너의 Position을 Relative로 두고 ::before로 반투명 막을 까는 방식이 많이 쓰입니다. 이 사이트 학습노트 시리즈 목록의 “지금 읽는 글” 배지도 ::after로 붙인 것이에요.
참고: Kevin Powell: Before and After pseudo elements explained, part one (영상) · Kevin Powell: part three, as design elements (영상) · 빔캠프: 가상요소를 활용한 5가지 예제 (영상)