HTML 06 - 블록 태그(Block Tag)(1)

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

 거의 한 달 정도 만에 HTML5 시간으로 찾아왔습니다. 오늘도 가볍게 태그 4가지만 소개해볼 생각인데요. 이번에 알아볼 태그는 블록 태그라는 주제로 묶어보았습니다. 블록 태그는 제가 만들어낸 단어는 아니구요. 태그의 성질 중에서 한 줄 영역을 다 사용해서 블록처럼 위아래로 쌓이느냐 아니면 아니면 콘텐츠의 크기만큼만 영역을 사용하고 바로 옆으로 다음 태그를 붙여서 사용하느냐의 차이입니다. 한 줄을 다 사용하면 블록 태그이고 그렇지 않다면 인라인 태그라고 불리는 것 같습니다.
 지금까지 소개됐던 태그들 중에도 블록태그와 인라인 태그들이 있었는데요. <p>, <h1>~<h6> 태그의 경우에는 사용할 때 마다 바로 바로 줄이 바꼈었죠? 이런 태그를 블록태그라고 하고요. <b>,<i> 태그 처럼 내용에만 영향을 끼치거나 줄바꿈이 일어나지 않는 태그들은 인라인 태그라고 할 수 있습니다.
 여기서 주의해야 할 점은 줄바꿈이라고 해서 문서 형식으로써의 <br>태그같은 줄바꿈이 아니라 영역이 완전히 분리되는 줄바꿈이라는 것 입니다. 그리고 참고로 <br>태그는 기능적인 태그로 인라인 태그에 속합니다. 
 그렇다면 오늘 소개할 태그들은 같은 블록 태그임에도 왜 <p> 태그나 <h1>태그처럼 다른 주제가 아닌 블록 태그로 묶었을까요? 그 이유는 오늘 소개할 태그들이 정말 블록 태그로써의 기능만 하기 때문이죠. 한번 만나볼까요?

 div - 문서를 정의하는 태그 

 header - 문서의 머리(윗부분)을 정의하는 태그 

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

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

 이 4가지의 기능은 이 태그 안에 이러이러한 콘텐츠를 넣는 것을 추천합니다 라는 의미의 정의하는 것이 다 입니다. div 태그 같은 경우 무슨 내용이든 다 집어넣을 수 있는 태그라는 것을 알 수 있습니다. 그렇다면 div 만 있어도 될텐데 그 아래의 태그들은 왜 생겨났을까요? 예전에는 실제로 div 태그만이 있었고 아래의 태그들은 없었습니다. 하지만 웹사이트를 제작함에 있어서 공통적으로 나누어지는 부분들이 생겨나기 시작했을테고 div에 속성을 부여해서 영역을 나누게 되면 코드의 낭비도 생겨나겠죠? 그러니까 이용자들이 자주 사용하는 행동들이 반영된 결과라고 생각하면 되겠습니다. 지금은 단순하게 각각 저런 이름들로 영역을 나눌 수 있구나 정도로만 이해하면 되겠습니다. 

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

<header>내용</header>

<nav>내용</nav>

<main>내용</main>

 사용법이 정말 간단하죠. 단순하게는 이렇게 따로 사용하면 되고 예전에 알아본 것 처럼 부모 태그와 자식 태그로 나누어서 각 태그들을 필요에 따라서 포함시키는 형태로 사용하시면 되겠습니다.

 이제 영상 화면을 보면서 조금 더 살펴볼게요.

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

 #블록 태그(Block Tag)(1)(div / header / nav / main)

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

 그리고 바로 div, header, nav, main 태그를 간단하게 작성해서 저장하겠습니다.

 브라우저로 보면 깔끔하게 한줄씩 나타나죠.   

  Step 2 - 여기서 F12 혹은 브라우저 설정 메뉴에서 개발자도구를 실행합니다. 개발자 도구는 대부분의 브라우저에 포함된 기능이고 대부분 F12가 단축키로 설정되어 있을 것 입니다. 
 개발자 도구에는 현재 페이지가 어떻게 구성되어있고 어던 소스들이 연결되어 있는지 등이 보여집니다. 그리고 그 외의 다양한 기능들이 있는데 저도 테스트 할 때 외에는 잘 사용하지 않아서 깊숙한 기능은 잘 알지 못합니다. 이번 시간에는 블록 태그들의 영역이 어떻게 형성되어있는지 보기 위해 실행해보았습니다. 

 보시다 시피 파란영역으로 각 태그가 차지하고 있는 영역을 보여주고 있습니다. 글자가 포함된 부분 외에 그 줄 전체를 포함하는 것을 볼 수 있습니다.

  Step 3 - 간단하게 div 내부에 다른 태그들을 다시 배치해볼게요. header 안에는 nav 태그도 넣어볼게요.

 그리고 다시 브라우저에서 확인해보겠습니다.

 많이 변할 것은 없습니다. 하지만 개발자도구를 통해서 어떤 태그가 얼마만큼 영역을 차지하는지 변화가 보입니다.

  Step 4 - 마지막으로 약간의 구성을 만들어볼게요. main 태그 안으로 콘텐츠를 넣을 div 태그를 몇 개 넣었습니다.

  브라우저에서 다시 확인해보면 크게 변한 것은 없지만 태그들이 쌓여있는 것이 보입니다. 

 그냥 단순하게 태그들을 쌓은 것 같지만 간단한 웹사이트 구성으로 볼 수도 있습니다. 웹사이트의 구조는 이렇게 만들어집니다.

 #영상으로 보겠습니다. 

 다음 시간에도 블록 태그 몇 가지를 더 소개하겠습니다. 조금씩 웹사이트에 필요한 것들이 갖춰지는 것 같네요. 아직 콘텐츠와 관련된 태그들이 나오지 않아서 심심해 보이지만 얼마남지 않았습니다. 조금 더 힘내봅시다. 다음 시간에 만나요.

네이버TV에서 영상보기