HTML 콘텐츠 영역 구성 방법

 

 

안녕하세요 무택입니다 :)

오늘 알아볼 내용은 HTML을 구성할 때 어떤 식으로 section을 구분하고 콘텐츠 영역을 어떻게 구성할지에 대한 내용입니다. HTML 파일을 많이 만들어보신 분들은 익숙한 내용이지만 처음 접하거나 많이 접하지 않은 분들은 콘텐츠 영역을 어떻게 구성해야 할지 막막할 때가 있습니다. 그런 분들을 위해 내용을 한번 준비해 봤습니다.

 

# 이런 분들이 보면 좋아요

 - HTML을 처음 접하시는 분

 - 반응형 웹에 대한 기초 지식이 필요하신 분

 - 다른 사이트의 contents 영역이 어떻게 구성되는지 궁금하신 분

 

 

# 예시 코드

<header></header>

<main>

  <section>
  
    <div>contents div</div>
    
  </section>
  
  <section>
  
    <div>contents div</div>
    
  </section>
  
</main>

<footer></footer>

일반적인 홈페이지의 큰 틀은 이렇습니다.

 

시맨틱 태그가 활성화되기 시작하면서 div만 사용하던 옛날과는 달리 header 영역에는 header 코드를 main영역에는 main코드를 사용하는 게 검색엔진 최적화에 맞기 때문에 시맨틱 코드를 사용해서 구성해 주는 게 좋습니다.

 

그래서 main코드로 큰 틀을 잡고 그 안에 section코드로 세부 영역을 나눕니다. 그리고 그 안에 contents가 들어갈 div를 만들어 구성해 주면 기본적인 틀이 만들어집니다. 이런 식으로 구성하고 반응형 코드를 조금 넣어주면 간단한 반응형 코드를 만들 수 있습니다.

 

 

# 반응형 코드

모니터가 큰 사용자가 웹사이트에 들어왔을 경우 가로 사이즈가 1920px이 넘는 경우가 있습니다. 그럴 경우 contents 영역의 가로 사이즈를 잡아놓지 않으면 콘텐츠들이 가로로 넓게 퍼지는 경우가 있습니다. 그럴 경우를 대비해서 contents div를 설정해서 'max-width: ...'를 설정해 놓으면 콘텐츠 영역이 퍼지지 않게 방지할 수 있습니다.

 

 

#예시 사이트

위의 내용을 적용한 사이트를 보면 이해가 쉬울 수 있습니다.

예시 사이트에서 보면 section을 잡아놓고 그 안에 div태그를 활용해 contents들을 넣은 것을 볼 수 있습니다. 이런 식으로 html파일을 구성하면 검색엔진에 최적화시킬 수 있고 모니터가 큰 화면의 경우를 대비할 수 있습니다.