HTML 07 - 블록 태그(Block Tag)(2)

 안녕하세요. 찰리입니다. 

 이번에도 HTML5 시간으로 찾아왔습니다. 그림 포스팅을 기다리시는 분들도 계실텐데 안타깝게도 이번 역시 코딩 포스팅이 되었습니다. 오늘도 지난 시간에 이어서 블록 태그들을 소개할텐데요. 바로  시작해보겠습니다. 

 footer - 풋터(footer) 부분을 정의하는 태그 

 section - 부분(section) 문서를 정의하는 태그 

 article - 문서의 네비게이션 링크(메뉴 등)를 정의하는 태그 

 aside - 문서의 메인 콘텐츠를 정의하는 태그 

 오늘의 첫 번째 태그는 footer 태그입니다. 풋터 부분을 정의한다고 하는데 웹사이트의 하단 부분이라고 보시면 되겠습니다. header 태그의 반대 개념이라고 보면 되겠죠? section 태그는 단어 그대로 섹션으로 나누어진 부분의 태그입니다. article 태그 역시 section 태그 처럼 단어 내용을 그대로 정의하는 태그입니다. 마지막으로 소개할 aside 태그는 문서의 가장 자리에 자리하게 되는 부분들을 정의할 때 사용합니다. 물론 이전에 소개했던 태그들처럼 정의만 할 뿐 태그 이름에 맞는 내용이 꼭 들어가야하는 것은 아니죠. 하지만 정리가 잘 되려면 이름에 맞는 내용들을 삽입해 주는 것이 좋을 것 입니다.  

 간단하게 사용법도 알아볼까요?  
 
 예) 
<footer>내용</footer>

<section>내용</section>

<article>내용</article>

<aside>내용</aside>

 사용법 역시 기본적인 방법으로 열고 닫으며 사용하시면 되겠습니다. 지난 시간의 태그들의 이름까지 생각해서 구성을 해보자면

 <header>header
  <nav>nav</nav>
 </header>
 <main>
  <section>
    <article>내용1</article>
    <article>내용2</article>
    <aside>내용3</aside>
  </section>
 </main>
 <footer>footer</footer>

 이런 느낌으로 구성을 해 볼 수 있겠습니다. 머리부분에 header / 본 내용에는 main 과 section, article, div 등으로 채우고, 가장 아래에 정보 부분에는 footer를 이용하는 것 입니다. 아직 다른 콘텐츠 태그들이더 남아있기 때문에 지금은 이런 식으로 구성이 가능하다 정도로만 생각하겠습니다.  

 이제 직접 사용하면서 더 살펴볼게요.

<준비물>
 에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.

 #블록 태그(Block Tag)(2)(footer / section / article / aside)

  Step 1 - 지난 시간 사용했던 index.html 파일과 브라우저를 열어서 깨끗하게 정리했습니다.

 비어있는 body 태그 속에 footer, section, article, aside 태그를 간단하게 작성해서 저장하겠습니다.

 브라우저로 보면 한 줄 씩 태그 속 내용들이 나타나는 것을 확인 할 수 있습니다.  

  Step 2 - 지난 번 처럼 이번에도 F12 혹은 브라우저 설정 메뉴에서 개발자도구를 실행해서 블록 태그들의 영역이 어떻게 나타나는지 확인해 볼게요.

  Step 3 - 다시 메모장으로 돌아와서 지난 시간에 못 보여들였던 인라인 태그와 블록태그의 차이를 보여드릴게요. 인라인 태그 중 하나인 <b>태그를 작성하고 브라우저에서 확인하겠습니다.

 개발자 도구를 통해 살펴본 <b>태그는 해당 내용의 크기 만큼만 표시가 됩니다.

 다른 블록 태그들 처럼 한줄 전체를 차지하고 있지 않아요.

  Step 4 - 이번에는 지난 시간에 알아본 header / nav / main 도 함께 사용해서 구성을 해보겠습니다.

 브라우저에서 확인해보면 블록태그들 답게 아래로 정리되는 모습을 볼 수 있습니다.

 여기서 좀 더 모양새가 있어보이게 제목부분에는 h1~h6 태그들을 함께 넣어볼게요. 

 뭔가 모양새가 만들어져가는 것 같습니다. 오늘은 여기까지 입니다.

 #영상으로 보겠습니다. 

 텍스트 미디어 뿐이지만 웹사이트의 형태가 조금식 갖춰지는 것 같지 않나요? 코딩 공부라는게 옆에서 봤을 때는 알 수 없는 영어 단어들이 어두운 화면 속에 이리저리 나열되어 있어 재미없어 보이지만 다르게 보면 화면에 코드들도 그림을 그리는 행위라는 생각도 들어요. 그 그림은 단순하게 글자로만 이루어질 수도 어떤 이미지가 될 수도 있고 애니메이션이나 영상이 될 수도 있겠죠? 다음 시간부터는 그런 콘텐츠를 다룰 수 있는 태그들을 하나씩 소개해 보겠습니다. 다음에 만나요.  

네이버TV에서 영상보기