html에서 구조를 잡은 후에 css에서 html과 같은 구조로 틀을 만든후에, 사용하지 않는 css 태그를 하나씩 지우면 된다. 그것이 나중에 정리할 때 편하다.
ctrl + shift + p 를 누르면 emmt abbreviation이 나오는데 거기에 원하는 태그이름을 넣으면 wrapping이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>Article1</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article2</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article3</h2>
<p>Contents...</p>
</article>
</section>
<aside>
Aside
</aside>
</main>
<footer>
<address>
<a href="mailto:sldkfjwoejlsckj@gmail.com">asldkfjsladkf@gmail.com</a>
<a href="tel:843218324068">010-1234-5678</a>
</address>
</footer>
</body>
</html>
header{
background : tomato;
margin : 10px;
padding : 20px;
}
header nav{
}
header nav ul{
display : flex;
}
header nav ul li{
list-style : none;
margin : 10px;
}
main{
display : flex;
}
section{
width : 70%;
background : tomato;
margin : 10px;
padding : 10px;
box-sizing : border-box; /*padding이 들어가도 요소의 크기가 커지지않게 만든다*/
}
section h1{
}
article{
background : yellowgreen;
margin-bottom : 10px;
padding : 10px;
}
article h2{
}
article p{
}
aside{
width : 30%;
background : blue;
margin : 10px;
padding : 20px;
box-sizing: border-box;
}
footer{
background : yellow;
margin : 10px;
padding : 20px;
}
footer address a{
display : block;
}'HTML > 요소' 카테고리의 다른 글
| BODY 내 구조 개념 --> 문자 콘텐츠 (DL, DT, DD) (0) | 2020.12.28 |
|---|---|
| BODY 내 구조 개념 --> 문자 콘텐츠 (OL, UL, LI) (0) | 2020.12.27 |
| BODY 내 구조 개념 --> 콘텐츠 구분 DIV (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 ADDRESS (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 NAV (0) | 2020.12.24 |