본문 바로가기
📁Web Developing/CSS 기초

II. 텍스트 - 3. 텍스트 관련 스타일

by Hush 2022. 6. 2.

color : 글자색

텍스트에서 글자색을 바꿀 때  color 속성을 사용한다.

사용할 수 있는 속성값은 16진수, rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름이다.

 

방식 예시
16진수 #000000, #ffffff
hsl / hsla 형식: hsl(색, 채도, 명도)
ex: hsl(0, 100%, 50%)
형식: hsla(색, 채도, 명도, 투명도)
ex: hsla(0, 100%, 50%, 0.5)
색상 이름 red, yellow, black
rgb/rgba rgb(0,0,255)
rgb(0,0,255,0.5)

 

text-align : 텍스트 정렬

텍스트를 정렬하는 속성이다. 속성값은 다음과 같다

종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
left  (기본) 왼쪽에 맞추어 문단을 정렬
right 오른쪽에 맞추어 문단을 정렬
center 가운데에 맞추어 문단을 정렬
justify 양쪽에 맞추어 문단을 정렬
match-parent 부모 요소를 따라 문단을 정렬

예시이다

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body style="text-align: center;">
        <h1>start</h1>
        <p style="text-align: start">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>end</h1>
        <p style="text-align: end">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>left</h1>
        <p style="text-align: left">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>right</h1>
        <p style="text-align: right">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>center</h1>
        <p style="text-align: center">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>justify</h1>
        <p style="text-align: justify">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
        <h1>match-parent</h1>
        <p style="text-align: match-parent">나에게 나무를 벨 한 시간을 준다면 그 중 45분을 도끼를 가는 데에 쓰겠다. 더 이상 상황을 바꿀 수 없을 때 우리는 스스로를 바꾸어야 하는 도전을 받는다.</p>
    </body>
</html>

예시 결과

 

line-height : 줄 간격 조절

줄 간격은 크깃값을 지정하거나, 글자를 기준으로 몇 배인지를 지정할 수 있다.

다음은 줄 간격을 24px로 설정하는 세 가지 방법이다.

p{font-size: 12px;line-height: 24px;}
p{font-size: 12px;line-height: 2.0;}
p{font-size: 12px;line-height: 200%;}

여러 줄로 된 텍스트의 줄간격을 조정할 때 뿐 아니라, 텍스트의 특정 영역 상에서의 수직위치를 결정하는 데에도 활용할 수 있다. 예를 들어 텍스트를 수직 정 가운데에 위치시키고 싶다면 height속성과 line-height속성의 속성값을 같은 수치로 설정하면 된다.

 

text-decoration : 텍스트의 줄을 표시하거나 없애기

밑줄을 긋거나 취소선을 그을 수 있는 속성이다.

그리고 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 이를 없앨 수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <h1>text-decoration</h1>
            <p style="text-decoration: none;">none</p>
            <p style="text-decoration: underline;">underline</p>
            <p style="text-decoration: overline;">overline</p>
            <p style="text-decoration: line-through">line through</p>
        </form>
    </body>
</html>

 

text-shadow : 그림자

text-shadow : none | <가로 거리> 세로 거리> <번짐 정도> <색상>

text-shadow속성값의 종류는 다음과 같다.

종류 설명
<가로 거리> 필수속성. 양수값은 글자의 오른쪽, 음숫값은 글자의 왼쪽.
<세로 거리> 필수 속성. 양수값은 글자의 아래쪽, 음수값은 글자의 위쪽.
<번짐 정도> 양수값을 사용하면 그림자가 모든 방향으로 퍼져 나가서 그림자가 크게 표시됨.
음수값은 반대로 그림자가 모든 방향으로 축소되어 보임.
기본값은 0.
<색상> 그림자 색상을 지정. 하나일 수도 있고 여러 색을 지정할 수도 있음.
기본값은 현재 글자색.		 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <h1 style="text-shadow: 5px 5px 7px #FF0000;">text-shadow</h1>
        </form>
    </body>
</html>

 

예제결과

 

text-transform : 텍스트의 대소 문자를 변환

텍스트의 대소 문자를 원하는 대로 바꿀 수도 있다. text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환한다.

전각 문자란 가로와 세로 길이 비율이 같은 글자를 의미한다.

이러한 속성들은 한글에는 영향을 미치지 않는다.

종류 설명
none 변환을 하지 않습니다.
capitalize 첫 번째 글자를 대문자로 변환합니다.
uppercase 모든 글자를 대문자로 변환합니다.
lowercase 모든 글자를 소문자로 변환합니다.
full-width 가능한 모든 문자를 전각 문자로 변환합니다. 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <p style="text-transform: none;">aAbBcC가나다</p>
            <p style="text-transform: capitalize;">aAbBcC가나다</p>
            <p style="text-transform: uppercase;">aAbBcC가나다</p>
            <p style="text-transform: lowercase;">aAbBcC가나다</p>
            <p style="text-transform: full-width;">aAbBcC가나다</p>
        </form>
    </body>
</html>

예제 결과

 

letter-spacing, word-spacing : 글자 간격을 조절

letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고,

word-spacing 속성은 단어와 단어 사이 간격을 조절하는데,

CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절한다.

이 두 가지 속성은 px, em과 같은 단위나 퍼센트로 크깃값을 조절한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <p style="letter-spacing: 0.2em;">aAbBcC가나다</p>
            <p style="letter-spacing: 2px;">aAbBcC가나다</p>
        </form>
    </body>
</html>

예제 결과

 

 

저작자표시 (새창열림)

'📁Web Developing > CSS 기초' 카테고리의 다른 글

II. 텍스트 - 5. 표 스타일  (0) 2022.06.03
II. 텍스트 - 4. 목록 스타일  (0) 2022.06.02
II. 텍스트 - 2. 웹 폰트 사용하기  (0) 2022.06.01
II. 텍스트 - 1. 글꼴 관련 스타일  (0) 2022.06.01
I. CCS의 기본 - 3. 캐스케이딩 스타일 시트  (0) 2022.06.01

관련글

댓글

티스토리툴바