CSS태그 설명_글자에 대한 속성태그 소개(Text)

웹프로그래밍 공부를 하면서 CSS는 프론트앤드에 있어 간편하면서도 중요한 역활을 한다는 것을 알게 되었습니다. 웹페이지의 디자인적인 요소도 중요하지만, 오늘은 많은 정보를 보여주고 안내해주는 글자효과에 대한 기능을 포스팅하고자 합니다.

가장 기본적이면서도 알아야할 글자에 관련된 CSS 속성 태그 10가지를 소개해드리도록 하겠습니다.

1. 텍스트에 색을 지정하고 싶을 때(color)     color:red;     color:#000000;     color:#000;

위에 있는 #으로 시작되는 부분은 글자색을 좀더 세밀하게 설정하고자 할때 사용하며, 6자리와 3자리의 차이 또한 세밀한 정도에 따라서 설정이 가능합니다. 첫번째 줄 부분에 단순히 red라는 색을 지정하고자 하였는데, red가 아닌 조금 더 연한 색을 지정하고 싶을때 사용하는 것이 2번째와 3번째 방법으로 사용을 합니다.

2. 텍스트 정렬을 하고자 할 때(text-align)     text-align:center;     text-align:left;     text-align:right;     text-align:justify;

 

center는 텍스트를 가운데 정렬하고 싶을때 사용하며 left, right 말그대로 왼쪽, 오른쪽 정렬을 하고자 할 때 사용합니다. justify는 텍스트를 해당 box안에 맞춰서 자동으로 정렬을 하고자 할 때 사용합니다.

3. 텍스트에 줄장식을 하고자 할 때(text-decoration)     text-decoration:none;     text-decoration:underline;     text-decoration:overline;     text-decoration:line-through;

none은 텍스트에 밑줄을 없앨때 사용하며, underline은 반대로 밑줄을 생성하고자 할 때 사용합니다. overline은 텍스트 위쪽에 줄을 생성할 때 사용하며 line-through는 텍스트 가운데에 밑줄을 생성하고자 할 때 사용합니다.

저같은 경우는 A태그에 많이 사용을 하긴 하는데, 대부분 reset할때 text-decoration:none을 많이 사용하곤 합니다.

4. 텍스트 대소문자 변환(text-transform)     text-transform:uppercase;     text-transform:lowercase;     text-transform:capitalize;

text-transform속성은 영어를 사용할 때 사용을 하며, 텍스트의 대소문자 변환을 해주는 속성입니다. uppercase는 영어텍스트를 전체 대문자로 변환하는 속성이며, lowercase는 영어텍스트 전체를 소문자로 변환합니다. 마지막으로 capitalize는 영어텍스트 앞부분만 대문자로 변환하는 속성입니다.

5. 텍스트 들여쓰기(text-indent)     text-indent:50px;

텍스트를 들여쓰고 할때 사용을 합니다. text-indent쓰고 속성값인 50px로 설정을 하면 50px 만큼 들여쓰기가 됩니다. 반대로 내어쓰기를 하고 싶다면 -50px로 설정하면 -50px 만큼 내어쓰기가 되는 것입니다.

6. 글자 사이 간격 설정(letter-spacing)     letter-spacing:3px;

글자 사이의 간격을 늘리고 싶을 때 사용을 합니다. 상단처럼 3px를 하게되면 글자 간격이 3px 만큼 떨어지게 됩니다. 반대로 -3px를 하게되면 -3px 만큼 글자간격이 줄어들게 됩니다.

7. 텍스트 라인 높이 설정(line-height)     letter-height:10px;

텍스트의 라인을 맞춰주기 위하여 사용하는 설정입니다. 10xp만큼 떨어트려주고 싶을 때 사용하며, 반대로 -10px를 하면 그만큼 올라가게 됩니다.

8. 텍스트 방향설정 (direction)     direction:rtl;     direction:ltl;

