css 텍스트 프로퍼티로 텍스트 꾸미기

네 안녕하세요, 이번 포스팅에서는 css를 이용하여 텍스트를 꾸며보는 시간을 가져보려 합니다.

우리가 사실 웹에서 가장 많이 보는 건 글입니다.

그래서 글에 특정한 꾸밈을 넣어주는 건 의외로 중요한 기능들을 합니다.

예를 들어 밑줄이라던지, 하이라이팅이라던지, 삭제를 위한 수평선 등이 있죠.

그래서 이번 시간에는 텍스트를 어떻게 꾸미는지 알아보도록 하겠습니다.

그럼 지금부터 같이 보시죠.

1. 텍스트 관련 프로퍼티 : text-indent, text-align, text-decoration

css에서 텍스트를 꾸밀 때 역시 색깔을 다룰 때처럼 관련 프로퍼티들이 존재를 합니다.

크게 들여쓰기, 정렬하기, 그리고 꾸미기가 있습니다.

여기에서 들여쓰기와 정렬하기는 큰 틀에서 문단 또는 글 전체 단위로 조정을 해주는 기능을 하고,

꾸미기는 그 하나하나에 적용이 가능한 디테일한 부분 작업입니다.

그래서 큰 틀에서 작업이 이루어지느냐, 세미한 부분들을 작업하느냐에 대한 차이가 조금 있습니다.

아래에는 텍스트 관련 프로퍼티들을 어떻게 쓰는지 적어뒀습니다.

text-indent : <length>|<percentage>; // 들여쓰기
text-align ; left|right|center|justify; // 정렬하기
text-decoration : none|underline|overline|line-through; // 텍스트 꾸미기

이런 식으로 사용을 합니다.

들여 쓰기 부분을 먼저 보면, length는 글의 길이를 고정시키겠다는 뜻이고,

percentage는 텍스트 블록 전체에 대한 비율을 고려하여 들여 쓰기를 하겠다는 뜻입니다.

그래서 둘은 유동성의 유무에 차이가 있습니다.

그리고 정렬은 각각 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬입니다.

꾸미기는 보시는 바와 같이 없음, 밑줄, 윗줄, 중간 줄입니다.

그럼 간단한 예제를 통하여 같이 보시죠.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 꾸미기</title>
    <style>
    h3 { 
        text-align : right; /* 오른쪽 정렬 */
    }
    span { 
        text-decoration : line-through; /* 중간 줄 */
    }  
    strong { 
        text-decoration : overline; /* 윗줄 */
    }
    .p1 { 
        text-indent : 3em; /* 3 글자 들여쓰기 */
        text-align : justify; /* 양쪽 정렬 */
    } 
    .p2 {
        text-indent : 1em; /* 1 글자 들여쓰기 */ 
        text-align : center; /* 중앙 정렬 */
    }  
    </style>
</head>
<body>
    <h3>텍스트 꾸미기</h3>
    <hr>
        <p class="p1">HTML의 태그만으로 기존의
            워드 프로세서와 같이 들여쓰기, 정렬, 공백, 
            간격 등과 세밀한 <span>텍스트 제어</span>를
            할 수 없다. </p>
        <p class="p2">그러나,
            <strong>스타일 시트</strong>는 이를
             가능하게 한다. 들여쓰기, 정렬에 대해서
             알아본다</p>
        <p><a href="http://www.naver.com"
             style="text-decoration : none">
             밑줄이 없는 네이버 링크</a>
</body>
</html>

이렇게 한 번 간단하게 작성을 해봤습니다.

여기서 보면 em이라는 속성을 하나 썼는데, 이건 css에서 지정하는 단위입니다.

이건 다음에 배울 폰트를 다룰 때 같이 보도록 하겠습니다.

그럼 결과 화면을 같이 봅시다.

이렇게 각각의 태그에 css가 잘 적용이 된 것을 보실 수가 있습니다.

이렇게 함으로써 어떤 것이 수정이 되었으며,

어떤 것이 중요한 키워드이며,

어떤 것이 하이퍼텍스트인지 바로 알 수가 있습니다.

그렇기 때문에 텍스트 꾸미기 기능은 정말 중요한 기능을 합니다.

여기까지 css로 텍스트를 꾸미는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 css의 표준 단위에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 다시 한번 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 폰트 사용법에 대하여 알아보기 (0)	2023.03.13
css 표준 단위에 대하여 알아보기 (0)	2023.03.13
css 색 프로퍼티에 대하여 알아보기 (0)	2023.03.13
css로 색 꾸미는 방법에 대하여 알아보기 (0)	2023.03.13
css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css 텍스트 프로퍼티로 텍스트 꾸미기