HTML 레이아웃, 반응형 웹 디자인

1. HTML 레이아웃 요소

잡지나 신문처럼 여러 행에 내용을 담고 있는 것처럼 서로 다른 영역에 서로 다른 내용 요소를 담을 수 있다.

• <header> - 문서나 각 섹션의 머릿말 부분 
• <nav> - '탐색메뉴'라고 하면 적절하려나, 네비게이션 링크의 정보를 담는 영역
• <section> - 문서 안의 한 부분
• <article> - 개별적인 한 기사가 실리는 부분
• <aside> - 사이드바 처럼 내용 옆 부분
• <footer> - 웹페이지 하단 부분에 실리는 각주
• <details> - 추가적인 세부정보
• <summary> - <detail> 영역의 제목 영역

 

2. HTML 레이아웃 기술

• HTML tables (not recommended)
• CSS float property
• CSS flexbox
• CSS framework
• CSS grid

HTML tables (not recommended)

표를 만드는 <table>요소는 행을 만들 순 있지만 레이아웃용은 아니므로, 비추천.

 

CSS float property

W3.CSS나 bootstrap과 같은 프레임워크로 만드는 방법

 

CSS flexbox

배우기는 쉽지만 문서에 고정되어서 바꾸기가 어려움

 

CSS framework

달라지는 스크린 사이즈나 장치에 맞게 페이지 레이아웃을 변화

 

CSS grid

열과 행의 격자무늬 시스템에 기반하여 레이아웃을 만드는 것

 

 

3. HTML 반응형 웹 디자인

데스크탑, 태블릿, 폰 등 모든 장치에서 잘 보이도록 HTML, CSS가 자동적으로 변화하게 하는 웹 디자인으로 <meta>요소를 사용한다. <meta name="viewport" content="width=device-width, initial-scale=1.0">와 같이 쓸 수 있다. 

 

화면에 따라 맞게 사진크기, 줄바꿈 등으로 보기 편한 웹 페이지를 제공한다.

 

max-width

max-width=100%를 사용하면 원래 사진 크기모양까지 커질 순 있지만 그 이상 화면을 채울 정도로 커지진 않는다.

 

<picture>...</picture>

<picture>태그를 사용하면 화면 폭의 길이에 따라서 사용되는 사진을 다르게 할 수 있다. 

 

vw: viewpoint width

font-size: 10vw를 스타일 속성으로 사용하면 화면 크기에 따라서 글자 크기를 달리 할 수 있다.

1vw는 화면의 1%를 말한다. 

<h1 style="font-size:10vw">Hello World</h1>

 

media queries

다른 사이즈의 브라우저에 다른 스타일을 정의한다.

<style>
.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>