1. 글자색 color
글자색을 지정하는 방법에는 16진수, rgb, hsl, 색상이름이 있다.
① 16진수
#000000(검은색)부터 #ffffff(흰색)까지 표현할 수 있다.
앞에서부터 두 자리씩 빨간색, 초록색, 파란색의 양을 의미한다.
② rgb
red, green, blue의 줄임말로 빨간색, 초록색, 파란색의 양을 의미한다. (0~255)
rgba를 사용하면 a로 불투명도를 지정할 수 있다. (0에 가까울수록 투명, 1에 가까울수록 불투명)
③ hsl
hue, saturation, lightness의 줄임말로 색상, 채도, 명도를 의미한다.
hsla를 사용하면 a로 불투명도를 지정할 수 있다.
④ 색상이름
white, black, red, pink, skyblue와 같이 색상의 이름을 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>다양한 방법으로 글자색 지정하기</title>
<style>
h1 {color:#0000ff;} /*16진수*/
p {color:skyblue;} /*색상이름*/
.accent {color:hsla(0,100%,50%,0.8);}
.accent2 {color:rgb(141, 227, 160);}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="accent2">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
2. 텍스트 정렬 text-align
- text-align의 속성 -
start 시작 위치에 맞춰 정렬
end 끝 위치에 맞춰 정렬
left 왼쪽 정렬
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 정렬
match-parent 부모 요소 따라 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 정렬하기</title>
<style>
.center {text-align:center;}
.justify {text-align:justify;}
.right {text-align:right;}
</style>
</head>
<body>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p class="center">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p class="justify">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p class="right">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
</body>
</html>
3. 줄 간격 line-height
여러 줄 사이의 간격을 조절하는 속성
정확한 크기를 지정, 글자 크기 기준으로 몇 배수로 지정, 백분율로 지정하는 방법이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>줄 간격 지정하기</title>
<style>
.basic {font-size:15px;}
.small {font-size:15px; line-height:0.7;} /*줄간격이 글자크기의 0.7배*/
.big {font-size:15px; line-height:3.0;} /*줄간격이 글자크기의 3배*/
</style>
</head>
<body>
<p class="basic">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p class="small">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
<p class="big">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고 과육이 붉고 통통하다.</p>
</body>
</html>
line-height는 세로정렬을 할 때도 유용하다.
height의 속성값과 똑같이 지정하면 된다.
4. 텍스트의 줄 표시 text-decoration
밑줄, 윗줄, 취소선을 표시
<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> <!--취소선-->
5. 텍스트 그림자 효과 text-shadow
- text-shadow의 속성값 -
가로거리(필수) : 양수는 오른쪽, 음수는 왼쪽으로 그림자 생성
세로거리(필수) : 양수는 아래쪽, 음수는 위쪽으로 그림자 생성
번짐 정도 : 양수는 그림자가 크게, 음수는 그림자가 축소
색상 : 그림자 색 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트에 그림자 효과 추가</title>
<style>
.shadow1 {color:red; text-shadow:1px 1px black;}
.shadow2 {text-shadow:5px 5px 3px blue;}
.shadow3 {color:#fff; text-shadow: 7px -7px 20px #000;}
</style>
</head>
<body>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">CSS</h1>
<h1 class="shadow3">자바스크립트</h1>>
</body>
</html>
6. 글자 간격 조절 letter-spacing, word-spacing
px, em의 단위나 %로 크기를 글자 간격 조절
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글자 간격 조절하기</title>
<style>
.spacing1 {letter-spacing:0.2em;}
.spacing2 {letter-spacing:0.5em;}
.spacing3 {word-spacing:1em;} /*단어 사이 간격 조절*/
</style>
</head>
<body>
<h1>CSS</h1>
<h1 class="spacing1">CSS</h1>
<h1 class="spacing2">CSS</h1>
<h1 class="spacing3">Tomorrow is the day I go to work.</h1>
</body>
</html>
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 표 스타일 (2) | 2022.11.12 |
|---|---|
| 목록 스타일 (0) | 2022.11.12 |
| 구글 폰트 사용하기 (0) | 2022.11.11 |
| 글꼴 관련 스타일 (0) | 2022.11.10 |
| CSS 기본 선택자 (2) | 2022.11.10 |