24.HTML Layouts

 

 

See the Pen 01.CSS Layout Float by heunho (@heunho) on CodePen.

 

 

HTML 레이아웃 요소

---

웹 사이트는 종종 잡지 나 신문과 같이 여러 열로 콘텐츠를 표시합니다.

HTML은 웹 페이지의 다른 부분을 정의하는 몇 가지 의미를 가진 요소를 제공합니다.

 

 

<header> : 문서 또는 섹션의 헤더를 정의합니다.

<nav> : 네비게이션 링크를 위한 컨테이너를 정의합니다.

<section> : 문서에서 섹션을 정의합니다.

<article> : 문서 내에 일정 구역을 독립적으로 정의합니다.

<aside> : 사이드 바처럼 주요한 주제가 아닌 부차적인 내용을 정의합니다.

<footer> : 문서 또는 섹션의 바닥 글을 정의합니다.

<details> : 추가 세부 사항을 정의합니다.

<summary> : <details> 요소의 제목을 정의합니다.

 

 

 

 

 

HTML 레이아웃 기법

---

여러 레이아웃을 만드는데 5가지 방법이 존재합니다. 각 방법마다 장단점이 존재합니다.

• HTML 테이블 (권장하지 않음)
• CSS float 속성
• CSS flexbox
• CSS framework
• CSS grid

 

 

 

 

어느 방법을 선택해야 할까요?

---

HTML Tables

<table> 요소는 레이아웃 도구로 설계되지 않았습니다! <table> 요소의 목적은 테이블 형식의 데이터를 표시하는 것입니다. 따라서 페이지 레이아웃을 구현할 때 테이블을 사용하지 마세요. 테이블을 이용해 레이아웃을 짤 경우 유지보수가 매우 힘들어집니다.

---

CSS Frameworks

레이아웃을 빠르게 만들려면 W3.CSS 또는 Bootstrap과 같은 프레임 워크 (라이브러리)를 사용할 수 있습니다.

---

CSS Floats

CSS float 속성을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적입니다. float는 배우기 쉽습니다. float와 clear 속성이 어떻게 작동하는지 기억하면 됩니다. 단점 : floating 요소가 문서 흐름과 연결되어 있어 유연성이 떨어질 수 있습니다. 나중에 추가 번역할 CSS float and Clear 장에서 float에 대해 자세히 알아보십시오.

See the Pen 01.CSS Layout Float by heunho (@heunho) on CodePen.

 

---

CSS Flexbox

Flexbox는 CSS3의 새로운 레이아웃 모드입니다.

flexbox를 사용하면 페이지 레이아웃이 다른 화면 크기와 다른 디스플레이 장치를 수용해야 할 때 요소가 예측 가능하게 작동합니다. 단점 : IE0 및 이전 버전에서는 작동하지 않습니다.

See the Pen 02.CSS Layout Flexbox by heunho (@heunho) on CodePen.

---

CSS Grid View

CSS Grid 레이아웃 모듈은 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공하므로 웹 페이지를 보다 쉽게 디자인할 수 있습니다.

단점 : IE 나 Edge 15 이하에서는 작동하지 않습니다.

 

 

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Layouts