index.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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Oswald:wght@700&family=Roboto:wght@400;900&display=swap"
rel="stylesheet"
/>
<link href="styles.css" rel="stylesheet" />
<title>HTML & CSS Basics Summary</title>
</head>
<body>
<header>
<h1>HTML & CSS Basics Summary</h1>
<img src="image/html-css.png" alt="html&css" />
</header>
<main>
<ul>
<p id="small-name">HTML Summary</p>
<p>
HTML (HyperText Markup Language) is used to define our page contentm
structure and meaning. <br />you don't use it for styling purposes.
Use CSS for that instead!
</p>
<li>HTML uses "elements" to describe (annotate) content</li>
<p>
HTML elements typically have an opening tag, content and then a
closing tag
</p>
<li>you can also have void (empty) elements like images</li>
<li>you can also configure elements with attributes</li>
<p>
There's a long list of available elements but you'll gain experience
over time, no worries.
</p>
<p>
Learn more about all available HTML elements on
<span>the MDN HTML element reference</span>
</p>
<p id="small-name">CSS Summary</p>
<p>
CSS(Cascading Style Sheets) is used for styling your page content.
</p>
<p>Styles are assigned via property-value pairs</p>
<p>you can assign styles via the "style" attribute</p>
<li>
To avoid code duplication, you typically use global styles (e.g. via
the "style: element) instead
</li>
<p>
Alternatively, you can work with external stylesheet files which you
"link"to
</p>
<p>
When working with CSS, concepts like "inheritance", "specificity" and
the "box model" should be<br />
understood.
</p>
<p>
Learn more about all available CSS properties and values on
<span>the MDN CSS property reference</span>
</p>
</ul>
</main>
<footer>
<p><a href="link/html-css-basics-summary.pdf">Download PDF Summary</a></p>
<p>(c) Academind GmbH</p>
</footer>
</body>
</html>
|
cs |
lang 속성 : 현재 사이트에 사용하고 있는 언어를 표현함 ex) 영어일 경우 en, 한국어일 경우 ko
(웹과 사용자의 언어가 서로 다를 경우 구글 크롬 자동번역 인터페이스가 뜨게 됨)
rel 속성 : 현재 문서와 외부 리소스 사이의 연관 관계를 명시
alt 속성 : 이미지가 안 나올 경우 대체할 텍스트
인라인 요소 : 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지
블록 레벨 요소 : 부모 요소의 전체 공간을 차지하여 "블록"을 만듬
styles.css
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
|
body {
background-color: rgb(244, 234, 255);
font-family: 'roboto', sans-serif;
}
main {
background-color:rgb(116, 9, 173);
margin:30px auto 0 auto;
border-radius: 5px;
width:800px;
padding: 30px 0;
}
header {
text-align: center;
}
header img {
width: 200px;
height: 110px;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
color: rgb(88, 49, 196);
}
p {
color: white
}
li {
color: yellow;
list-style:square;
}
#small-name {
font-size: 20px;
font-family: 'Oswald', sans-serif;
}
span {
background-color: rgb(214, 146, 51);
border-radius: 3px;
color: black;
}
footer {
text-align: center;
color: rgb(0, 0, 0);
}
a {
background-color: rgb(255, 217, 0);
color: black;
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
|
cs |
'Frontend > HTML, CSS' 카테고리의 다른 글
Wep developer 부트캠프 (2022-05-14) (0) | 2022.05.14 |
---|---|
Web Developer 부트캠프 (05/01) (0) | 2022.05.01 |
Web Developer 부트캠프 (04/30) (0) | 2022.04.30 |
Web Developer 부트캠프 (04/28) (0) | 2022.04.28 |
Web Developer 부트캠프 (04/26) (0) | 2022.04.26 |