1. 글꼴 관련 스타일
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 20px;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.accent {
font-size: 150%;
font-weight: 800;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<h1> 글꼴 관련 스타일 사용하기 </h1>
<p> 글꼴을 지정하는 <span class="accent"> font-family </span> </p>
<p class="italic"> 이탤릭체로 글자를 표시하는 font-style </p>
<p> 글자 크기를 지정하는 font-size </p>
<p> 글자 굵기를 지정하는 font-weight </p>
</body>| 속성 종류 | 설명 |
|---|---|
| font-family | 글꼴 종류를 지정한다. |
| font-size | 글자 크기를 지정한다. |
| font-style | 글자를 이탤릭체로 표시할지 지정한다. |
| font-weight | 글자의 굵기를 지정한다. |
2. 웹 폰트
- 웹 폰트 사용하기
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
p {
font-size: 60px;
font-weight: bold;
font-family: 'Nanum Pen Script', cursive;;
}
</style>
</head>
<body>
<h1> 웹 폰트 </h1>
<p> 구글 폰트 사용하여 웹 폰트 만들기 </p>
<p> Using Default Fonts </p>
</body>3. 텍스트 관련 스타일
1) 텍스트 스타일 속성
| 속성 종류 | 설명 |
|---|---|
| color | 글자색을 지정한다. |
| text-decoration | 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정한다. |
| text-transform | 텍스트 전체, 또는 첫 글자를 대문자로 표시한다. |
| text-shadow | 텍스트에 그림자를 추가한다. |
| letter-spacing | 글자 사이의 간격을 지정한다. |
| word-spacing | 단어 사이의 간격을 지정한다. |
| text-align | 텍스트 정렬 방법을 지정한다. |
| line-height | 줄 간격을 조절한다. |
2) 웹에서 색상을 지정하는 방법
| 속성 종류 | 설명 |
|---|---|
| 16진수 | 빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현한다. |
| rgb | 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 표현한다. |
| rgba | rgb 형식에 불투명도를 함께 표현한다. |
| hsl | 색상, 채도, 명도의 값으로 색상을 표현한다. |
| hsla | hsl 형식에 불투명도를 함께 표현한다. |
| 색상 이름 | red, yellow, blue 와 같은 색상 이름을 사용한다. |
4. 목록 스타일
1) list-style-type 속성 : 불릿 모양과 번호 스타일을 지정한다.
| 속성 종류 | 설명 |
|---|---|
| disc | 채운 원 모양이다. |
| circle | 빈 원 모양이다. |
| square | 채운 사각형 모양이다. |
| decimal | 1부터 시작하는 10진수이다. |
| decimal-leading-zero | 앞에 0이 뭍는 10진수이다. |
| lower-roman | 로마 숫자 소문자이다. |
| upper-roman | 로마 숫자 대문자이다. |
| lower-alpha / lower-latin | 알파벳 소문자이다. |
| upper-alpha / upper-latin | 알파벳 대문자이다. |
| none | 불릿이나 숫자를 없앤다. |
2) list-style-image 속성 : 불릿 대신 이미지를 사용한다.
3) list-style-position 속성 : 목록을 들여 쓴다.
| 속성 종류 | 설명 |
|---|---|
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여쓴다. |
| outside | 기본값 |
4) list-style 속성 : 목록 속성을 한꺼번에 표시한다.
5. 표 스타일
1) caption-side 속성 : 표 제목의 위치를 정해준다.
- 기본적으로 표 위쪽에 표시되지만 bottom 아래쪽으로 옮길 수 있다.
2) border 속성 : 표에 테두리를 그려준다.
3) border-spcing 속성 : 셀 사이의 여백을 지정한다.
- 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데 만약 두 값이 같다면 1개만 지정해도 된다.
4) border-collapse 속성 : 표와 셀의 테두리를 합쳐준다.
| 속성 종류 | 설명 |
|---|---|
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시한다. |
| separate | 표와 셀의 테두리를 따로 표시한다. (기본값) |
