지난 글에서도 이야기했듯이 이번에는 레이아웃에 대한 태그 – header, aside, footer, section, article에 대해서 살펴보겠습니다. 백문이 불여일견이니 일단 아래에 있는 코드를 봅시다.

좌측은 html 소스 내용이고, 우측은 브라우저에 보여지는 모습입니다. 태그가 들어가고 내용이 들어가니 조금 복잡해보일 수 있지만, 이것을 계층 구조로 정리하면 아래와 같은 모습입니다.

  • header
  • div
    • section
      • h1
      • p
    • article
      • h2
      • p
  • aside
  • footer

꼭 문서 개요를 짜놓은것 같죠? 지난 번에도 이야기했지만 다시 한 번 강조하자면, html은 ‘웹 문서’를 작성하는 마크업 언어입니다. 브라우저에서 읽기 좋도록 문서를 작성하는 방법이죠.

재미있는 점은 h1이나 h2 태그는 글자가 다른 글자보다 굵고 크게 써있다는걸 알 수 있습니다. 기본적으로 제목으로 쓰이는 태그이기 때문이죠. 이렇게 태그마다 기본적으로 설정되어 있는 값들이 있지만, 우리는 이걸 CSS(Cascading Style Sheet)라는 것을 이용해서 변경해줄 수 있습니다.

이제는 CSS를 추가한 모습을 보여드리겠습니다. CSS에 h1 태그에 대해서 빨간색으로 칠하라고 써놓은 것 보이시나요? h1 { color: red; } 이런 식으로 대괄호로 묶은 곳 안에다가 color는 red(빨간색)이야 하고 정의해주는겁니다. 서술한 내용이 한줄이거나 여러줄로 작성할 경우 마지막 내용에는 ;(세미콜론)을 생략해도 되지만, 개인적으로는 가능하면 모두 적어주는 습관이 좋다고 생각합니다.

See the Pen
layout
by 배현기 (@illustudio)
on CodePen.

위의 태그는 header, section, article, aside, footer 태그를 각각 백그라운드 컬러를 지정해서 구분이 되도록 나눠준 상태입니다. 지난 번에 이야기했던 것처럼 위의 태그들 모두 block 속성을 기본적으로 갖고 있기때문에 가로폭을 100%씩 차지하고 있습니다.

그래서 층층히 쌓인 상태로 웹브라우저에 보여지는 것입니다. 우리가 원하는 웹 사이트의 모습은 컨텐츠가 무조건 아래로 나열되야할 경우도 있지만, 좌우로 나열되야 하는 경우도 있습니다. 이럴때도 역시 CSS를 이용해서 배치를 해줄 수 있는데, 이럴때는 좀 복잡한 문제들이 발생합니다. 보통 float를 이용해서 배치하는 경우가 많았지만, 요즘은 flex도 구형브라우저가 아니라면 사용할 수 있기때문에 점차 사용이 늘어나고 있습니다.

좀 더 진화한 방식의 grid라는 속성도 생겼지만, 익스플로러에서 지원하지 않는 문제로 우리나라에서는 모바일웹이 아니고서야 사용할 방법이 없습니다.  좋은 기능이 나와도 쓸 수 없다는건  무척 아쉬운 부분이죠.

이번 글에서는 대략적으로 레이아웃에 대한 태그 – main이라던지 nav와 같은 태그들도 있지만, 문서의 얼개를 구현해 줄 수 있는 태그들을 이야기하며 css에 대한 간단한 소개도 선보였습니다.

 

0

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of