728x90
HTML5 레이아웃 요소
div 요소를 이용해서 웹 페이지를 레이아웃하면 <div> 태그가 필연적으로 많이 사용되게 된다.
페이지 내에 산재되어 있는 <div>태그들은 웹 페이지의 구조를 복잡하게 만들고 웹 페이지의 가독성을 떨어뜨린다.
이렇게 되면 웹 페이지의 유지 보수가 어렵고 작업자 이외에는 문서를 이해하기 어려워서 공동작업도 어렵게 될 것이다.
이런 단점을 보완하기 위해서 HTML5 웹 페이지의 레이아웃을 <header>,<section>,<sidebar>,<nav>,<article>,<footer> 등의 태그를 추가 했다.
이렇게 함으로써 이름을 보면 요소가 가지고 있는 의미를 쉽게 파악할 수 있다. 이것을 HTML5 Semantic(의미론적)이라고 부른다.
- <header> 웹 페이지의 상단에 위치한 로고, 상단 메뉴, 메인메뉴 등이 들어가는 헤더를 정의할 때 사용한다.
- <aside> 부가적인 요소의 영역을 나타낸다. 일반적으로 메인 콘텐츠 좌측 또는 우측에 위치하여 메뉴, 사이드링크, 공지, 글 목록 등의 요소를 포함하는 영역이다.
- <section> 웹 페이지에서 메인 콘텐츠와 같이 독립적인 구획을 나타낼 때 사용한다. 섹션 요소를 어떤 영역에 사용되는지를 명확하게 규정하고 있지는 않지만 페이지에서 독립적인 영역에 사용한다
- <footer> 웹 페이지 하단 끝에 위치하며 하단 메뉴, 회사나 기관의 주소, 연락처, 저작권 표시 등을 표시한다.
- <nav> 네비게이션에서 사용한다.
- <article> 블로그 포스트 등의 글 영역에서 사용한다.
position 속성 값
float 속성은 요소를 화면에서 임의의 좌측 또는 우측에 배치하는데 사용되고, position 속성은 HTML 요소의 위치를 지정하는데 사용된다.
상대위치(relative : 원래 있어야할 지점을 기준으로 상대위치 지정),
절대위치(absolute : 브라우저 화면의 원점, OR 부모소의 원점을 기준으로 절대위치 지정),
위치 고정(fixed : 브라우저 화면의 특정 위치에 고정) 이 있다.
<..생략>
<style>
#b { position : relative; left : 60px; top : 30px; }
#a, #b, #c { width : 100px; height : 60px; background-color : yellow;
border : solid 1px black; }
</style>
</head>
<body>
<h3>상대 위치 지정(position : relative)</h3>
<div id="a">요소 A</div>
<div id="b">요소 B</div>
<div id="c">요소 C</div>
<..생략>
<..생략>
<style>
#b { position : absolute; left : 60px; top : 30px; }
#a, #b, #c { width : 100px; height : 60px; background-color : yellow;
border : solid 1px black; }
</style>
</head>
<body>
<h3>절대 위치 지정(position : absolute)</h3>
<div id="a">요소 A</div>
<div id="b">요소 B</div>
<div id="c">요소 C</div>
<..생략>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#parent {width:350px; height:200px; position:relative; border:solid 5px red; padding:90px 0 0 60px;}
#b { position : absolute; left : 30px; top : 30px; }
#a, #b, #c { width : 100px; height : 60px; background-color : yellow;
border : solid 1px black; }
</style>
</head>
<body>
<h3>절대 위치 지정(position : absolute, 부모 요소가 있는 경우)</h3>
<div id="parent">
<div id="a">요소 A</div>
<div id="b">요소 B</div>
<div id="c">요소 C</div>
</div>
</body>
</html>
<!--parent 는 빨간 박스이고, 브라우저의 원점 기준으로 position:relative이다.
요소 A,B,C 는 parent를 원점으로 해서 배치되는데 요소B는 positon:absolute 이므로
이 빨간박스를 기준으로 30,30 떨어져 있다. 요소A 와 C는 빨간 박스를 기준으로 90떨어져 있고,
서로 붙어있어며 (0,0), 좌측에서 60 떨어져 있다.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#box {width:10px; height:500px; background-color:green;}
#a { position : fixed; top:20px; right:20px; background-color:red; padding:10px; 20px; color:white; }
</style>
</head>
<body>
<h3>위치 고정(position : fixed)</h3>
<div id="box"></div>
<div id="a">요소A</div>
</body>
</html>'일단 해보는 코딩 > HTML' 카테고리의 다른 글
| [HTML] HTML5 활용 (0) | 2022.06.22 |
|---|---|
| [HTML]Div태그 (0) | 2022.06.17 |
| [HTML] 텍스트 다양한 태그 (0) | 2022.06.16 |
| [HTML] 테이블생성 (0) | 2022.06.15 |
| [HTML] Form 양식 (0) | 2022.06.15 |