목차
content 예제 - 해당 태그의 속성값 삽입 content 정의 content 구문 content 예제 - JS로 content 속성 적용 방법 content 예제 - 리스트태그 스타일타입에 색상 넣기 content 예제 - 큰따옴표 추가/제거 content 예제 - 미디어 URL 주소 삽입
content 예제 - 해당 태그의 속성값 삽입
[예제] - <a> 태그 href 속성의 속성값을 삽입
<style>
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a::after {content: " (" attr(href) ")";}
</style>
<a href="https://homzzang.com/b/html">HTML 매뉴얼</a><br>
<a href="https://homzzang.com/b/css">CSS 매뉴얼</a>
결과보기
content 정의
(::before / ::after) 가상요소에 내용 삽입.
1.
기본값: normal
상속여부: X
애니가능: X
CSS버전: CSS2
JS구문: 없음. (※ JS로 해당 요소에 가상클래스 부여 불가능. 그러나, 별도의 클래스 부여해 동일 효과 구현 가능. 아래 예제 참고)
2.
IE8 이상 주요 최신 브라우저 모두 지원.
content 구문
selector {content: normal|none|counter( name, counterstyle )/counters(name, counterstyle )|attr(attribute )| string |open-quote|close-quote|no-open-quote|no-close-quote|url( URL )|initial|inherit;}
[속성값]
normal
내용 삽입 X (기본값)
none
내용 삽입 X
counter( name, counterstyle ) / counters(name, counterstyle )
자동 증감 숫자 삽입. 자세히보기
string
지정 문자열 삽입.
open-quote
여는 큰따옴표 삽입 O.
close-quote
닫는 큰따옴표 삽입 O.
no-open-quote
여는 큰따옴표 삽입 X (※ 지정되어 있으면 제거.)
no-close-quote
닫는 큰따옴표 삽입 X (※ 지정되어 있으면 제거.)
url( URL )
(이미지/비디오/오디오) 등의 미디어주소 삽입.
initial
이 속성의 기본값으로 지정.
inherit
부모요소의 속성값 상속
content 예제 - JS로 content 속성 적용 방법
해당 요소에 별도의 클래스 추가 후, 해당 클래스에 대해 적용.
<style>
.host::after {
content: " Homzzang.com";
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">홈짱닷컴</div>
<script>
function homzzang() {
document.getElementById("hz").className += " host";
}
</script>
결과보기
content 예제 - 리스트태그 스타일타입에 색상 넣기
HTML 기본 블릿 제거 후, content로 대체 블릿 추가해 색상 지정.
<style>
ul {
list-style: none; /* HTML 기본 블릿 제거 */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* 대체 블릿 삽입 */
color: red; /* 대체 블릿 색상 */
font-size:18px; /* 대체 블릿 크기 */
padding-right: 8px;
}
</style>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
결과보기
content 예제 - counter (카운터: 자동 숫자 매기기) 삽입
<style>
p {counter-increment: index;}
p::before {content:counter(index) '. ';}
</style>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
결과보기
content 예제 - 큰따옴표 추가/제거
<style>
p.a::before {content: open-quote;}
p.a::after {content: close-quote;}
p.b::before {content: no-open-quote;}
p.b::after {content: no-close-quote;}
</style>
<p class="a">홈짱닷컴 Homzzang.com</p>
<p class="b">홈짱닷컴 Homzzang.com</p>
결과보기
content 예제 - 미디어 URL 주소 삽입
<style>
p::before {
content: url(https://i.imgur.com/WfW5mBC.png) " ";
vertical-align:middle;
}
</style>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
결과보기
