CSS content는 string뿐만 아니라 image, counter, attr 또한 값으로 지정할 수 있다.
값이 문자열인 속성
::before{
content: “텍스트”;
}
값이 이미지인 속성으로 url("이미지경로")
를 입력한다. 또한 이미지 로드 실패시 보여줄 대체텍스트를 /
로 구분하여 넣을 수 있다.
::before{
content: url("이미지경로");
content: url("이미지경로")/"대체 텍스트";
content: linear-gradient(#aaa, #ddd);
}
자동으로 번호를 매길 수 있는 변수로 CSS규칙에 따라 값이 증가 또는 감소한다.
ol{
/* 구현 할 conuter의 초기값 지정 */
counter-reset: 함수명;
list-style: none;
}
li::before{
/* 카운터 값을 1씩 증가시킨다. */
counter-increment: 함수명;
/* 카운터 값을 표시한다. */
content: counter(함수명);
}
중첩된 다른 레벨의 카운터를 텍스트를 삽입하여 분리를 할 수 있다.
ol{
/* 구현 할 conuter의 초기값 지정 */
counter-reset: 함수명;
list-style: none;
}
li::before{
/* 카운터 값을 1씩 증가시킨다. */
counter-increment: 함수명;
/* 카운터 값을 표시한다. */
content: counters(함수명, "-") " ";
}
요소의 속성을 문자열로 변환하여 브라우저에 보여준다.
<p title=“가사” data-text="마르고 닳도록” >
동해물과 백두산이
</p>
p::before{
/* attr의 값과 문자열 “ - ” 출력 */
content: attr(title) " - ";
}
p::after{
/* attr의 값 도출 */
content: attr(data-text);
}
🧚♀️
나는 CSS의 content 속성을 주로 가상요소 선택자인::after
,::before
에 문자열 또는 빈 값으로 넣어 스타일링 용도로만 사용했다. 하지만 content의 값으로 문자열 이외에도 다양한 값들이 들어 갈 수 있다는 것을 배웠고 필요시에 유용하게 사용되어질 것 같아 기록하고 싶다는 욕구가 솟았다!!
자주 사용하는 속성들은 아니지만 필요시에 잊지말고 사용해보고 싶다.
📝 Reference