반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글꼴 관련 스타일</title>
<style>
/*
글자 색을 지정하는 color 속성
기본형 color: <색상>
색상값은 16진수, rgb (또는 rgba), hsl (또는 hsla), 색상 이름
16진수 - #RRGGBB RR - 빨간색 / GG - 초록색 / BB - 파란색
ex) #ffff00
rgb - red, green, blue
ex) rgb(0, 0, 255)
rgba - alpha(불투명도) 추가
ex) rgba(0, 0, 255, 0.5)
hsl - hue(색상), saturation(채도), lightness(명도)의 줄임말
ex) hsl(0, 100%, 50%)
hsla - alpha(불투명도) 추가
ex) hsla(0, 100%, 50%, 0.5)
*/
body {
color: #f41800;
}
p {
color: rgb(23, 238, 238);
}
/*
텍스트를 정렬하는 text-align 속성
기본형 - text-align: start | end | left | right | center | justify | match-parent
start - 텍스트 시작 위치에 맞춰
end - 텍스트 줄의 끝에 맞춰
left - 왼쪽에 맞춰
right - 오른쪽에 맞춰
center - 가운데에 맞춰
justify - 양쪽에 맞춰
match-parent - 부모 요소를 따라서
*/
.center {
text-align: center;
}
.justify {
text-align: justify;
}
/*
줄 간격을 조절하는 line-height 속성
기본형 - line-height: <줄 간격>
줄 간격 - 글자 크기, 배수, 백분율 값을 사용
*/
.small-line {
line-height: 0.7;
}
.big-line {
line-height: 2.5;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<hr>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p class="center">레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="justify">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<hr>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="small-line">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p class="big-line">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 position (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |
| CSS - 1일차 폰트(텍스트꾸미기, 대소문자변환, 글간격) (0) | 2023.05.10 |
| CSS 1일차 - 폰트(글꼴, 크기) (0) | 2023.05.10 |