티스토리 뷰

Programming Language/HTML, CSS, JavaScript

[HTML/CSS] 구조를 나타내는 요소와 시멘틱 웹

또야 2021. 11. 13. 16:21

구조를 나타내는 요소와 시멘틱 웹

의미의, 의미론적인 웹 or 태그!
요소의 의미를 고려해서 구조를 설계하는 것이다.
웹페이지들에는 메타데이터가 부여되어 있는데,
그 데이터들을 의미적인 데이터베이스로 구축하고자 하는 것이다.

non-semantic 요소(태그)는 컨텐츠에 대해 설명하지 않는다.
반면 semantic 요소는 컨텐츠의 의미를 명시(설명)한다.
먼저 non-semantic 요소부터 알아보자.

텍스트로 목적을 이해하기 어려울 수 있으므로,
마지막 목차인 '실습해보자'를 통해 더 알아본다.

🌙 non-semantic 요소

div

⭐ <div>는 division의 약자! 블록 레벨 요소!
통용 컨테이너의 역할이다.
내부에 컨텐츠가 없다면 눈에 보이지 않는다.
의미론적인 태그가 아닌 순수 컨테이너이기 때문이다.

스타일링을 묶어서 하기 위해 대부분 사용한다.
대체할 수 있는 <article>,<nav> 등이 있다면 사용하지 않아야 한다.

부모의 너비만큼 최대 너비를 가질 수 있다.
즉 너비의 기준이 부모의 너비가 된다는 것이다.

span

⭐ <span>은 인라인 컨테이너!
텍스트를 꾸밀 때 대부분 쓴다.
늘이면 늘이는 만큼, 줄이면 줄이는 만큼
자연스럽게 배치된다는 특징이 있다.

혹 블록 요소와 인라인 요소에 대한 개념이 부족하다면,
아래 공식문서를 참조하는 것을 추천한다.
이 두 요소에 대한 자세한 설명도 추후 포스팅할 예정이다.

블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 모든 너비를 차지한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements

인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

시멘틱 웹을 위해 non-semantic 태그를 필요 이상으로 남발하지 않는 것이 좋다.

🌙 semantic 요소

시멘틱 요소의 장점

페이지의 검색 랭킹에 영향을 줄 수 있다.
스크린리더로 읽을 때 인지하기 편하다.
개발자에게 태그 안에 무슨 데이터가 들어갈지 예상하기 편하게 한다.

header, footer

시맨틱 태그에 속하는 두 태그이다.

⭐ <header>는 소개, 탐색에 도움을 주며,
제목, 로고, 쓴 사람, 검색 창 등을 제공할 수 있다.

⭐ <footer>는 연관 사이트, 페이지 정보, 연락망, 저작권 등의 정보를 담는다.

이들은 전체 웹 페이지에 하나만 사용해야 한다.
대부분, 웹 페이지의 이동이 있어도 고정되게 보인다는 특징이 있다.

nav

navigation bar!
현재 어떤 페이지를 보고 있는지 링크를 나타낸다.
메뉴, 목차 등에 많이 쓴다.
작성하는 컨텐츠가 어떤 성격의 태그에 맞는지 항상 고민해야 한다.

aside

사이드 바를 만들 때 사용한다.
없어도 크게 문제가 없는 주제와 간접적인 컨텐츠들을 포함한다.

main

<body> 태그의 자식으로 하나만 사용 가능한 주요 영역이다.
더 쓰려면 hidden 속성을 써야한다.

IE와는 호환되지 않아서

<main role="main">
  <!-- 나는 메인! -->
</main>

과 같이 써주어야 한다.

main은 모든 주요 컨텐츠들을 아우르는 가장 바깥의 태그이다.

article

여러 개 사용이 가능하다.
독립적으로 배포/재사용이 가능한 컨텐츠를 포함한다.
게시판, 날씨, 뉴스 기사 등이 있고,
<section>과 상호 포함될 수 있다.
주로 제목 요소를 <article> 요소의 자식으로 지정한다.
인터넷 익스플로러(IE)와 호환성 문제가 없다.

