고정 헤더 영역
상세 컨텐츠
본문
CSS가 제공하는 다양한 텍스트 속성을 알아보자.
대표적인 text속성은 아래와 같다.
1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-align
6. text-decoration
7. text-transform
color 속성
color 속성은 텍스트의 색상을 설정합니다.
<body>태그에 명시된 color속성값은 웹 페이지 내의 모든 텍스트 요소에 적용된다.
(요소별로 명시된 color속성값이 있다면, 해당 속성값이 <body>태그에 명시된 속성값보다 우선시됨.)
<style>
body { color: deepskyblue; }
p { color: deeppink; }
</style>
</head>
<body>
<h1>color 속성을 이용한 텍스트의 색상 설정</h1>
<p>각 요소별로 따로 명시된 color 속성값은 body 태그에 명시된 속성값보다 우선 적용됩니다.</p>
</body>
direction 속성
일반적으로 텍스트는 왼쪽에서 오른쪽으로 써지기 때문에 direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써집니다.
<style>
.rightToLeft { direction: rtl; }
</style>
</head>
<body>
<h1>direction 속성을 이용한 텍스트 방향 설정</h1>
<p>기본적으로 텍스트가 써지는 방향은 왼쪽에서 오른쪽입니다~</p>
<p>객체 지향 프로그래밍!!!</p>
<p class="rightToLeft">برمجة كائنية التوجه!!!</p>
</body>
letter-spacing
글자 사이의 간격 설정
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>
</head>
<body>
<h1>letter-spacing 속성을 이용한 글자 간격 설정</h1>
<p class="decLetterSpacing">글자 간격을 줄여봅시다!</p>
<p>기본적인 글자 간격은 이 정도입니다.</p>
<p class="incLetterSpacing">글자 간격을 늘려봅시다!</p>
</body>
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>
</head>
<body>
<h1>word-spacing 속성을 이용한 단어 간격 설정</h1>
<p class="decWordSpacing">단어 간격을 줄여봅시다!</p>
<p>기본적인 단어들의 간격은 이 정도입니다.</p>
<p class="incWordSpacing">단어 간격을 늘려봅시다!</p>
</body>
text-align
텍스트늬 수평방향 정렬을 설정합니다.
(text-direction 속성과는 상관없이 우선적으로 적용됩니다.)
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>
</head>
<body>
<h1>text-align 속성을 이용한 수평 정렬</h1>
<h2>텍스트의 왼쪽 정렬입니다.</h2>
<h3>텍스트의 오른쪽 정렬입니다.</h3>
<h4>텍스트의 가운데 정렬입니다.</h4>
</body>
text-decoration
텍스트에 여러가지 효과를 설정하거나 제거하는데 사용합니다.
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>
</head>
<body>
<h1>text-decoration 속성을 이용한 텍스트의 효과 설정</h1>
<h2>텍스트에 윗줄을 만듭니다.</h2>
<h3>텍스트를 통과하는 가운데 줄을 만듭니다.</h3>
<h4>텍스트에 밑줄을 만듭니다.</h4>
<a href="#"><p>링크에 생기는 밑줄을 제거합니다!</p></a>
</body>
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>
</head>
<body>
<h1>text-transform 속성을 이용한 대소문자 설정</h1>
<h2>텍스트의 모든 영문자를 대문자(upper case)로 만듭니다.</h2>
<h3>텍스트의 모든 영문자를 소문자(LOWER CASE)로 만듭니다.</h3>
<h4>텍스트의 모든 영단어의 첫 문자(first character)만을 대문자(upper case)로 만듭니다.</h4>
</body>
반응형
'WEB-Front end > *CSS' 카테고리의 다른 글
| [CSS] 여백(margin)속성 (0) | 2023.04.21 |
|---|---|
| [CSS] CSS font-size에 대해서 알아보자. (0) | 2023.04.20 |
| [CSS] CSS 배경 (0) | 2023.04.20 |
| [CSS] CSS색상 (0) | 2023.04.20 |
| [CSS] CSS 선택자 (0) | 2022.11.10 |
댓글 영역