1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기
CSS에서는 방금 전 의사 클래스(pseudo-class)와
더불어 의사 요소(pseudo-element)를 이용하여 선택자를 구성하고 CSS 규칙을 만들어서 스타일을 적용할 수 있는 기능을 제공합니다.
만일 여러분이 첫 번째 문자, 혹은 첫 라인에 스타일을 적용하고자 할 경우 span 요소를 이용하지 않고 문제를 해결할 수 있을까요?
여러분은 “first-letter”, “first-line” 와 같은 의사 요소(pseudo-element)를 이용하여 이와 같은 작업을 수행할 수 있으며 다음과 같은 형식 사용합니다.
HTML 요소이름::pseudo-element이름 { property:value; property:value; …}
위와 같이 HTML 요소이름 다음에 2개의 콜론(::)이 공백없이 사용됩니다. 그리고 그 뒤를 이어 의사 요소(pseudo-element) 이름이 오는 형태로 사용하게 되는데 CSS2 같은 경우는 하나의 콜론(:)을 사용할 수도 있습니다. 여러분은 다음과 같이 4 가지 의사 요소(pseudo-element)를 사용할 수 있습니다.
|
pseudo element |
설명 |
|
first-line |
첫 라인을 나타냄 |
|
first-letter |
첫 문자를 나타냄 |
|
before |
해당 요소의 앞에 새로운 내용(content)를 추가할 때 사용 |
|
after |
해당 요소의 다음에 새로운 내용(content)를 추가할 때 사용 |
이제 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>pseudo-element를 이용한
선택자 예제</title>
<style>
</style>
</head>
<body>
<p>여러분은 조금 전 웹 페이지에 어떻게 CSS 코드를 이용하여
스타일을 적용할 수 있는지에 대해서 3 가지 방법을 배웠습니다.
웹 사이트를 만들다 보면 다수의 스타일을 적용하게 되며 3 가지
방법을 혼합하여 상황에 따라 사용하게 됩니다.</p>
</body>
</html>
위와 같이 작성한 후 “pseudoelementEx.html”로 저장한 후 IE9를 통해 보면 다음과 같이 나타납니다.
위의 결과에 대해서 첫 라인(first-line)에
스타일을 적용해 볼까요?
<style>
p::first-line {color:#ff0000;}
</style>
위와 같이 첫 라인의 글꼴 색상을 빨간색(red혹은
#ff0000)으로 적용되도록 설정하고 저장합니다. 그 다음 IE9를 통해 확인하면 다음과 같이 첫 라인의 글꼴 색상이 빨간색으로 나타나게 됩니다.
여러분이 실행한 결과는 위의 결과와 다소 다를 수 있습니다. 왜냐하면
위의 출력결과는 웹 브라우저의 크기를 작게 해서 출력한 결과이기 때문에 풀 화면으로 보게되면 한 라인은 위의 결과에서 보는 것처럼 “여러분 … 이용하여”까지가
아닌 “여러분 … 스타일을 적용하게” 그 이상까지를 한 라인으로 화면에 나타낼 수 있기 때문입니다.
다음으로 first-letter에 대해서 알아볼까요? 다음과 같이 <style>…</style> 블록
내부에 기존 코드를 주석(//) 처리하고 first-letter 관련
코드를 추가하고 저장합니다.
<style>
//p::first-line {color:#ff0000;}
p::first-letter {color:#ff0000;}
</style>
위와 같이 첫 문자에 대해서 글꼴 색상을 빨간색(red 혹은 #ff0000)으로 적용되도록 설정하였습니다. IE9를 통해 확인하면
다음과 같이 첫 문자인 ‘여’에 대해서 빨간색으로 나타냅니다.
다음으로 before에 대해서 알아봅니다. before와 after는 요소의 앞, 뒤에 내용(content)를 추가하는데 유용한 의사 요소(pseudo element)로 보통 CSS의 content 속성과 함께 사용하며 문자열, 이미지를 2 가지 형태를 예로 들면 다음과 같은 형식을 취하게 됩니다.
문자열을 추가할
경우
p::before {content: "문자열";}
p.bye::after {content: "문자열";}
이미지를 추가할
경우
p::before {content: url(‘추가할 이미지의 로컬주소’);}
p.bye::after {content: url(‘추가할 이미지가 있는 URL 주소’);}
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>pseudo-element를 이용한 선택자 예제2</title>
<style>
</style>
</head>
<body>
<p class="bye">여러분 오늘도 강의듣느라 수고가 많았습니다.</p>
</body>
</html>단순히 클래스이름이 “bye”인 p 요소를 이용하여 “여러분 ~ “ 하나의 문장을 출력하는 형태입니다. 이를 “pseudo_ele_beforeAfter.html”으로 저장한 후 IE9을 통해 보면 다음과 같습니다.
이제 before와
after를 이용하여 문자열을 추가할 경우에 대해서 알아볼까요?
before를 이용해서는 여러분 앞에 “안녕! “ 이라는
문자열을, after를 이용해서는 “다음 강의여행 때 만납시다.”라는 문자열이 추가되어 나타나도록 <style>…</style>
블록 안에 다음과 같이 코드를 작성합니다.
<style>
p.bye::before {content: "안녕! "; color:blue;}
.bye::after {content: "다음 강의여행 때 만납시다."; background-color: yellow;
border-style: dashed; border-width: 1px; };
</style>before를 이용한 첫
번째 코드는 “안녕”이라는 문자열을 p 요소가 앞에 파란색 글꼴 색상을 이용하여 삽입합니다. 다음으로 after를 이용하여 “다음 강의여행 때 만납시다.”라는 문자열을 p 요소가 출력된 다음에 나타내도록 하는데 해당 문자열이
포함된 사각형 형태의 영역의 배경 색상(background-color)을 노란색, 경계선(border-style)의 형태를 대시기호(-)의 형태로 나타내고 마지막으로 경계선의 두께(border-width)를 1 픽셀(pixel)로 나타내도록 합니다.
저장한 후 IE9를 통해 확인해보면 다음과 같이 스타일이 적용되어 나타납니다.
다음으로 이미지를 추가할 경우에 대해서 알아봅니다. 여기서
사용되는 이미지의 전체 URL 주소는 “'http://upload.wikimedia.org/wikipedia/commons/9/90/Crystal_Clear_app_gadu.png”
입니다. 그리고 다운로드받은 동일한 이미지는 “해님.png”로 저장했습니다. 참고로 이렇게 좋은 아이콘을 공개한 브라질의
디자이너이자 일러스트레이터인 “Everaldo Coelho”에게 지면을 빌어 감사의 말을 전합니다.
이제 기존의 <style>…</style>
블록 안의 모든 코드를 주석 처리하거나 삭제한 후 다음과 같이 코드를 작성합니다.
<style>
p.bye:before {content: url('해님.png'); margin-right: .2em;}
.bye:after { content: url('http://upload.wikimedia.org/wikipedia/commons/9/90/Crystal_Clear_app_gadu.png'); margin-left: .2em;}
</style>
위와 같이 로컬에 있는 이미지를 p 요소 앞(before)에 추가하거나 외부 웹사이트에 있는 이미지를 p 요소
뒤(after)에 추가하는 코드로 margin-right는
오른쪽 여백을 현재 크기의 0.2em으로 하였습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.7.2 자식(Child) combinator (0) | 2013.08.01 |
|---|---|
| 1.7 combinator를 이용한 선택자 구성과 규칙 만들기 (0) | 2013.08.01 |
| 1.5.6 부정(negation) pseudo-class (1) | 2013.08.01 |
| only-child, only-of-type, empty (0) | 2013.08.01 |
| first-child, last-child, first-of-type, last-of-type (0) | 2013.08.01 |
