글자 관련 속성들을 지정.
font-style: 글자 기울기를 지정
font-weight: 글자 두께를 지정
font-size: 글자 크기 지정
line-height: 줄 높이 지정
font-family: 글꼴 지정
font-style
글자 스타일(기울기)을 지정.
normal 스타일 없음 (기본값)
italic 이탤릭체
oblique 기울어진 글자
font-weight
글자 두께를 지정.
normal 기본 글자 두께, 400과 동일 (기본값)
bold 두꺼운 글자, 700과 동일
bolder 부모 요소보다 더 두껍게
lighter 부모 요소보다 더 얇게
숫자 100 ~ 900 까지의 100단위 숫자 9개 두께가 좀 더 다양한 글꼴들을 위한 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background: orange;
width: 300px;
font-weight: lighter;
/* bolder는 부모 보다 더 굵어진다. / lighter는 부모 보다 더 얇아진다.*/
/* 폰트 제작자가 400~700 까지만 크기를 만들었으면 900의 굵기 설정은 적용되지 않는다. */
}
</style>
</head>
<body>
<h1>hello!!</h1>
</body>
</html>
font-size
글자 크기를 지정.
단위 px, em 등 단위로 지정 (기본값 16px)
% 부모 요소의 비율로 지정
line-height
줄 높이를 지정.
normal 브라우저의 기본 정의를 사용 (1 ~ 1.4)
숫자 요소 자체 글꼴 크기의 배수로 지정
단위 px, em 등 단위로 지정
% 요소 자체 글꼴 크기의 비율로 지정
text-align
문자 정렬 방식을 지정.
left 왼쪽 정렬 (기본값)
right 오른쪽 정렬
center 중앙 정렬
justify 양쪽 정렬 (2줄 이상일 경우만 작동)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background: orange;
width: 300px;
font-weight: lighter;
/* bolder는 부모 보다 더 굵어진다. / lighter는 부모 보다 더 얇아진다.*/
/* 폰트 제작자가 400~700 까지만 크기를 만들었으면 900의 굵기 설정은 적용되지 않는다. */
}
p{
font-size: 24px;
line-height: 1.3;
/* 배율로 설정 가능 1= font-size의 설정 값 가독성 1.2~1.6 */
border: 2px solid #000;
padding: 5px;
text-align:justify;
/* 한줄 텍스트에서는 적용 되지 않는다. */
}
</style>
</head>
<body>
<h1>hello!!</h1>
<p>
법관은 헌법과 법률에 의하여 그 양심에 따라 독립하여 심판한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다.
대법원장과 대법관이 아닌 법관의 임기는 10년으로 하며, 법률이 정하는 바에 의하여 연임할 수 있다. 대법원은 법률에 저촉되지 아니하는 범위안에서 소송에 관한 절차, 법원의 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.
</p>
</body>
</html>
text-decoration
문자의 장식을 지정.
none 선 없음. (기본값)
underline 밑줄을 지정
overline 윗줄을 지정
line-through 문자를 가로지르는 선을 지정.
<style>
h1{
background: orange;
width: 300px;
font-weight: lighter;
/* bolder는 부모 보다 더 굵어진다. / lighter는 부모 보다 더 얇아진다.*/
/* 폰트 제작자가 400~700 까지만 크기를 만들었으면 900의 굵기 설정은 적용되지 않는다. */
text-decoration: line-through;
}
p{
font-size: 24px;
line-height: 1.3;
/* 배율로 설정 가능 1= font-size의 설정 값 가독성 1.2~1.6 */
border: 2px solid #000;
padding: 5px;
text-align:justify;
/* 한줄 텍스트에서는 적용 되지 않는다. */
}
</style>
text-indent
문자의 들여쓰기를 지정.
- 음수값을 사용하면 내어쓰기가 됩니다.
단위 px, em, % 등 단위로 지정
ex)
text-indent: 10px ;
text-indent: -20px ;
letter-spacing, word-spacing
letter-spacing : 글자사이의 간격을 지정.
word-spacing : 단어사이의 간격을 지정.
단위 px, em, % 등 단위로 지정
'CSS입문' 카테고리의 다른 글
| CSS_font(family)_22.04.11(mon) (0) | 2022.04.11 |
|---|---|
| CSS_font(color)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_BOX속성(overflow)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_BOX속성(box-sizing,display,opacity)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_연습문제2_22.04.11(mon) (0) | 2022.04.11 |