HTML-CSS/text_option_practice.html at master · No-longlong/HTML-CSS · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!-- 색을 바꾸는 방법
기본적으로 css style에서 바꿔줄 수 있다.
다른 방법으로는 RGB를 활용해서 쓸 수 있다.
RGB의 많은 색의 참조는 html color codes에서.

1. 색 이름
2. RGB
3. HEX (ex.#61F96B)-->

<!-- 텍스트 스타일링 font-weight 주의사항, a 태그 밑줄 지우기-->

<!-- 가운데 정렬 a태그가 안되는 이유: 개발자환경에서 화면에 차지하는것이
    a는 정해진 영역이기 때문. block, inline개념 배워야
    해결 방법: div태그로 묶어서 그 안에 a태그를 할당. div를 가운데정렬.   -->

<!-- 폰트 크기 바꾸기: 1.절대적(px, pt) 2.상대적(em, %)
    pt가 px보다 1.33배 크다.(워드에선 쓰이지만 웹에선 많이 안쓰이는 pt)
    상대적 크기는 부모의 크기를 기준(상대적)으로 한다.
    1em은 100%와 같다.-->

<!-- 구글 폰트
    보는 사람의 폰트가 중요하기 때문에 웹 폰트를 사용하는 경우를 추천
    fonts.google.com과 /earlyaccess에서 링크를 추가한 뒤에, 사용할 수도 있다. -->

<!-- 내 폰트를 통해서도 변경 가능.
    링크 참조를 통해서 내 폴더의 폰트를 참조 -->

<!-- div, span
    두 태그 요소를 묶는 공통점
    div는 내용물을 단독적인 새로운 줄에 놓는다.
    span은 원래 위치에 영향을 주지 않는다.
    block display, inline display의 개념 -->

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta charset="utf-8">

        <!--  google fonts에서 가져온 폰트 -->
        <link href="https://fonts.googleapis.com/css2?family=Modak&family=Roboto&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/earlyaccess/jejuhallasan.css" rel="stylesheet">
        <link rel="stylesheet" href="css/font_style.css">

        <style>
            h1 {
                color: orange;
                /* 폰트 색을 지정하는 3가지 다른 방법들 */
            }

            p {
                font-weight: 100;
                /* font-weight(굵기 정도)는 100단위만 지원
                폰트와 브라우저별로 지원하는 것이 다르다.(테스트 필요)*/
            }

            a {
                text-decoration: none;
                /* a 태그에서 밑줄을 없애주는 옵션에
                text-decroation을 많이 쓴다. */
                text-align: center;
            }

            .center {
                text-align: center;
                /* a 태그에 단순히 이렇게 지정해도 가운데 정렬 안된다. */
            }

            .menu {
                text-align: center;
            }

            body {
                font-size: 16px;
            }

            .div1 {
                font-size: 1em;
            }

            .div2 {
                font-size: 2em;
            }

            .div3 {
                font-size: 2em;
            }
            /* line-height의 타이포그래피 지식 설명 */
            /* p {
            font-size: 40px;
            color: gray;
            } */

            .p1 {
            background-color: red;
            line-height: normal;
            }

            .p2 {
            background-color: green;
            line-height: 80px;
            }

            .p3 {
            background-color: blue;
            line-height: 30px;
            }
            /* 콘텐츠 영역(font-family, font-size)에 line-height가 영향 주지 않는다. */

            h3 {
                font-family: 'Times New Roman', Times, serif;
                /* 폰트가 없을 경우에는 오른쪽의 폰트들이 제2의 폰트가 된다.
                    Times는 띄어쓰기가 없어서 따옴표 안해줘도 된다.
                    serif, san-serif와 같은 종류를 맨 오른쪽에 써준다.
                    맨 왼쪽일수록 우선순위인 것이다.*/
            }

            h4 {
                font-family: 'Modak', cursive;
                font-size: 300%;
            }

            h5 {
                font-family: 'Jeju Hallasan', cursive;
                font-size: 2em;
            }

            .JUA {
                line-height: 2em;
            }

            .divtag {
                color: indianred;
            }

            .spantag {
                color: indianred;
            }

        </style>

    </head>

    <body>
        <h1>색깔 교체</h1>
        <h2 class="center">가운데 정렬</h2>
        <h3>폰트 설정 Font setting</h3>
        <h4>가지고 있지 않은 폰트 ex.Google Font</h4>
        <h5>구글 폰트 2번째 비교</h5>

        <p>텍스트 스타일링</p>
        <p class="center">가운데 정렬</p>
        <div class="menu">
            <a class="center" href="http://google.com">구글로 가는 링크</a>
        </div>

        <div class="div1">
            폰트 크기1
            <div class="div2">
                폰트 크기2
                <div class="div3">
                    폰트 크기3
                </div>
            </div>
        </div>
        <p class="p1">gallantly</p>
        <p class="p2">gallantly</p>
        <p class="p3">gallantly</p>

        <p class="p1">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly</p>
        <p class="p2">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly</p>
        <p class="p3">gallantly gallantly gallantly gallantly gallantly gallantly gallantly gallantly

        <p class="JUA">배달의 민족 주아체 다운로드<br><br></p>

        <p>긴 구문에서. 이처럼 <div class="divtag">일부분에만 특정한 효과를 넣어주고 싶다.</div> 그러나 어떤 태그는 위치를 변경하지 않고
            어떤 태그는 위치를 변경한다. 이 둘의 차이점을 알기 위해서는 block, inline의 개념을 알아야 한다.
        </p>

        <p>긴 구문에서. 이처럼 <span class="spantag">일부분에만 특정한 효과를 넣어주고 싶다.</span> 그러나 어떤 태그는 위치를 변경하지 않고
            어떤 태그는 위치를 변경한다. 이 둘의 차이점을 알기 위해서는 block, inline의 개념을 알아야 한다.
        </p>

    </body>
</html>