section , article 태그
<article>
HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
<section>: 일반 구획 요소
HTML <section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아닙니다.
네이버 블로그의 포스팅 가능, 커뮤니티 글쓰기 기능 같이 어떤 틀이 정해져 있고, 이에 대해선 article을 사용하는 듯하다. 그외엔 section으로 이해했습니다.
코드
12개의 div에 스타일을 주어 박스를 만들고 이를 article로 감싼다.
{article을 배경으로 사용하고, 그 안에 갇힌 12개의 박스를 만들기 위함입니다.}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<article class="container">
<div></div>
<div class="box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</body>
</html>div{
width: 50px;
height: 50px;
margin-bottom: 20px;
background: pink;
}
.container{
background: yellow;
left: 20px;
top: 20px;
position: relative;
}
.box {
background: blue;
left: 20px;
top: 20px;
position: sticky;
}
결과
대표적인 position 속성값
- relative: 스스로의 현재 위치에서 X,Y 만큼 이동함.
- absolute: 상위 태그의 시작점 기준 위치에서 X,Y 만큼 이동함.
- sticky: 스크롤 사용 등으로 위아래로 객체가 움직이지만, 스크롤이 객체의 위치 밖으로 벗어날 경우, 사라지지 않고 유지됨.
- fixed:: 웹페이지 화면 시작점 기준의 위치 좌표를 기준으로 고정돼 있음.
반응형
'html > 드림 코딩' 카테고리의 다른 글
| [드림코딩] 레이아웃 정리 display (0) | 2023.03.05 |
|---|---|
| [드림 코딩] html 기초 - 요약 (0) | 2023.02.28 |
