HTML5 & CSS
HTML & CSS
HTML & CSS tutorial site
https://www.w3schools.com (Tutorial)
http://jsbin.com (JS bin_free test site)
http://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (Tutorial)
Personally, I recommend 'w3schools.com' rather than 'developer.mozilla.org' for learning Basic step.
What is HTML5?
HTML5 includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.
(https://en.wikipedia.org/wiki/HTML5)
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
|
<!-- '!+tap' 으로 HTML 기본형 출력 -->
<!--alt+shit+up/down 복사-->
<!--alt+shit+k 한줄 삭제-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <head></head>안에서 인코딩, 클래스, title, style 등 선언-->
<meta charset="UTF-8">
<!--
charset = Browser가 사용할 문자셋 정의
euc-kr = 1 byte 길이의 ASCII를 한글 사용을 위해 2byte 길이로 확장한 국가언어 코드
UTF-8 = euc-kr방식을 글로벌 환경을 고려하여 표준화 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그 포함
'width': 뷰포트의 크기 조정
'width = device-width': 100% 스케일에서 CSS픽셀들로 계산된 화면의 폭을 의미
'height = device-height': 뷰포트의 높이 조정
'initial-scale': 페이지가 처음 로드될 때 줌 레벨을 조정
-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*기본값*/
h1{
color:red;
background: yellow;
display: inline;
}
/*h1.even -'h1' 중 클래스가 even인 애들*/
/*h1 .even -'h1의 자식'중 클래스가 even인 애들*/
.even{
color:red;
background-color: skyblue;
display:block;
}
/*h1#id. id가 last인 애들*/
/*우선순위 1번*/
#last{
color:white;
background-color:blue;
display: inline-block;
padding: 100px;
border: 3px solid red;
border-radius: 30px;
}
span{
color: lime;
}
/*
[span]
어떤 영역만 바꾸고 싶다. span을 삽입하여 효과를 줌
ex) 글 문단 색 바꾸기. span{ display: none;} */
h2.even{
color: green;
background-color: aqua;
display:inline;
}
.newCls{
color:red;
background-color: yellow;
}
p{
background-color: yellow;
color: blue;
}
/*마우스 오버시 다른 이미지 보여주기_CSS이용*/
.imgc img:last-child{display:none}
.imgc:hover img:first-child{display:none}
.imgc:hover img:last-child{display:inline-block}
/*p::after, p::before*/
p::after{
content: " - my world."
}
p::before{
content: "*"
}
/* p::after = <p>의 컨텐츠 다음에 내용을 넣는다
p::before = <p>의 컨텐츠 이전에 내용을 넣는다*/
</style>
<!-- <style></style> = CSS 영역. 이 영역 안에 body/요소들의 클래스를 정의하여 데코 가능
CSS property 검색: http://www.w3schools.com/cssref/css3_browsersupport.asp
<!--
CSS를 HTML에 적용하는 방법
(1) 외부문서(*.css)를 HTML문서에 포함시키는 방법_The best
(2) HTML문서에 <style>태그안에 스타일을 정의
(3) 태그 안에 스타일을 정의
ex. <h1 style="color:blue;margin-left:30px;">This is a heading</h1>
-->
<!--
[selector]
'h1 -> {color:blue; font-size:12px;}'
.class: 모든 요소들 in class
#id: 모든 요소 with id
*: 모든 요소
p: 모든 <p>요소
div, p: 모든 <div>요소들과 <p>요소들
div p: <div>안에 p요소들
div > p : div p -->
<!--
[color]
background-color: 배경색 지정
color: 글자색 지정
[Color & Opacity]
rgb(적색, 녹색, 청색); ex)rgb(255,0,0)
opacity:투명도. ex)opacity:0.6
rgba(적색, 녹색, 청색, 투명도). ex)rgba(255,0,0,0.3)
hsl(색조, 채도, 명도) ex)hsl(120, 100%, 75%)
hsla(색조, 채도, 명도, 투명도) ex)hsla(120, 100%, 50%, 0.3) -->
<!--
[Font]
font-family: 폰트 종류
font-weight: normal, bold
font-style: normal, italic, oblique(italic을 흉내냄)
font-size: 폰트 크기 지정. 16px(1em)이 브라우저의 기본
font-variant: normal, small-caps, inital, inherit;
ex) p{font: 15px arial, sans-serif;}
왼쪽부터 적용됨. 지원되지 않으면 그 다음 폰트 시도.
-->
<!--
[Display]
'display: none'
'display: block'은 default. 글자가 있는 줄 모두 바탕 칠함
'display: inline'은 글자 수 많큼 바탕 칠함
'display: inline-block'은 inline과 비교해서 margine의 넓이가 더 넓음
'visibility : hidden'은 숨기기 -->
<!--
[Text]
text-align: center, left, right, justify //글 중간, 왼, 오 정렬
text-shadow: 그림자(offsetX, offsetY, color)
text-decoration: overline, line-through, underline, none 텍스트에 줄긋기
text-transform: uppercase, lowercase, captialize(첫글자를 대문자로)
text-overflow: 텍스트가 영역에서 넘칠 때. (1)clip: 그냥 자름 (2)ellipsis: ...으로 보여줌 (3)scroll
white-space: nowrap_내용이 넘쳐도 줄바꿈 안함
vertical-align: 수직정렬. text-top, text-bottom(default)
line-height: 줄간(0.8과 같은 식으로)
word-spacing: 단어 간 간격
-->
<!---->
<!--
[Links]
a:link : 아직 방문하지 않은 링크
a:visited : 방문한 적이 있는 링크
a:hover : 사용자가 마우스를 올려놓는 링크
a:active : 클릭되었을 때의 링크
ex) a:hover, a:active{
background-color: blue;
text-decoration: none;
display: inline-block;
}
-->
<!--
[width & height]
width: 컨텐츠 영역의 폭. if) width =100% -> 브라우저의 전체 폭 차지
height: 컨텐츠 영역의 높이
max-width: 컨텐츠 영역의 최대 폭 (브라우저 늘릴 시, 더이상 안커짐)
max-height: 컨텐츠 영역의 최대 높이
min-width: 컨텐츠 영역의 최소 폭 (브라우저 줄일 시, 스크롤바 생김)
min-height: 컨텐츠 영역의 최소 높이
top, bottom, left, right 경계에 개별 적용 가능
[Padding]
padding: top bottom left right;
ex) padding: 100px 150px 100px 150px;
padding: 100px 150px; (top=100px, bottom=150px, left=100px, right=150px)
padding: 100px; (top=100px, bottom=100px, left=100px, right=100px)
[Borders]
border-style: 경계선의 종류(solid, dotted, double, groove...)
border-width: 경계선의 두께
border-color: 경계선의 색깔
border-radius: 경계선의 모서리 반경(둥근 모서리)
ex) border: 2px solid red;
border-left: 6px solid red; //border의 왼쪽만 칠함
barder-width: 2px 10px 4px 20px;
border-color: red green blue yellow;
border-radius: 5px;
[margins]
margin: top right bottom left;
margin-left: 100px;
margin: auto; //자동계산(좌우여백 같게)
margin: inherit; //마진의 상속
ex) margin: 100px 150px 100px 150px;
ex) div{
border: 1px solid red;
margin-left: 100px;
}
p{
margin-left:inherit; // div안에 p가 있을 시, margin-left 상속
}
} -->
</head>
<body>
<!-- h1.class / h1#id / <span> 사용 -->
<!--h1*4{Hello}-->
<h1 class="even">Hel<span>lo Wor</span>ld</h1>
<h1>Hello</h1>
<h1 class="even">Hello</h1>
<h1 id="last">Hello</h1><br>
<!--0부터 시작. even=0,2...-->
<!--h2.even{world}*4-->
<h2 class="even">wolrd</h2>
<h2 class="even">wolrd</h2>
<h2 class="even">wolrd</h2>
<h2 class="even">wolrd</h2>
<!--
(1) 'class="even"''인 경우, .even style 적용.
(2) if you wana use another effect on h2, h2.even style 정의
-->
<!--h3.even.newCls{Wolrd world}*3--> <!--even newCls 공백 주의-->
<h3 class="even newCls">Wolrd world</h3>
<h3 class="even newCls">Wolrd world</h3>
<h3 class="even newCls">Wolrd world</h3>
<!--
<style을 2개 이상 적용 가능>
style안의 순서 정의대로 적용(even -> newCls)
-->
<p>지금 나는 공 부를 한다</p><br>
<p>지금 나는 <strong>책</strong>을 읽는다</p><hr>
<!--
[문장복사 단축]
'p{heading$}*5': <p>heading1</p> ~ <p>heading5</p> 출력
'p.header# *5': <p class="header" id=""></p>을 5번 출력
'option*5': <option value=""></option> 5번 출력
[Empty Element]
'<br>': 줄 띄움
'<hr>': 줄 긋기
'<img>': 이미지 넣기
[글자 모양 Tag]
'<strong></strong>': 굵게
'<b></b>': bold
'<del></del>': 글자 가운데 줄 긋기
'<ins></ins>': 밑줄
' ': 연속 공백
-->
<a href ="http://www.google.com">Visit google.com!</a>
<!--
a : 하이퍼링크 사용을 위한 것
herf: 이동하고자 하는 파일의 위치 받음
-->
<ul>
<li value="1">Coffee</li>
<li value="2">Tea</li>
<li valeu="3">Milk</li>
</ul>
<!--
<li>: List
<ul>: 순서없는 목록 <-> <ol>: 순서있는 목록
-->
<table border-"1">
<tr>
<th>Frist</th>
<th colspan="2">Second</th>
<th>Third</th>
</tr>
<tr>
<td>Quentin</td>
<td>Francesco</td>
<!-- <td>Ozer</td> -->
</tr>
</table>
<!--
[table]
table = 표를 감싸는 태그
tr = 표의 행(table row)
th = 표의 제목 셀(table heading)
td = 표의 일반 셀(table data)
'colspan="2"' : 두 개의 th(column)을 합침
'rowspan="2"' : 두 개의 tr(row)을 합침
(tr>td*5)*5
-->
<img src="dog.jpg" alt="Smiley face" width=300><br>
<!--
src = 이미지 파일
alt = 이미지 없을 때 보여주는 것
width = 넓이 (if width=100%, 사진을 브라우저 사이즈에 맞게 보여주는 것)
-->
<!--마우스 오버시 다른 이미지 보여주기_CSS이용-->
<div class ="imgc">
<img src="웃는고양이.jpg" alt="" width="500"/>
<img src="웃는강아지.jpg" alt="" width="500" />
</div>
<script>
document.addEventListener('click', function(){
alert('Clicked!');
});
</script>
<form>
<label for="id">아이디</label>
<input type="text" name="id"><br>
<label for="pwd">패스워드</label>
<input type ="password" name="pwd"><br>
<button type="submit">전송</button>
</form>
<!--
<label for = "">label 이름</label>: 입력받을 창 생성
<input type="" name="">: 입력받을 타입과 정보의 이름을 붙여줌
if) input type이 checkbox인 경우 check 상자가 만들어짐(다중선택 가능)
if) input type이 radio인 경우 check circle이 만들어짐(단일선택 가능)
<button type= "">버튼이름</button>: 버튼과 버튼이름 생성
-->
</body>
</html>
| cs |
댓글 없음:
댓글 쓰기