HTML5 - 레이아웃 구성 태그 div, span 및 시멘택 태그 header, nav, section, footer

액트 2019. 7. 8.

아래 사진은 block 구조 및 inline 구조 입니다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>block_01</div>
    <div>block_02</div>
    <div>block_03</div>
    <div>block_04</div>
    <div>block_05</div>

    <br /><br />

    <span>inline_01</span>
    <span>inline_02</span>
    <span>inline_03</span>
    <span>inline_04</span>
    <span>inline_05</span>
</body>
</html>

div

블럭 요소, 개행<br>이 없지만 하나씩 블록 쌓듯이 개행이 적용되어 나타나는 태그 ex) <p>, <li>

span

라인 요소, 한줄로 표시되는 태그

div를 활용한 레이아웃 구성

가독성이 낮은 table 구조를 빼고 div 태그를 활용하여 개발하는 추세이다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div> <!-- header 태그 교체 -->
        <h1>MY HOMEPAGE</h1>
        <hr />
    </div>

    <div> <!--nav 태그 교체 -->
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
        <hr />
    </div>

    <div> <!-- section 태그 교체 -->
        <h1>What is HTML5?</h1>
        <p>HTML5 is good!</p>
        <hr />
    </div>

    <div> <!-- footer 태그 교체 -->
        <p>xxx주식회사 서울시 00구00동</p>
    </div>
</body>
</html>

시멘택 태그

div 태그를 header, nav, section, footer 태그를 활용한 태그

검색엔진 및 개발자가 빨리 해석할 수 있도록 하는 태그 방식

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <header>
        <h1>MY HOMEPAGE</h1>
        <hr />
    </header>

    <nav>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JAVASCRIPT</li>
            <li>JQUERY</li>
        </ul>
        <hr />
    </nav>

    <section>
        <h1>What is HTML5?</h1>
        <p>HTML5 is good!</p>
        <hr />
    </section>

    <footer>
        <p>xxx주식회사 서울시 00구00동</p>
    </footer>
</body>
</html>

'IT > Web' 카테고리의 다른 글

CSS3 - CSS id(#) class(.) /속성/후손/자손/동위 선택 (0)	2019.07.09
CSS3 - CSS 기본, 선택자 (0)	2019.07.08
HTML5 - 폼 태그 및 GET 방식과 POST 방식 (0)	2019.07.08
HTML5 - 멀티미디어 태그 (0)	2019.07.08
HTML5 - 태그 설명 (0)	2019.07.08