[css] content 속성 사용법

 

 

[css] content 속성 사용법

 

이전 시간에 :before, :after 가상 요소를 배우면서 두 요소는 주로 content 속성과 함께 사용한다고 했습니다.

 

[css] - :before , :after 가상 요소

 

content 속성은 html 문서에 쓰지 않고도 css로 내용을 생성하는 역할을 합니다.

 

 

▶content 속성 브라우저 지원 정보

IE8+, chrome 1.0+, firefox 1.0+, safari 1.0+, opera 4.0+

ie8은 doctype 선언해야 함.

 

 

▶ content 속성값

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

 

 

normal 기본값으로 아무것도 표시하지 않음. (none과 같음)

none 내용에 아무것도 표시하지 않음.

counter 순서를 차례대로 생성

 

counter-increment , counter-reset 속성과 함께 사용

 

counter와 counters가 있으며 문법은 다음과 같음 counters는 숫자를 좀더 세부적으로 지정(예. 1.1)

counter(name, style)

 

*name만 쓸 경우 기본값 decimal(십진수) 적용함

*style은 선택적임, style은 list-style-type과 동일한 값임, 즉 아래 중에서 선택

 

list-style 속성 배우기

 

 

 disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none.

 

 

 

사용 예  -  h1:before{content:counter(month, upper-roman);}

 

 

counters(name, string, style)

 

*name, string 값은 필수 (기본값 decimal)

*string은 마침표(.)처럼 앞 뒤를 분리하기 위한 용도로 사용

*style은 선택적임

 

 

사용 예  -  h1:before {content: counter(month, ".", upper-roman);}

 

 

 

attr(속성값)  선택자의 속성을 생성함
string  문자열을 생성
open-quote 여는 인용부호를 생성
close-quote 닫는 인용부호를 생성
no-open-quote 여는 인용부호를 없앰(open-quote를 취소하기 위해 사용 됨)
no-close-quote 닫는 인용부호를 없앰(close-quote 를 취소하기 위해 사용 됨)
url(url)  외부 자원(이미지, 음악, 비디오 등)을 생성
initial 기본값으로 설정
inherit 부모 요소 속성값을 상속함.

 

 

 

 

counter 속성은 counter-increment , counter-reset 속성과 함께 사용하며, 숫자를 자동으로 생성하는

 

역할을 합니다~

 

다음 시간에 더 자세히 알아볼게요~

▶content 속성을 실제 적용한 사례를 보겠습니다

 

content.htm

 

 

html

<h2>지구별안내서 네이버 오픈캐스트 구독하기</h2> <p><a href="http://opencast.naver.com/IT741">지구별 안내서 오픈캐스트</a> 구독하시면<br>  html/css를 좀 더 체계적으로 공부하실 수 있어요 </p>   <h3>홈페이지 기초 HTML배우기</h3> HTML 기초<br> HTML 태그 작성법<br> HEAD에 들어가는 태그<br>   <h3>HTML, CSS, 자바스크립트 주석 처리 방법</h3> 주석 처리 방법<br> css란?<br>   <h3>스타일 적용 우선 순위와 important! </h3> css 스타일 적용 우선순위<br> class, id 선택자<br>

 

css

a:after{content: "(" attr(href) ")" ;} p:before{content: "Notice: " ;color:red;} h3{counter-increment: myIndex;} h3:before{content:counter(myIndex) "." ;}

 

▶실행 화면입니다~

웹사이트 주소와, notice, 1.2.3.이 모두 css로 생성한 내용입니다

 

 

 

 

 

 

  참조 : http://www.littlewebhut.com/css/value_counter/ 

           http://www.w3.org/TR/CSS2/generate.html#counters

 

counter-reset, counter-increment 속성 사용법

 

counter, counters사용법

 

css 선택자, 선택자 종류와 사용법

 

:first-child, :last-child 선택자

 

웹 개발자 도구 web developer toolbar 개관