텍스트 꾸미기

span 태그

텍스트는 태그가 아니라 컨텐트이기 때문에 텍스트를 꾸며주기 위해서는 텍스트를 감싸는 태그가 필요하다. 줄바꿈 없이 일부 텍스트를 꾸며주기 위해서는 꾸미려는 텍스트를 <span> 태그로 감싸고 여기에 효과를 준다.

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        할지라도 그들의 관현악이며, 사는가 있음으로써 <span style="color:red">생명</span>을 힘있다.
    </body>
</html>

색

텍스트에 컬러를 부여할 때는 color 효과를 사용한다. CSS에서는 색상을 지정하는 3가지 방법이 있는데 아래와 같다.

Hex	16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB	붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명	red, blue, green등 칼러코드 참고

example2.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <style>
            #hex {
                color: #FF0000;
            }
            #rgb {
                color: RGB(255,0,0);
            }
            #name {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="hex">
            hex (color:#ff0000)
        </div>
        <div id="rgb">
            RGB (color:RGB(255,0,0))
        </div>
        <div id="name">
            Color Name (color:red)
        </div>
    </body>
</html>

정렬

텍스트를 정렬하기 위해서는 정렬하고자 하는 텍스트를 태그로 감싸고 이 태그에 text-align 효과를 지정한다. CSS에서는 4가지 형태의 정렬방식을 지원한다.

left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 정렬, 텍스트 간의 간격을 조정해서 행의 간격을 일치시킴

example3.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <style>
            div {
                margin: 30px;
                width: 500px;
            }
            #left {
                text-align: left;
            }
            #right {
                text-align: right;
            }
            #justify {
                text-align: justify;
            }
            #center {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="left">
            할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
            <br />
            공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
            <br />
            용감하고 만물은 그들의 이것이다.
            <br />
            무엇을 날카로우나 꽃이 어디 뿐이다.
            <br />
            꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
            <br />
            대한 사람은 그들은 인간이 있는가?
            <br />
            발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
            <br />
        </div>
        <div id="right">
            할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
            <br />
            공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
            <br />
            용감하고 만물은 그들의 이것이다.
            <br />
            무엇을 날카로우나 꽃이 어디 뿐이다.
            <br />
            꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
            <br />
            대한 사람은 그들은 인간이 있는가?
            <br />
            발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
            <br />
        </div>
        <div id="center">
            할지라도 그들의 관현악이며, 사는가 있음으로써 생명을
            <br />
            공자는 옷을 놀이 보이는 그림자는 평화스러운 열매를 품으며
            <br />
            용감하고 만물은 그들의 이것이다.
            <br />
            무엇을 날카로우나 꽃이 어디 뿐이다.
            <br />
            꽃이 웅대한 되려니와, 끓는 피가 만물은 있는 하는 듣는다.
            <br />
            대한 사람은 그들은 인간이 있는가?
            <br />
            발휘하기 구하지 웅대한 오아이스도 피어나기 무한한 불어
            <br />
        </div>
        <div id="justify">
            바도 급하고 꾀꼬리 김첨지는 하여간 전에 같이 몰랐다. 자기를 흐리고 없이 말은들었었는데. 왈칵 무시무시한 움푹한 옷도 하나 기다리고 예끼 돈을 대었다. 상판을딱딱 없으니, 그 멈춘 다니는 메이었다. 하고 달려들며 내기를 눈길을 같이 대한 벌었단 슬근슬근 높아졌다. 왜 가락이 바다 하고 제 언땅에 아니로되, 정거장까지 듯하였다. 만일 하고 남대문 정거장에서 꼬리를 붙었어, 정말 모르리라. 붙은 궂은 흘릴 알아 어찌할 울렸다. 염려를 전을 자식뻘밖에 문을 전이 살려준 모르리라. 운수가 그 빌어든 나를 걱정을 구워지는 남을 듯싶다. 너비아니 김첨지를 발길은 벌써 하고 치삼이와 하였다.
        </div>
    </body>
</html>