기본적인 레이아웃 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 기본적인 레이아웃
    learn
    Practice
    learn
    03 HTML 기초
    기본적인 레이아웃

      지금부터 본격적으로 <body> 태그 안에 들어가는 여러 가지 태그에 대해 배워 봅시다. 가장 먼저 웹 사이트의 기본이 되는 레이아웃(Layout)과 이와 관련된 태그에 대해 소개하겠습니다.

      아래의 이미지는 우리가 흔히 볼 수 있는 일반적인 형식의 웹 사이트 모식도입니다. 영어 뜻만으로도 각각의 역할을 유추할 수 있습니다. 먼저 보이는 것과 뜻으로 어떤 역할을 할지 유추해 보시기 바랍니다.

      많은 개발자가 웹 사이트를 개발할 때 위와 같은 레이아웃을 선호하자, HTML5에서는 해당 레이아웃을 아예 태그로 만들어 각 요소의 쓰임을 명확하게 구분하였습니다. 이러한 태그를 아울러 시맨틱 태그(Semantic tag)라고 부릅니다.

        Semantic은 '의미론적'이라는 뜻을 가진 단어입니다. 이 단어에서 알 수 있듯이 시맨틱 태그는 의미를 가지는 태그로, 나눠진 구획의 기능을 태그 이름만으로도 이해할 수 있습니다. 물론 읽는 것은 컴퓨터가 수행하죠. 이렇게 구조를 정의하는 시맨틱 태그에는 매우 여러 가지가 있지만, 그중 가장 중요한 몇 가지만 다뤄 보도록 하겠습니다.

        • <header>
          : 웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소입니다. <head> 태그와 혼동하지 않도록 유의합니다.
        • <nav>
          : 내비게이션 역할을 수행하는 요소로, 페이지 이동을 위한 메뉴를 주로 담습니다.
        • <section>
          : 기준에 따라 구획을 구분하기 위해 사용하는 요소입니다. 기준에 맞는 <article>들을 담습니다.
        • <article>
          : 주 내용을 담기 위해 사용하는 요소입니다.
        • <aside>
          : 광고 또는 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소입니다.
        • <footer>
          : 일반적으로 웹 사이트의 가장 아래에 들어가는 회사 정보나 사이트 정보 등의 추가 정보를 담기 위해 사용하는 요소입니다.

        이렇게 컨텐츠를 HTML 태그로 잘 구분하여 코드를 작성하면 컨텐츠가 알아서 배치될 것으로 생각되지만 그렇지 않습니다. 배치까지 완료하려면 CSS를 적용해야 하죠. 아직 갈 길이 멀었지만, 차근차근 배워나가면 무서운 것이 없습니다.

        Practice

        직접 텍스트를 변경해보고 어떤 종류의, 어떤 용도의 레이아웃이 있는지 확인합니다.

        learn
        Practice
        Q & A
        Q&A forum that anyone can ask and answer.
        Share your questions and answers with other students and grow together!
        Registered Questions(0)