요즘 나오는 티스토리 블로그 스킨은 대부분 관련 글 보이기 목록을 사진과 함께 보여주고 있다. 글에 대표 이미지가 있다면 문제없지만 글에 이미지가 없는 글은 애써 디자인한 틀이 깨질 수도 있다. 이를 방지하기 위해 정해진 이미지를 미리 불러들이게 만든다. 대표 이미지가 있으면 위에 덮여 보이고 없으면 정해진 이미지가 보이게 하는 것이다.
이때 쓰는 시에스에스 구문은 :before이다. ::before는 선택한 요소의 첫 자식으로 가상 요소(pseudo-element)를 하나 만든다. 보통 컨텐트 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. 이 블로그 스킨은 아래와 같은 구문이 있다.
<!--이름이 커버-리스트인 영역(<div class=cover-list>)에 순서가 없는 목록(<ul>)의 아이템(<li>) 를 꾸미는 구문이다. 미리 이미지를 불러들이는 구문이다. -->
.cover-list ul li figure:before {
background-image: url(./images/no_img.jpg);
content: "이미지 없음";
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px 0 0 0;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #fff;
}
미리 no_img.jpg를 불러들이고 내용으로 "이미지 없음"을 적는다. 글씨는 흰색으로 처리해서 보이지 않게 했고 아래 이미지를 no_img.jpg로 넣었다.
z-index: 0;으로 만들어진 가상 요소가 가장 아래에 놓이게 한다.
비포가 있으면 당연히 애프터가 있다. 비포는 앞에 불러들이고 애프터는 뒤에 불러들인다고 보면 된다. 블로그 옆에 카테고리는 아래와 같이 :after를 써서 목록을 꾸며 보았다.
. category_list li a:after {
content: ">";
display: inline-block;
float: right;
margin-right: 10px;
}
developer.mozilla.org/ko/docs/Web/CSS/::before
::before (:before) - CSS: Cascading Style Sheets | MDN
/* CSS3 syntax */ ::before /* CSS2 syntax */ :before 참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다. One simple example o
developer.mozilla.org
