HyperText Markup Language
- 웹페이지의 뼈대 역할
- 시맨틱 태그
division(분할, 구분)에서 나온 태그<div>와 동일한 기능을 하며,
의미를 짐작하기 쉽도록 사용
ex)<header>,<main>,<section>,<nav>,<aside>,<footer>등
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>페이지 제목</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li class="menu-item selected">unordered list 1</li>
<li class="menu-item">unordered list 2</li>
<li class="menu-item selected">unordered list 3</li>
<li class="menu-item">unordered list 4</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
</aside>
</div>
<footer>This is the footer.</footer>
</body>
</html>
Cascading Style Sheets
- UI와 UX를 위해 HTML의 웹페이지 뼈대를 스타일 및 레이아웃 하는 언어
- 관심사 분리 측면에서 HTML 안에 CSS를 정의하는 것을 권장하지 않음
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
.menu-item {
text-decoration: underline;
}
.selected {
font-weight: bold;
color: #009999;
}레퍼런스 사이트
https://www.w3schools.com/
https://developer.mozilla.org/ko/
