이번 포스팅은 html에서 레이아웃을 정할때, 많이 쓰이는 태그들중에서 header, main, footer태그에 대한 내용입니다.
필자만의 생각을 담은 포스팅이니 확인해 보시고, 각자의 맞는 태그를 사용하면 됩니다.
html에서 레이아웃을 정의하는 방법은 여러가지가 있습니다.
그중에서 두가지를 언급하겠습니다.
하나는, html5 이전시대에도 많이 쓰였고, 요즘에도 많이 쓰이고 있는 div태그와 id를 사용하는 방법과, 두번째는 html태그의 레이아웃 태그를 사용하는 방법이 있습니다.
div를 활용해서 레이아웃을 만들때는, id를 별로도 정의해서, style을 div별로 따로따로 주어서 화면을 꾸며야 합니다.
하지만, header, main, footer로 이루어진 html의 구성에서는, 태그만으로 스타일에서 화면을 꾸밀 수 있습니다.
아래의 태그를 보아주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>header, main, footer</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
<meta name="author" content="행운공장, 행운월드">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0; padding: 0; background:#eeeeee;}
* {text-align:center; }
header {background:orange;padding:50px 0;}
main {background:lightgreen;padding:100px 0;}
footer {background:lightblue;padding:50px 0;}
</style>
</head>
<body>
<header>
<h3>
header의 내용
</h3>
</header>
<main>
<h3>
main의 내용
</h3>
</main>
<footer>
<h3>
footer의 내용
</h3>
</footer>
</body>
</html>
위의 태그를 화면상으로 보았을때는 아래의 이미지와 같습니다.
그럼, 화면상으로 보여지는것은 동일하지만, header, main, footer태그를 사용하지 않고, div태그만 사용하는 것에는 코드상으로 어떤 차이점이 있는지 아래의 코드를 보아주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>header, main, footer</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
<meta name="author" content="행운공장, 행운월드">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0; padding: 0; background:#eeeeee;}
* {text-align:center; }
#header {background:orange;padding:50px 0;}
#main {background:lightgreen;padding:100px 0;}
#footer {background:lightblue;padding:50px 0;}
</style>
</head>
<body>
<div id="header">
<h3>
header의 내용
</h3>
</div>
<div id="main">
<h3>
main의 내용
</h3>
</div>
<div id="footer">
<h3>
footer의 내용
</h3>
</div>
</body>
</html>위의 코드를 보면 레이아웃을 나눌때, 우선 div를 무조건 사용하고 id의 이름으로 위치를 알 수 있게한후, style을 id이름별로 주어서 코딩으로 구성합니다. 결과는 위의 이미지와 동일합니다. 궁금하신 분들은 꼭 직접 코딩으로 도전해 보세요.
div와 id를 사용해서 레이아웃을 구성해도 되지만, html태그만으로 위치를 바로 파악할 수 있어서, header, main, footer같은 레이아웃태그를 사용하기도 합니다.
어차피 화면상에서 코더의 의도대로 잘 표현되기만 하면 되고, 오류없이 보여지면 됩니다.
하지만, 전문적으로 코딩을 하시는 분들은 속해있는 회사의 규칙대로 코딩을 해야합니다.
개인이 독학으로 코딩을 공부할때는 막연하게 무조건 조금씩 진행하는 것도 방법이지만, 어떤 소규모의 목표를 가지고 도전해 보는것을 추천드립니다.
일종의 나만의 포트폴리오를 만들어 보겠다는 목표도 좋습니다.
안되는 것이 있거나, 궁금한 것이 있다면 댓글에 남겨주세요.
'코딩' 카테고리의 다른 글
| 에일리언 슈팅게임_모바일 (0) | 2020.12.28 |
|---|---|
| 에일리언 슈팅게임_pc전용 (0) | 2020.12.26 |
| 코딩_퍼즐게임_pc전용 (0) | 2020.12.20 |
| 코딩_타자게임_한글 날씨_동물_과일_채소 (0) | 2020.12.18 |
| 코딩_타자게임_한글인사말 (0) | 2020.12.13 |
댓글