[counter] CSS - content 속성 ★ - 생성된 콘텐츠 삽입 (= content속성 = 콘텐트속성/컨텐트속성)

목차

1. content 예제 - 해당 태그의 속성값 삽입
2. content 정의
3. content 구문
4. content 예제 - JS로 content 속성 적용 방법
5. content 예제 - 리스트태그 스타일타입에 색상 넣기
6. content 예제 - 큰따옴표 추가/제거
7. 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>

 

결과보기