반응형
<최종 결과 화면>
하나하나 적용하면서 결과를 확인해보자.
우선 html 파일을 만들자.
이제 위 사진의 글씨에 font를 적용하겠다. [윈도우에서 지원하는 폰트를 가져와서 사용해보자 ]
css 파일을 만들어서 적용도 가능하지만, 폰트만 확인할 것이기 때문에 html에 쓰겠다. (내부 스타일 )
한글도 비교하기 위해서 한글도 써주겠다. 휴먼옉체 같은 것은 기본적으로 지원되는 폰트이다.
만약 다운받은 폰트를 적용하고 싶다면?
해당 파일을 드래그&드롭으로 동일 선상 위치에 가져다 놓는다.
(예제에선 Day03폴더에 다 넣음 html, 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font style</title>
<style type="text/css">
/* 폰트 글꼴 */
p{font-family: "Cooper Black", serif;}
p{font-family: "휴먼옛체", sans-serif;}
p{font-family: fantasy;}
p{font-family: cursive;}
p{font-family: monospace;}
/* 웹폰트 : 별도의 ttf,otf 폰트파일로 폰트 지정 */
/* 브라우저의 영향이 없는 글꼴지정 방식 */
/* 웹폰트 등록 문법 */
@font-face {
font-family: "My Font"; /* 임의로 폰트 이름 */
}
/* 위에서 만들어진 웹폰트를 p요소에 적용하기 */
p{font-family: "My Font", serif;}
/* 폰트 크기 */
p{font-size: 30px;}
p{font-size: 2.5em;} /* em배율 2.5배 */
/* bold, normal , 100~ 900두께 */
p{font-weight: bold;}
/* italic */
p{font-style: italic;}
/* 위 4개의 폰트관련 속성을 한번에 설정하기 */
/* 작성 순서 [weight/ style] size family */
p{font: italic bold 400% "휴먼옛체",serif;} /* 띄어쓰기로 구분 */
</style>
</head>
<body>
<p>Hello world</p>
<p>한글은 어떠한가?</p>
</body>
</html>
|
이제 텍스트 관련 스타일 속성들을 알아보겠다. 기존 코드에 추가 작성하겠다.
텍스트 대소문자 자동으로 지정 가능하다.
텍스트에 줄긋기도 가능하다. (아래, 가운데, 위)
텍스트 그림자를 주겠다.
한글은 자동 줄바꿈이 되지만, 영어는 자동 줄바꿈이 안된다.
영어도 줄바꿈이 되도록 해보자.
세로운 단락을 만들고 일부러 긴 영어글을 가져왔다.
긴 영어글을 자신이 원하게 줄을 나눠보자.
간혹 가운데 정렬을 할때, 블럭과 인라인의 차이로 잘못 인지하는 경우가 있다.
컬러를 주면 당연히 둘다 가운데 정렬이 됐다는 것을 알 수 있다.
추가로 라인 높이, 자간도 제어 가능하다.
<복붙용 코드>
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font style</title>
<style type="text/css">
/* 폰트 글꼴 */
p{font-family: "Cooper Black", serif;}
p{font-family: "휴먼옛체", sans-serif;}
p{font-family: fantasy;}
p{font-family: cursive;}
p{font-family: monospace;}
/* 웹폰트 : 별도의 ttf,otf 폰트파일로 폰트 지정 */
/* 브라우저의 영향이 없는 글꼴지정 방식 */
/* 웹폰트 등록 문법 */
@font-face {
font-family: "My Font"; /* 임의로 폰트 이름 */
}
/* 위에서 만들어진 웹폰트를 p요소에 적용하기 */
p{font-family: "My Font", serif;}
/* 폰트 크기 */
p{font-size: 30px;}
p{font-size: 2.5em;} /* em배율 2.5배 */
/* bold, normal , 100~ 900두께 */
p{font-weight: bold;}
/* italic */
p{font-style: italic;}
/* 위 4개의 폰트관련 속성을 한번에 설정하기 */
/* 작성 순서 [weight/ style] size family */
p{font: italic bold 200% "휴먼옛체",serif;} /* 띄어쓰기로 구분 */
/* 텍스트 관련 스타일 속성들 */
/* 1. 텍스트 정렬 */
p{text-align: center;}
/* 2. 텍스트 변환 */
p{text-transform: uppercase;} /* 다 대문자로 됨 */
p{text-transform: capitalize;} /* 첫 글자만 대문자 됨 */
/* 3. 텍스트 꾸미기 [줄긋기] */
p{text-decoration: none;}
p{text-decoration: underline;}
/* 4. 텍스트 그림자 */
p{text-shadow: 5px 3px 5px red;}
/* 5. word wrap */
p.aaa{width: 5em; border: 1px solid blue; word-wrap: break-word;} /* 5글자 */
/* 6. 다중 컬룸 */
p.lorem{ column-count: 2; column-gap: 80px;
column-rule: 4px dashed green;}
</style>
</head>
<body>
<p>Hello world</p>
<p>한글은 어떠한가?</p>
<p class="aaa">
한글은 문제없이 다음 줄로 자동 내려갑니다.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p class="lorem">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio officia sed commodi ex nisi dolorum facilis, iusto recusandae maxime fugit pariatur architecto excepturi debitis voluptatibus, saepe ea qui dignissimos eum.
</p>
<!-- 주의!! text-align은 블럭요소만 적용가능함! -->
<div style="text-align: center; background-color: blue; line-height: 5em;">Hello</div>
<span style="text-align: center; background-color: blueviolet; letter-spacing: 0.5em;">Nice</span>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) 링크, 이미지, 리스트 스타일 적용[배경색, 이미지 적용, ] (0) | 2019.12.06 |
|---|---|
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-2 (0) | 2019.12.06 |
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-1 (0) | 2019.12.06 |
| HTML+CSS (기초) html파일에 스타일을 css로 적용하기{외부,내부,이인라인} [짧음] (0) | 2019.12.05 |
| HTML+CSS (기초) style 적용, [내부, 외부 스타일 시트 적용] (0) | 2019.12.05 |
댓글