<font 제어>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html lang="en">
<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 {
/* 글꼴 설정, 한글로된 글꼴은 ""으로 감싸줌 font-style과 유사*/
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* 글자 크기, 16px이 기본 */
font-size: 16px;
/* 글가 굵기 */
font-weight: normal;
/* 글자 색깔 color 혹은 rgb(,,,) 사용 */
color: rgb(0, 0, 255);
/* 글 위치 정하기 */
text-align: left;
/* 글자와 글자 사이의 길이를 합한 길이, 줄끼리의 간격조절 */
line-height: 26px;
/* 글자 밑 중간 아래 줄 긋기. 줄 삭제도 가능 */
text-decoration: overline;
/* 글자와 글자의 간격 조절 */
letter-spacing: normal;
}
</style>
</head>
<body>
<h1>어이쿠</h1>
</body>
</html>
|
cs |
+ font-variant: <속성값>
ㅡ> 영문 텍스트를 크기가 작은 대무낮로 변경할 때 사용
<box모델 제어>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html lang="en">
<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>박스 모델 구성 속성 다루기</title>
<style>
.block-1 { /* block은 가로, 세로 제어가능한 박스 공간 의미*/
/* 테두리 밖의 공간크기 지정, margin 10px 20px 이렇게면
위아래 10, 양옆 20으로 적용, 3개 이상부터 시계방향순으로 적용
서로다른 글자의 margin끼리 겹칠 경우 더 큰쪽만 적용*/
margin: 10px;
}
.inline-1 { /* iline은 가로만 제어가능한 박스 공간 의미*/
/* 양 옆으로만 테두리 밖의 공간변경 적용 */
margin: 200px;
/* 테두리 영역(top, right 등 부분적용 가능) 1.굵기 2.굵기 종류 3. 굵기 색깔 */
border-right: 1px solid black;
/* 테두리 안 여백 제어(특정 방향 추가 가능)
(margin처럼 시계방향적용, 겹침x) */
padding: 10px;
/*content의 높이와 너비 지정 */
width: 100px;
height: 100px;
/* 박스 크기 고정
width 와 height 때는 border길이에 따른 변화로 크기가 고정x */
box-sizing: border-box;
/* 태그들이 가진 기본적인 박스 성격을 내 마음대로 변화 */
display: block;
}
</style>
</head>
<body>
<p class="block-1">block-1</p>
<p class="block-2">block-2</p>
<span class="inline-1">inline-1</span>
<span class="inline-2">inline-2</span>
</body>
</html>
|
cs |
'📚HTML, CSS > 이론 정리' 카테고리의 다른 글
| 웹 UI개발 정리[틀린 것만 복습| html ~css(4)](가상, 선택자, 케스케이딩 등) (0) | 2023.01.25 |
|---|---|
| CSS 배경 속성, 전환 효과, 미디어 쿼리 (0) | 2023.01.25 |
| CSS 속성, 선택자 , 특정 요소 선택하기 (0) | 2023.01.24 |
| html (멀티미디어 태그, 시멘틱 태그, 글로벌 속성) (0) | 2023.01.19 |
| html [표 태그들] (0) | 2023.01.18 |