[HTML] HTML 시맨틱, 레이아웃, 텍스트 태그

FrontEnd/HTML

[HTML] HTML 시맨틱, 레이아웃, 텍스트 태그

ss__jae2 2022. 9. 15. 15:04

1. HTML 시맨틱 태그

* Semantic(의미론적인, 의미있는) 의미론적인 이란 뜻으로 시맨틱 태그는 의미있는 태그라는 의미를 갖음
* 시맨틱 태그는 기능적인 태그가 아닌 의미만 가지는 태그

장점
- 시각장애가 있는 사용자에게 텍스트 판독기(스크린 리더)를 통해 의미 있는 내용을 전달하여 사용 가능하도록 제공(웹 표준, 웹 접근성)
- 태그를 기반으로 페이지 내 검색 키워드 우선순위를 판단
- 코드 블록의 가독성이 좋음

종류

<header>	페이지의 머리말을 의미하는 헤더 영역
<main>	사이트의 핵심 컨텐츠를 표시하는 영역 <nav> <aside> <section> <article> 등 포함 가능
<nav>	일반적으로 메뉴(네비게이션 링크)를 포함하는 영역
<section>	주제별 문서의 콘텐츠를 표시하는 영역 하나 이상의 <article> 포함 가능
<article>	섹션의 하위 항목으로 본문 이외의 개별 콘텐츠를 표시하는 영역
<aside>	좌/우측 사이드 영역으로 일반적으로 사이바라고 말함
<footer>	일반적으로 화면의 제일 하단에 위치 회사소개/저작권/약관 등을 표시
그외	<mark> <figure> <summary> <address> <iframe>

2. 시맨틱 예시

<body>
    <header>머리말</header>
    <main>
        <nav>
            <div>
                <span>홈</span>
                <span>메일</span>
                <span>뉴스</span>
            </div>
        </nav>
        <section>
            <article>
                첫번째 아티클(블로그 포스팅)
            </article>
            <article>
                두번째 아티클(블로그 포스팅)
            </article>
            <article>
                세번째 아티클(블로그 포스팅)
            </article>
        </section>
        <aside>
            <ul>
                <li>사이드바 메뉴 1</li>
                <li>사이드바 메뉴 2</li>
                <li>사이드바 메뉴 3</li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>바닥글</p>
        <span>회사소개</span>
        <span>서울 강남 역삼동...</span>
        <span>대표 : 홍길동</span>
    </footer>
</body>

<style>
    header, footer, nav, section, article, aside { padding: 10px; }
  
    body { margin: 0; }
    header { height: 40px; background: rgb(255, 181, 181); }
    main { height: calc(100vh - 240px); background: rgb(255, 248, 188); padding: 2px; position: relative; }
    footer { height: 200px; background: rgb(201, 223, 255); }
  
    header, main, footer {
      border: 1px solid gray;
      box-sizing: border-box;
    }
  
    nav { border: 1px solid rgb(255, 86, 86); }
    section { border: 1px solid rgb(117, 107, 255); height: calc(100% - 64px); width: calc(80% - 44px); }
    aside { border: 1px solid rgb(0, 133, 22); height: calc(100% - 68px); width: calc(20%); position: absolute; top: 45px; right: 2; }
    article { border: 1px solid rgb(233, 123, 255); height: calc(100% - 40px); width: calc(33.33333% - 26px); display: inline-block; }
</style>

3. HTML의 레이아웃, 텍스트 관련 태그

* 레이아웃 태그

<div>	범위 구분(Division 태그) - 블록으로 한줄을 모두 차지
<span>	좁은 범위 구분(Span) 태그 - 인라인으로 영역만 차지

* 텍스트 관련 태그

<h1> ~ <h6>	제목(Headline)을 나타내는 태그
<p>	텍스트의 단락(Paragraph)을 만드는 태그
<br>	텍스트의 줄바꿈(Break)을 만드는 태그
<strong><b>	텍스트의 굵게 강조(Strong)하기 위한 태그
<em><i>	기울인 텍스트를 입력해주는 태그

4. 레이아웃, 텍스트 태그 예시

<body>
    <div>DIV 태그 영역</div>
    <span>SPAN 태그 영역 1</span>
    <span>SPAN 태그 영역 2</span>
    <span>SPAN 태그 영역 3</span>
    <h1>H1 제목 태그</h1>
    <h2>H2 제목 태그</h2>
    <h3>H3 제목 태그</h3>
    <h4>H4 제목 태그</h4>
    <h5>H5 제목 태그</h5>
    <h6>H6 제목 태그</h6>
    <p>문단(Paragraph) 태그를 표시합니다.</p>
    <p>문단 태그에서 여기에서 줄바꿈을(br) 태그를<br/>넣으면 이처럼 줄바꿈이 되어 다음줄에 표시됩니다.</p>
    <p>문단 태그에서 <strong>강조(Strong) 태그</strong>를 사용하여 강조했습니다. </p>
    <p>문단 태그에서 <b>강조(Strong) 태그</b>를 사용하여 강조했습니다. </p>
    <p>문단 태그에서 <em>강조(Strong) 태그</em>를 사용하여 강조했습니다. </p>
</body>

<style>
    body { margin: 0; }
    div { background: rgb(255, 181, 181); }
    span { background: rgb(255, 201, 86); }
    p { background: rgb(139, 255, 86); }
    h1, h2, h3, h4, h5, h6 { background: rgb(196, 196, 196); }
</style>

저작자표시 (새창열림)