CSS 강좌 /컨텐트 만들기 / content
.
content 속성은 선택한 요소의 내용 앞이나 뒤에 컨텐트를 붙입니다.
예를 들어 p 요소 내용 앞에 컨텐트를 넣으려면
p:before {
content: ***;
}
와 같이 하고, 뒤에 붙이려면
p:after {
content: ***;
}
와 같이 합니다.
content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다.
p:before {
content: "***";
}
이미지를 넣고 싶다면 다음과 같이 합니다.
p:before {
content: url( "path/abc.png" );
}
선택한 요소의 속성값을 출력할 수도 있습니다. 예를 들어 p 요소의 class 값을 나타내려면 다음과 같이 합니다.
p:before {
content: attr( class );
}
다음은 위 세가지를 한 페이지에 담은 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | content</title>
<style>
h1.st:before {
content: "String ";
color: red;
}
h1.ur:before {
content: url( "jb_dot.png" );
margin-right: 10px;
}
h1.at:before {
content: attr( class );
margin-right: 10px;
}
</style>
</head>
<body>
<h1 class="st">Seoul</h1>
<h1 class="ur">Pusan</h1>
<h1 class="at">Daeku</h1>
</body>
</html>
위 소스 결과값은 아래와 같습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS 강좌 ] 박스 모델(Box Model) 구현하기 (0) | 2017.12.22 |
|---|---|
| [CSS 강좌 ] 폰트속성 ( font-family) (0) | 2017.12.13 |
| [CSS 강좌] Table 표 만들 때 사용하는 태그 (0) | 2017.12.11 |
| [CSS 강좌] 링크 꾸미기 (0) | 2017.12.08 |
| [CSS 강좌 ] 목록 꾸미기 ( list-style-type ) (0) | 2017.12.07 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.