section

<article>과 유사하지만 다른 태그.

둘 사이의 구분을 하는 쉬운 접근법은
<article>이 될 수 있으면 사용하되,
아니라면 <section>을 사용하는 것이다.

하나의 전체 컨텐츠(article) 안에 소개글 + 타 컨텐츠가 있다면
소개글 자체로는 단독적으로 이해할 수 없기에 <section>으로 지정한다.
<article>과 마찬가지로 제목 요소를 포함하면 좋다.

단순 스타일링이 목적이라면 <div>를 사용하라!
인터넷 익스플로러(IE)와 호환성 문제가 없다.

❗ 실습해보자 ❗

오늘 배운 시맨틱 태그와 각자의 역할을 인지하며
실습을 해보기로 했다.
있어도 못생긴 간단한 css와 함께..

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>실습</title>
    <style type="text/css">
      /* 귀여운 수준의 CSS */
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
      * {
        text-align: center;
        font-family: "Noto Sans KR", sans-serif;
      }
      header {
        margin: 5%;
        border: 3px solid black;
      }
      h1 {
        display: inline;
        font-size: 4em;
      }
      input {
        width: 30%;
        margin-left: 5%;
      }
      main {
        margin-bottom: 25%;
        border: 2px solid black;
      }
      section,
      aside {
        float: left;
        font-size: 2em;
        font-weight: bolder;
      }
      section {
        width: 50%;
      }
      aside {
        width: 30%;
        background-color: rgb(136, 136, 136);
        margin-top: 1.5%;
      }
      footer {
        clear: both;
        border: 3px solid black;
      }
    </style>
  </head>
  <body>
    <header>
      <!-- 주요한 제목과 검색 창 등을 header에! -->
      <h1>날씨를 알려드립니다!</h1>
      <input type="text" value="검색어를 입력하세요." />
    </header>
    <main>
      <section>
        <article>
          <!-- 독립적으로 이해 가능한 정보들을 article에! -->
          <h3>09-03 날씨</h3>
        </article>
        <article>
          <h3>09-04 날씨</h3>
        </article>
      </section>
      <aside>
        <!-- 부가적인 정보는 aside에! -->
        더 많은 날씨 정보는 <br />
        기상청에서 확인!
      </aside>
    </main>
    <footer>
      <!-- 저작권, 연락망, 연관 사이트 등을 footer에! -->
      <p>Copyright © likethefirst</p>
      <p>tel) 010-zero-zero</p>
    </footer>
  </body>
</html>

실습 코드 결과

가장 위 검정 테두리로 표시된 영역이 header 영역이다.
위에서 설명한대로 주요 제목과 검색 창을 나타냈다.

9월 3일의 날씨와 9월 4일의 날씨 각각을
article 요소로 만들어 독립적인 컨텐츠로 지정했고,
이들을 묶어 section으로 지정했다.

부가적인 내용은 side에 aside로 적용했고,
가장 아래 테두리 영역에 footer를 지정하여
이 블로그의 주소인 likethefirst와
연락처를 기입한 것을 볼 수 있다.

마무리

기본적으로 웹페이지(HTML 파일)를 구성하는 구조적인 태그와
시멘틱 웹, 시멘틱 태그에 대해 알아보았다.
section과 article은 혼동의 여지가 있어
각각 어떻게 응용하여 쓸 수 있는지 더 알아볼 필요성을 느낀다.
<좋은 예시가 있다면 댓글로 같이 소통했으면 좋겠습니다! 🔥>

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

'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글

[HTML/CSS] 임베디드 요소 (0)	2022.02.07
[HTML/CSS] 목록과 표 (0)	2021.11.15
[HTML/CSS] 메타데이터 요소 (0)	2021.11.10
[HTML/CSS] 텍스트 요소 (0)	2021.11.09
[HTML/CSS] HTML의 구조 (0)	2021.11.09

Notice.

Recent Post.

Recent Reply.

Thanks for comming.

오늘은: 명이 방문했어요

어제는: 명이 방문했어요

[WARNING] 또야주의