html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기

html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해 보기

네 여러분, 이번 포스팅에서는 html 문서를 구조화하는 방법에 대하여 알아보도록 하겠습니다.

우리가 전에 배운 html 문서를 만드는 방법은 매우 기본적임과 동시에 다소 중구난방 한 부분이 없지 않아 있었는데,

그러한 문서를 특정한 태그로 구조화를 시키면 화면상에서 좀 더 정리가 되어 보이고 깔끔해 보여서 가독성이 높아집니다.

그러한 방법으로 만들어낸 웹문서를 우리는 '시멘틱 웹'이라고 부르며,

그리고 이 시멘틱 웹을 만들 때 사용하는 태그를 '시멘틱 태그'리고 합니다.

그럼 지금부터 같이 한 번 보도록 하겠습니다.

1. html 시멘틱 태그 : header, nav, section, article, aside, footer 태그

html에서 사용하는 시멘틱 태그는 이러한 것들이 있습니다.

<header> : 페이지나 섹션의 머리말을 표현하는 태그
<nav> : 하이퍼링크들을 모아놓은 섹션이며, 주로 목차를 만들 때 사용을 함.
<section> : 문서의 장 또는 절을 구성하는 역할을 하는 태그이며, 보통 <h1> ~ <h6> 태그와 세트로 쓰임(소제목 관련 태그이기 때문)
<article> : 페이지의 본질을 훼손하지 않으면서 본문과 연관이 되어있으나, 독립적인 콘텐츠를 담는 태그
<aside> : 웹 페이지 내에서 간단한 메모나 설명글, 또는 삽입 글로 표시가 된 것들을 담는 태그이며, 본문의 내용과 조금은 벗어난 내용들을 담는 경우가 있기 때문에 웹 페이지의 오른쪽 또는 왼쪽에 주로 쓰이곤 함.
<footer> : 웹 페이지의 꼬리말을 표시를 하며, <section> 내에 있는 꼬리말을 담아내는 역할을 하며, 저작자, 저작권 관련 정보를 담곤 함.

그리고 이 태그들의 추가적인 특징은 이 태그가 모양을 만들어주지는 않는다는 것입니다.

우리가 문서의 모양을 편집을 하려면 css 스타일이라는 것을 이용을 해서 만듭니다.

css에 대한 부분은 추후에 다룰 것이며, 간단하게 말씀을 드리자면 <style>이라는 태그를 써서 씁니다.

그리고 <header> 태그나 <footer> 태그가 꼭 웹 문서 구조상 머리와 꼬리이긴 하지만,

무조건 그 룰을 지킬 필요는 없습니다.

하지만 틀을 지키는 것이 가독성을 위해서는 좀 더 바람직한 방향입니다.

그럼 간단한 예제를 통하여 한 번 살펴볼까요?

<!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>>HTML5 문서 구조 시멘틱 태그 사용</title>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</body>
</html>

이런 식으로 css 스타일 없이 사용을 했을 때는 결과 화면이 그냥 글들만 뜨면서 제대로 구조화가 이루어지지 않습니다.

그럼 결과 화면을 통하여 같이 보실까요?

그냥 이런 식으로 태그 내에 입력한 글자들만 출력이 되고, 제대로 체계화가 이루어지지 않은 걸 확인하실 수 있습니다.

그럼 css 스타일을 입혀서 시멘틱 웹을 만들어보면 어떨까요?
간단한 예제 코드를 통해 같이 보시죠.

<!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>>HTML5 문서 구조 시멘틱 태그 사용</title>
    <style>
        html, body {margin: 0; padding: 0; height: 100%;}
        header {width: 100%; height: 15%;
                background: yellow;}
        nav {width: 15%; height: 70%; float: left;
                background: orange;}
        section {width: 70%; height: 70%; float: left;
                background: olivedrab;}
        aside {width: 15%; height: 70%; float: left;
                background: orange;}
        footer {width: 100%; height: 15%; clear: both;
                background: plum;}
    </style>
</head>
<body>
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</body>
</html>

이렇게 css 스타일을 이용하여 각각의 태그의 사이즈를 조절해 주었고, 어디에 띄울 것인지, 그리고 어디에 위치하여 있는지 보여드리기 위해서 배경색을 각각 다르게 지정을 해줬습니다.

그럼 이에 따른 결과화면을 같이 보실까요?

이런 식으로 css 스타일에 따라서 웹 문서가 구조화가 된 것을 확인하실 수 있습니다.

이건 어디에 주로 어떤 태그를 위치시켜 주는지 보여주기 위해서 색깔을 저렇게 입혔는데,

실제로 사용을 할 때는 색을 입힐 때도 있지만, 보통은 색을 입히지 않는 경우가 많습니다.

아니면 색을 입히더라도 연한 색을 입히곤 합니다.

여기까지 html 시멘틱 웹에 대한 부분을 간단히 알아보았습니다.

다음 포스팅에서는 시멘틱 블록 태그에 대한 부분을 좀 더 추가적으로 다뤄보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > html' 카테고리의 다른 글

html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 (0)	2023.03.03
html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 (0)	2023.03.02
html video 태그와 audio 태그, source 태그로 미디어 삽입하기 (0)	2023.03.02
html target 속성에 대하여 알아보기 (0)	2023.03.02
html iframe 태그로 인라인 프레임 사용하기 (0)	2023.03.02

개발러 L의 뻔fun한 코딩

html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기