main은 IE는 지원되지 않는다.
핵심 컨텐츠.
ARTICLE
독립적으로 사용하는 컨텐츠에서 사용.
재사용이 가능한 컨텐츠.
블로그나 기사.
H1~H6 하나는 들어가 있어야 하고
<TIME>의 datetime 속성도 추가
=> 이렇게 보니 잘 이해가 되지 않는 부분.
section
h1~h6 하나는 들어간다.
section에 article들어갈 수 있고
article에도 section이 들어갈 수 있다.
article에서 너프한 개념으로 section. section에서 더 너프한 개념으로 div라고 생각하면 좋다.
aside
옆쪽에 독립적으로 있고 광고같은걸 늘때 쓴다. (보통 오른쪽에 있다.)
nav
header 안에 nav 안에 ul 안에 li 태그로 4개 두고 이런식으로 사용하기도 한다.
홈 ~ 메뉴 ~
address
이메일 전화번호 주소를 나타낼 때 쓴다.
<address>
<a href="mailto:joker77z@naver.com">joker77z@naver.com</a> // 클릭하면 아웃룩 창이 뜰 수 있다.
<a href=""tel:+821071645084">010-7164-5084</a> // 모바일에서 클릭하면 바로 전화 창이 뜰 수 있다.
</address>
이 모든것들은 럭요소. 영역은 블럭요소라고 생각하
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li></li>
</ul>
</nav>
</header>
<section>
<h1></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>
<footer>
<address>
<a href="mailto:tjpark@cadian.com">tjpark@cadian.com</a>
<a href="tel:+821071645084"></a>
</address>
</footer>
</body>
</html>header {
}
header nav {
}
header nav ul {
}
header nav ul li {
}
section {
}
section h1 {
}
article {
}
article h2 {
}
article p {
}
aside {
}
footer {
}
footer address {
}
footer address a {
}
#2 구조를 잡았으면 작업을 시작한다.
- 래핑 하는 방법은 영역을 선택하고 ctrl+shift+p(맥은 cmd+shift+p)를 한 뒤 약어를 검색하고 ex) main 을 입력한다.
왜 래핑을 하나요?
flex를 이용해서 section과 aside 두 개를 가로로 배치하기 위해서다. main으로 래핑하고 flex속성을 준다.
- box-sizing : border-box는 border나 padding의 크기에 관계없이 가로 크기를 width값에 고정시켜주는 것에 있다. 즉, 자리잡을 때 유용하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1></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:tjpark@cadian.com">tjpark@cadian.com</a>
<a href="tel:+821071645084">010-7164-5084</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-color: tomato;
margin: 10px;
padding: 10px;
/* 패딩이 들어가도 요소 크기가 커지지 않게 */
box-sizing: border-box;
}
section h1 {
}
article {
background-color: yellowgreen;
margin-bottom: 10px;
padding: 10px;
}
article h2 {
}
article p {
}
aside {
width: 30%;
background-color: tomato;
margin:10px;
padding:20px;
box-sizing: border-box;
}
footer {
background-color: tomato;
padding: 10px;
margin: 10px;
}
footer address {
}
footer address a {
/* 인라인 요소를 수직으로 만들기 위해서 블럭으로 만든다. */
display: block;
}'Stack & Tool > HTML, CSS' 카테고리의 다른 글
| PRE (0) | 2021.05.18 |
|---|---|
| hr에 style (0) | 2021.05.18 |
| h1 ~ h6에 대해 몰랐던 얘기. 스타일로 사용하지 말라. (0) | 2021.05.18 |
| 시맨틱 태그(1일 15개 이상 발행 제한으로 임시 제한) (0) | 2021.05.18 |
| base 태그 (상대경로 정해버리기) (0) | 2021.05.18 |
댓글