7.7 Text Decoration
텍스트에 효과를 주는 방법은 현재 정의된 명세에는 크게 선을 긋는 형태인 text-decoration 속성과 텍스트를 강조하는데 사용하는
text-emphasis 속성 그리고 텍스트에 그림자 효과를 주는 text-shadow 속성이
있습니다. 첫 번째 text-decoration은 또 세부적으로
들어가면 선의 색상이나 실선인지 점선인지 등을 설정하는 세부 속성들로 구분할 있는데 현재는 선을 긋는 형태만을 대부분에 브라우저에서 지원합니다.
다음으로 텍스트를 강조하는데 사용하는 text-emphasis 속성은 특정한 경우(Webkit 이용)을 제외하고는 지원이 되지 않으므로 여기서는 생략합니다. 마지막으로 텍스트에 그림자 효과(Shadow Effect)를 주는
방법에 대해서 소개합니다.
7.7.1 text-decoration 속성을 이용한 선 긋기
text-decoration
속성은 텍스트에 밑줄을 긋거나 선의 색을 설정할 수도 있고 실선 형태로 할지 아니면 점선으로
할 지를 설정할 수 있는 속성으로 다음과 같은 형식을 사용합니다.
selector
{ text-decoration: text-decoration-line
[ text-decoration-color text-decoration-style] }
즉, text-decoration 속성은 위에 명시된 형식대로 속성값으로 텍스트에 선을 긋는데 사용되는 text-decoration-line 속성 다음으로
선의 색을 설정하는 text-decoration-color 속성, 마지막으로
점선인지 실선인지 등을 설정하는 속성인 text-decoration-style 속성값이 하나 혹은 3가지 속성 모두가 올 수 있도록 정의되어 있습니다.
현재 대부분의 브라우저에서는 선을 긋는 속성을 설정하는 text-decoration-line 속성에
대해서 적용이 가능하여 속성값은 각각 밑줄(underline), 텍스트를 통과하여 선을 긋는 line-through 그리고 텍스트의 위에 선을 긋는 overline 값이
실제로 동작하는 속성값입니다.
이제 예제를 해봅니다. 메모장을 열어서 기본적인 코드를 작성하고 다음과 같이 해당 부분에
코드를 작성합니다.
…
<style>
p#underline{text-decoration:underline;}
p#line-through{text-decoration:line-through;}
p#overline{text-decoration:overline;}
</style>
</head>
<body>
<p
id="underline">CSS3</p>
<p
id="line-through">CSS3</p>
<p
id="overline">CSS3</p>
</body>
</html>
“text-decorationEx.html”로 저장하고 브라우저를 통해 보면 다음과 같이 각각 설정한대 텍스트에 밑, 중간, 위에 선을 그어 나타냅니다.
7.7.2 text-shadow 속성을 이용한 그림자 효과주기
text-shadow
속성은 텍스트에 효과를 주는데 있어서 가장 인기있는 속성 중의 하나로 텍스트에 그림자 효과를
줄 수 있으며 다음과 같은 형식을 사용합니다.
selector { text-shadow : horizontal length Vertical Length Blur Radius shadow color }
위와 같이 텍스트에 적용할 그림자는 x축을 나타나는 수평 거리(horizontal length), y축을 나타내는 수직거리(Vertical Length) 그리고 흐리게 칠할 반지름(Blur Radius)을 px 단위로 나타내고 마지막으로 그림자 색상을 작성하면 됩니다. 간단하게 예제를 해볼까요? 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>text-shadow 예제</title>
<style>
h1{text-shadow: 2px 2px 2px #00ff00}
</style>
</head>
<body>
<h1>웹(Web)
프로그래밍</h2>
</body>
</html>
h1 요소를 이용해서 “웹(Web) 프로그래밍”이라는 텍스트를 화면에 표시하는데 여기에 text-shadow 속성을 이용하여 x축을 기준으로 2px y축 기준으로 2px 그리고 흐리게 할 반경은 2px로 설정하고 그림자 색상을 연두색(00ff00)으로 설정합니다.
이제 “text-shadowEx.html”로 저장하고
Firefox를 이용해서 보면 다음과 같이 나타납니다.
위에서 그림자 색상을 나타낼 때 #16진수 형태로 나타낼 수도 있지만 red, green 처럼 기본 색상 키워드를 이용할 수도 있습니다. 그래서 위 코드에서 “text-shadow: 2px 2px 2px red” 형태로 바꾸고 저장 후 확인해보면 다음과 같이 그림자가 빨강색으로 나타나게 됩니다.
조금 더 나가볼까요? 다수의 그림자 효과를 주는 방법을 소개하면 다수의 그림자 효과를 텍스트에 주기 위해서 “text-shadowEx.html” 파일을 열어서 <style>…</style> 내부의 코드를 다음과 같이 수정합니다.
<style>
h1{text-shadow: 2px 2px 2px #ff0000,
4px 4px 4px #00ff00;
}
//h1{text-shadow:2px 2px 2px #00ff00}
</style>
위와 같이 첫 번째 그림자 효과는 x축 방향으로 2px, y축 방향으로 2px 그리고 흐리게 칠할 반경을 2px로 설정하고 마지막으로 빨강색(ff0000)으로 칠하도록 합니다.
두 번째 그림자 효과는 x축 방향으로 4px, y축
방향으로 4px 그리고 흐리게 칠할 반경을 4px로 설정하고
마지막으로 연두색(00ff00)으로 칠하도록 합니다.
이제 파일 메뉴에서 다른 이름으로 저장을 선택하여 “multi-text-shadow.html”로
저장하고 Firefox를 이용하여 연결하여 보면 “웹(Web) 프로그래밍” 텍스트에 대해서 다음과 같이 2중으로 그림자 효과를 나타냅니다.
이상으로 Text와 관련된 CSS3의 다양한 속성들에 대해서 알아보았습니다. 이외에도 웹 브라우저로 하여금 줄바꿈이 일어날 때 브라우저에 표시되는 텍스트가 보기 좋게 나타나도록 단어를
자르는 것을 허용하는 Hyphenation도 있지만 이 책에서는 해당 부분은 생략하였습니다.
현재 Text와 관련된 부분은 W3C에서 Draft 상태이므로 앞으로도 변동이 발생할 가능성이 높지만 기본적으로 어떻게 사용하는지에 대해서 알아둔다면
앞으로 변화되는 부분에 대해서도 그리 어렵지 않게 접근할 수 있을 것입니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8.1.4 background-attachment 속성 (0) | 2013.08.04 |
|---|---|
| 8. 배경(Background)과 경계(Border), 여백 (0) | 2013.08.04 |
| 7.6 text-indent 속성을 이용한 들여쓰기 (0) | 2013.08.04 |
| 7.5 문장 내 간격(Spacing) 처리하기 (0) | 2013.08.04 |
| 7.4 텍스트 정렬(Alignment)과 맞추기(Justification) (0) | 2013.08.04 |