direction 속성은 텍스트만 정렬을 해주고 싶을 때 사용합니다. rtl은 텍스트만 오른쪽으로 정렬을 하고 싶을 때 사용합니다.

예를 들면 안녕하세요......!!! => ......!!!안녕하세요 이런식으로 바꿔줄때 사용을 합니다. 반대로 ltl은 왼쪽으로 설정할 때 사용하긴 하지만, 기본적으로 설정되어있는 내용입니다.

9. 단어 간격 (word-spacing)     word-spacing:10px;

letter-spacing 속성인 글자사이 간격과 많이 헷갈릴 수 있는데, 엄현히 다른 기능입니다.

letter-spacing 단어상관없이 텍스트 사이의 간격을 설정해주는 속성이고, word-spacing은 단순히 텍스트가 아닌 단어 사이 간격을 설정할 때 사용하는 속성입니다. 10px를 하게되면 단어사이 간격이 10px만큼 벌어지고, 반대로 -10px를 하게 되면 -10px만큼 줄어들게 됩니다.

10. 텍스트 그림자 설정 (text-shadow)      text-shadow:3px 2px blue; (좌 상 색상)

텍스트에 그림자를 설정하고 싶을때 text-shadow속성을 사용합니다. 속성값은 총 3가지로 설정을 할 수 있습니다.

text-shadow에서 첫번째 속성값은 좌측기준에서 얼마나 떨어뜨릴 것인지 두번째 속성값은 상단기준에서 얼마나 떨어뜨릴 것인지, 세번째 속성값은 그림자의 색상을 지정하는 값입니다.

이것 또한 -로 반대로 조절할 수 있는 부분입니다.

+보너스. 폰트 설정 (font)      font:bold 3px nanum;

추가적으로 많이 사용하는 font태그에 대해서 설명드리겠습니다.

폰트에 대한 속성을 사용하다보면 폰트 굵기를 설정하는 font-weight, 폰트의 크기를 설정하는 font-size, 폰트의 글자체를 설정하는 font-family 등 상단에 텍스트 속성에 대해 설명드린 내용 이외에도 많은 기능들이 있습니다. text와 비슷하게 많이 쓰이는 font 속성에 대해 설명을 드리겠습니다.

프로그래밍 공부를 하면서 많이 아는 것도 중요하지만, 많이 아는 만큼 동일한 내용의 태그는 최소화하여 코드길이를 최대한 줄이는 능력이 중요하다고 느껴졌습니다. 그렇기에 최대한 중복되는 코드도 줄이고, 왠만하면 한번에 쓸수있는 속성은 한번에 쓰게 노력을 하였습니다.

위에 보너스 설명에 드린 font 속성도 마찬가지입니다.

font-weight:bold;

font-size:3px;

font-family:nanum;

이렇게 해서 벌써 3줄의 코드를 입력을 하였습니다. 하지만, 여기서 한줄로 해결하는 방법이 있습니다.

font:bold 3px nanum;

이렇게 코드 한줄이면 끝나는 이야기입니다.

이 외에도 이렇게 쓸 수 있는 속성태그는 많이 있습니다. 처음부터 이런 것을 생각하는 것은 시간적으로 손해일 수도 있지만, 한번 코딩을 쉬지않고 한다음에 코딩한 내용을 한줄 한줄 되집어가면서 중복된 코드는 없는지, 코드내용을 줄일 수 있는 방법은 없는지에 대해서 생각을 하면서 되집어 본다면 분명 완성도 높은 좋은 코딩을 하실수 있을 것입니다.

오늘은 CSS태그의 속성 중 글자 태그(text)에 대해 사용할 수 있는 태그에 대하여 설명을 드렸습니다.

다음에는 어떤 기능을 들고올지는 잘 모르겠지만, 저도 공부하면서 앞으로 CSS에 대한 속성태그를 많이 올리도록하겠습니다.

긴 글 읽어주신 독자 여러분들에게 감사드리며, 글을 마무리 하도록하겠습니다. 공감은 저에게 큰 힘이 됩니다.