HTML5 기초 | 공간 분할 , 레이아웃 기초, 시멘틱 태그

현대의 웹페이지는 공간 분할 태그를 많이 사용한다.

공간 분할에 가장 중요한 태그는 div 와 span이다. div는 block 속성으로 구역을 나누고, span은 inline 형식이다.

예제를 본다. 좀 길어 보이지만 결국 단순한 형식이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div 
         {
             border: 5px ridge #f00;
             background-color: #ff0;
             padding: 5px;
             margin: 15px;
         }
         span 
         {
             border: 5px ridge #0f0;
             background-color: #0ff;
             padding: 5px;
             margin: 15px;
         }

    </style>
</head>
<body>
    <div>
        <h1>This is DIV</h1>
        <p>This is DIV</p>
    </div>
    <span>
        This is SPAN
        This is SPAN
    </span>
    <span>
        This is SPAN
        This is SPAN
    </span>
    <span>
        This is SPAN
        This is SPAN
    </span>
    <span>
        This is SPAN
        This is SPAN
    </span>
    <span>
        This is SPAN
        This is SPAN
    </span>
    <div>
        <h1>This is DIV</h1>
        <p>This is DIV</p>
    </div>
                    <span>
                        This is SPAN
                        This is SPAN
                    </span>
                    <span>
                        This is SPAN
                        This is SPAN
                    </span>
                    <span>
                        This is SPAN
                        This is SPAN
                    </span>
                    <span>
                        This is SPAN
                        This is SPAN
                    </span>
                    <span>
                        This is SPAN
                        This is SPAN
                    </span>
 
</body>
</html>

block 속성이라는 것은 블록처럼 단위당 줄바꿈이 있는 개념이고 inline은 옆으로 라인을 타고 있는 속성이다.

이 두개의 태그가 있지만 실질적으로 CSS의 도움 없이는 실질적으로 레이아웃을 짤 수는 없다.

따라서 여기서는 시멘틱 웹의 요소인 TAG를 알아본다.

시멘틱 웹은 과거 인터넷 초창기에 이미 나왔던 내용이다. 기계에게 의미 해석을 시킨다는 것이다. 사람이 보는 웹브라우저와 기계가 보는 웹프라우저의 의미가 다르므로 좀 더 기계에 친화적인 마크업을 하자라는 취지였다.

HTML5가 되면서 다시 부각이 되었다.

개인이 웹페이지를 만들면 저 내용들을 다 채우기는 어렵겠지만 개념을 알고 있으면 도움이 된다. 또 꼭 웹사이트를 만들지 않더라도 크롤링이나 다른 목적으로 웹사이트의 구성을 살펴보는데도 도움이 된다.

HTML5 표준은 아래처럼 홈페이지가 구성되어 있다. (출처: W3스쿨웹)

HTML Semantic Elements

HTML Semantic Elements Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content

www.w3schools.com

아래 다움의 페이지로 비교를 해보면 맨 위에 헤더가 있고, 다음은 nav 네비게이션 이 있다.

왼쪽에 뉴스,연예 등 섹션이 선택가능하고, 오른쪽은 개별 아티클 내용까지 표시된다

다음같은 경우는 워낙 카테고리가 많다 보니 아래로 내려가면 또 다른 섹션이 있고, 오른쪽에 aside 가 나온다. 쇼핑몰 광고이다

아래로 내려가니 포토와 푸터가 있다. 마침 박보검이 입대하고 있음;;;

비교해보니 꼭 맞지는 않지만 크게 보면 대략 맞는 것 같다.

그럴것이 천편일률적인 웹페이지만 있다면 그것도 하나 재미 없는 일일 것이다.

허나 헤더와 푸터, 그리고 네비까지는 어느 웹페이지를 봐도 거의 똑같아 보인다.

아무래도 브랜드 구축에 가장 유리한 구조라서 그런 것 같다.

개별적인 시멘틱 태그는 이것이 거의 다 인것 같다.

이 포스트에서 모든 요소를 설명하는 것은 어렵다. 참고문서는 MDN 문서를 추천한다.

시멘틱 태그를 사용한 예제를 하나 본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 자습하기</title>
     <script src="ckeditor5/src/ckeditor.js"></script>
</head>

<body> 
    <main>
        <h1>메인제목</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        
        <article>
          <h2>아티클</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolores expedita 
            quisquam a temporibus nulla tempora eaque reiciendis, sapiente nostrum, 
            accusantium sit exercitationem deserunt dolorem autem cumque laboriosam harum! Impedit.</p>
          <p>... </p>
          <p>... </p>
        </article>
        <article>
          <h2>아티클</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolores expedita 
            quisquam a temporibus nulla tempora eaque reiciendis, sapiente nostrum, 
            accusantium sit exercitationem deserunt dolorem autem cumque laboriosam harum! Impedit.</p>
          <p>... </p>
          <p>... </p>
        </article>
    </main>
</body>
</html>

평범하다. 시멘틱 태그는 그 자체에 특별한 기능이 있는게 아니니까 CSS로 잘 포장을 해줘야 제대로 쓸 수 있다. 그냥 위의 모습만 봐서는 네트워크의 검색 로봇들은 의미를 알겠지만 사람에게 의미가 약해진다. 그것은 이제 CSS의 역할이다. 다음이나 네이버 처럼 화려하면서도 짜임새 있게 구성하기 위해서는 CSS를 적용해야 한다.

물론 그 과정에서 div와 span도 중요한 역할을 할 것이다.

개별 태그에 대해서는 MDN 문서를 참고하는 것을 추천한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/main

HTML main 요소는 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

developer.mozilla.org