웹페이지 제작할 때 중요하게 고려해야 될 부분이 페이지 레이아웃을 구성하는 게 아닐까 생각됩니다. 레이아웃을 구성하는 태그에는 어떤 것들이 있고, 어떻게 사용해야 되는지에 대해 공부한 내용을 정리해보겠습니다.
HTML 태그 정리표 HTML 주요 태그들 정리
HTML 태그들은 각 구분 별로 시맨틱 태그, 텍스트 관련 태그, 이미지와 비디이 등 멀티미디어 관련 태그, 입력 양식 태그 등이 있습니다. HTML 태그 정리표로 한눈에 보기 편하게 정리해보았습니다.
kdevitworld.blogspot.com
페이지의 시작을 알리는 <header>와 <nav> 태그
<header>는 일반적인 웹사이트의 상단에 위치하며, 본문 전에 사이트의 제목 같은 개념으로 회사 홍보 페이지의 경우 로고 및 회사 명칭들이 들어가는 공간입니다. <nav>는 navigation의 약자로 사이트 내의 메뉴에 해당하는 태그입니다.
보통 상단에 메뉴 구성시 <header> 안에 <nav>를 위치시킵니다.
페이지 본문을 담당하는 <main>, <article>, <section>, <aside>
본문 영역에서 <main>는 영어 단어 뜻 그대로 중심이 되는 정보가 들어가는 곳에 사용합니다. 사이트 전반에 걸쳐 반복되는 내용이 아닌 독립적인 콘텐츠가 들어가는 부분입니다.
각각 다른 내용을 담은 콘텐츠는 <acticle>로 구분해줘야 합니다. <section>도 마찬가지로 콘텐츠를 나타낼 때 사용합니다. <article>과 같아 보이지만, <section>보다 <article>이 더 넓은 의미로 해석하시면 될 것 같습니다.
<aside>는 블로그 레이아웃에서도 많이 볼 수 있는 사이드바 영역을 지정합니다.
페이지의 마지막 <footer>와 구분자 <div>
어느 사이트를 가든 마지막 부분에는 회사의 경우 사업자 정보 및 연락처 등을 넣는걸 자주 볼 수 있는데요. 이 부분이 <footer>입니다.
<div>는 페이지 내에서 특정 영역을 구분하고, 묶을 때 사용하는 용도로 사용합니다. 아마 HTML요소에서 제일 많이 사용하지만 함부로 쓰면 안 될 것 같은 태그인데요. HTML은 태그를 사용하기 전에 HTML 표준에 맞게 잘 사용하고 있는지 고려해야 합니다. <div>만으로도 충분히 레이아웃을 구성할 수 있지만, <div> 대신 각 영역에 맞는 의미 있는 시맨틱 태그를 사용하여야 합니다.
페이지 레이아웃 구성 샘플
시맨틱 태그를 넣는다고 웹페이지에 표현되는 것은 아무것도 없습니다. 그래서 대략적인 시맨틱 태그들을 배치했다면, 해당 시맨틱 태그 안에 <div>를 넣은 다음 <div>에 색상을 각 영역별 사이즈를 눈으로 보며 디테일하게 레이아웃을 잡아나가는 것이 편리합니다.
샘플 코드
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
#container {
width : 1200px;
margin : 0 auto;
}
header {
width : 1200px;
height : 120px;
background-color: red;
}
#sidebar {
float : left;
width : 300px;
height : 600px;
background-color: gray;
}
#contents {
float : left;
width : 900px;
height : 600px;
background-color: green;
}
footer {
clear : left;
width : 100%;
height : 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="container">
<header>
</header>
<div id="sidebar">
</div>
<div id="contents">
</div>
<footer>
</footer>
</div>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| HTML 테이블 태그로 표 만들고 사용법 정리 (0) | 2022.06.03 |
|---|---|
| HTML 리스트 태그 목록 만들기 <ol>, <ul>, <li> 정리 (0) | 2022.05.08 |
| HTML 텍스트 관련 태그-2 (굵기, 기울임, 기타 태그들) (0) | 2022.05.04 |
| HTML 텍스트 관련 태그-1 (제목, 문단, 줄바꿈, 인용문) (0) | 2022.04.18 |
| HTML이란? 정리-1 역사와 기본 구성 (0) | 2022.04.07 |
댓글