고정 헤더 영역
상세 컨텐츠
본문
반응형
color 속성 - 글자 색 속성 - 글자 색
- 웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다.
color : <색상>
- 16진수나 rgb, hsl 또는 색상 이름으로 표기할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
h1 {color: rbg(0,200,0); }
h2 {color:blue;}
.accent {}
</style>
</head>
<body>
<h1>세계 10대 슈퍼푸드</h1>
<h2>마늘의 일해백리</h2>
<p>마늘 특유의 아린 맛은 알리신
<span class="accent">알리신</span>이라는 성분 때문으로
</p>
</body>
</html>
text-decoration 속성 - 텍스트에 줄 표시하기/없애기
- text-decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다.
text-decoration: none | underline | overline | line-through
속성
- none : 밑줄을 표시하지 않는다.
- underline : 밑줄을 표시한다.
- overline : 영역 위로 선을 그린다.
- line-through : 영역을 가로지르는 선(취소 선)을 그린다.
<html>
<head>
<meta chartset="utf-8">
<style>
p { line-height: e1.8; }
a { text-decoration: none; }
.edited { text-decoration: line-through; }
</style>
</head>
<body>
<p>다양한 기기로 인터넷에 접속할 수 있다.</p>
<span class="edited">위 아래 가로지르기</span>
<a href="https://www.naver.com" target="_blank">네이버</a>
</body>
</html>
text-transform 속성 - 텍스트 대·소문자 변환하기
- 영문자를 표기할 때 텍스트의 대·소문자를 원하는 대로 바꿀 수 있다. text-transform 속성은 텍스트를 대·소문자 또는 전각 문자로 변환한다.
text-transform: none | capitalize | uppercase | lowercase | full-width
속성
- none : 변환하지 않는다.
- capitalize : 시작하는 첫 번째 글자를 대문자로 변환한다.
- uppercase : 모든 글자를 대문자로 변환한다.
- lowercase : 모든 글자를 소문자로 변환한다.
- full-width : 가능한 모든 문자를 전각 문자로 변환한다.
<html>
<head>
<meta charset="utf-8">
<style>
.cap { text-transform: capitalize; }
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.full{ text-transform: full-width; }
</style>
</head>
<body>
<p class="cap">Hello World!!!</p>
<p class="upper">Hello World!!!</p>
<p class="lower">Hello World!!!</p>
<p class="full">Hello World!!!</p>
</body>
<html>
text-shadow 속성 : 텍스트에 그림자 효과 추가하기
- 텍스트에 그림자 효과를 줄 때 text-shadow 속성을 이용한다.
text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>
속성
- 가로 거리 : 텍스트로부터 그림자까지의 가로 거리를 입력한다.
- 세로 거리 : 텍스트로부터 그림자까지의 세로 거리를 입력한다.
- 번짐 정도 : 그림자는 번지는 정도를 나타낸다.
- 색상 : 그림자 색상을 지정한다.
letter-spacing과 word-spacing 속성 : 텍스트 간격 조절하기
- 텍스트 자간을 조절할 때 letter-spacing과 word-spacing 속성을 이용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.letter1 { letter-spacing: 0.2em; }
.letter2 { word-spacing: 0.5em; }
</style>
</head>
<body>
<p class="letter1">오늘도 좋은 하루를 보내셨나요? 좋은 밤 되세요.</p>
<p class="letter2">오늘도 좋은 하루를 보내셨나요? 좋은 밤 되세요.</p>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 문단 스타일 (2) (0) | 2021.04.21 |
|---|---|
| [CSS 기초] 문단 스타일 (1) (0) | 2021.04.20 |
| [CSS 기초] 글꼴 관련 스타일 (2) (0) | 2021.04.16 |
| [CSS 기초] 글꼴 관련 스타일 (1) (0) | 2021.04.15 |
| [CSS 기초] 주요 선택자 (0) | 2021.04.13 |
댓글 영역