HTML - 레이아웃
HTML의 레이아웃을 작성하는 방법에는 <div>를 이용한 방법과 HTML5 레이아웃이 있습니다.
- <div>를 이용한 레이아웃
<div> 요소는 보통 컨테이너 역할을 하는 일반적인 블록 요소입니다. 하지만 <div>요소에는 CSS의 적용이 쉽기 때문에 <div> 요소를 활용한 레이아웃 구성이 가능합니다. <div>요소의 클래스(class)나 아이디(id) 속성을 추가하여 스타일이나 스크립트 적용을 위한 식별자로 활용할 수 있습니다. - HTML5 레이아웃
위의 내용만으로 두 가지의 차이점이 무엇인지 파악하기 어려워 추가적으로 찾아본 내용이다.
<div> 를 사용한 레이아웃 구성
- <div>를 사용한 레이아웃 구성은 <div>가 일반적인 컨테이너 요소이기 때문에 레이아웃을 구성하기 위해 자유롭게 사용할 수 있다.
- <div>는 의미론적인 정보를 가지고 있지 않으며, 주로 CSS 스타일을 적용하여 디자인을 변경하고 레이아웃을 제어할 수 있다.
- 개발자가 직접 <div> 요소를 정의하고 스타일을 적용해야 하기 때문에 구조화 와 의미론적인 특성이 명확하지 않을 수 있다
HTML5 레이아웃
- HTML5는 구조적인 요소를 도입하여 레이아웃을 구성할 수 있도록 만들었다.
- HTML5에서는 <header>, <nav>, <section>, <article>, <aside>, <footer>등의 의미론적인 요소를 제공한다.
- 이러한 의미론적인 요소를 사용하면 레이아웃의 구조와 의미를 더 명확하게 전달할 수 있다.
- 브라우저와 웹 검색 엔진은 HTML5의 의미론적인 요소를 이해하고 콘텐츠를 더 적절하게 해석할 수 있다.
요약하면 <div>를 사용한 레이아웃은 자유로운 구성과 CSS 스타일을 적용한 다양한 디자인이 가능하지만 HTML5 레이아웃은 의미론적이 요소를 사용하여 레이아웃을 구성하기 때문에 구조와 의미면에서 장점이 있다는 차이가 있다.
HTML5 레이아웃을 사용한 간단한 예시 이다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 레이아웃 예시</title>
<style>
header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
nav {
background-color: #e3e3e3;
padding: 10px;
text-align: center;
}
section {
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<nav>
<a href="#">메뉴 1</a> |
<a href="#">메뉴 2</a> |
<a href="#">메뉴 3</a>
</nav>
<section>
<h2>섹션 1</h2>
<p>이곳에 섹션 1의 내용이 들어갑니다.</p>
</section>
<section>
<h2>섹션 2</h2>
<p>이곳에 섹션 2의 내용이 들어갑니다.</p>
</section>
<footer>
<p>저작권 © 2023 웹사이트. All rights reserved.</p>
</footer>
</body>
</html>
<div>를 사용한 간단한 예시 이다.
<!DOCTYPE html>
<html>
<head>
<title><div>를 사용한 레이아웃 예시</title>
<style>
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.nav {
background-color: #e3e3e3;
padding: 10px;
text-align: center;
}
.section {
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
}
.footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>웹사이트 제목</h1>
</div>
<div class="nav">
<a href="#">메뉴 1</a> |
<a href="#">메뉴 2</a> |
<a href="#">메뉴 3</a>
</div>
<div class="section">
<h2>섹션 1</h2>
<p>이곳에 섹션 1의 내용이 들어갑니다.</p>
</div>
<div class="section">
<h2>섹션 2</h2>
<p>이곳에 섹션 2의 내용이 들어갑니다.</p>
</div>
<div class="footer">
<p>저작권 © 2023 웹사이트. All rights reserved.</p>
</div>
</body>
</html>
위 예시에서도 볼 수 있는 것처럼 HTML5 예시는 레이아웃 요소를 사용하여 구성되어 있고 <div>는 CSS 클래스를 사용하여 스타일링 하고 있다.
'웹 > HTML' 카테고리의 다른 글
| HTML - form 요소 (0) | 2023.06.21 |
|---|---|
| HTML - 블록(block) 과 인라인(Inline) / iframe 과 프레임셋(frameset) (0) | 2023.06.20 |
| HTML - 테이블(table) (0) | 2023.06.20 |
| HTML - 리스트(List) (0) | 2023.06.20 |
| HTML - 이미지(Image / <img>) (0) | 2023.06.20 |
