HTML 레이아웃(HTML Layouts)

HTML Layout Example

HTML 레이아웃 예제

Try it Yourself »

---

HTML Layout Elements

HTML 레이아웃 요소

Websites often display content in multiple columns (like a magazine or newspaper).

웹 사이트는 종종 잡지 나 신문과 같이 여러 열에 내용을 표시합니다.

HTML5 offers new semantic elements that define the different parts of a web page:

HTML5는 웹 페이지의 다른 부분을 정의하는 새로운 의미 요소를 제공합니다.

• <header> - 문서 또는 섹션의 머리글을 정의합니다.(Defines a header for a document or a section)
• <nav> - 탐색 링크를위한 컨테이너를 정의합니다.(Defines a container for navigation links)
• <section> - 문서의 섹션을 정의합니다.(Defines a section in a document)
• <article> - 독립적 인 독립 기사 정의(Defines an independent self-contained article)
• <aside> - 사이드 바처럼 콘텐츠를 제외하고 콘텐츠를 정의합니다.(Defines content aside from the content (like a sidebar))
• <footer> - 문서 또는 섹션에 대한 바닥 글을 정의합니다.(Defines a footer for a document or a section)
• <details> - 추가 세부 정보 정의(Defines additional details)
• <summary> - <details> 요소의 제목을 정의합니다.(Defines a heading for the <details> element)

---

HTML Layout Techniques

HTML 레이아웃 기법

There are four different ways to create multicolumn layouts. Each way has its pros and cons:

여러 열 레이아웃을 만드는 방법에는 네 가지가 있습니다. 각 방법마다 장단점이 있습니다.

• HTML 테이블 (권장하지 않음)(HTML tables (not recommended))
• CSS float 속성(CSS float property)
• CSS flexbox
• CSS 프레임 워크(CSS framework)

---

Which One to Choose?

어느 것을 선택할 것인가?

HTML Tables

HTML 표

The <table> element was not designed to be a layout tool! 

<table> 요소는 레이아웃 도구로 설계되지 않았습니다! 

The purpose of the <table> element is to display tabular data. 

<table> 요소의 목적은 표 형식의 데이터를 표시하는 것입니다.

So, do not use tables for your page layout! 

따라서 페이지 레이아웃에 테이블을 사용하지 마십시오!

They will bring a mess into your code. 

그들은 당신의 코드에 혼란을 가져올 것입니다. 

And imagine how hard it will be to redesign your site after a couple of months.

몇 달 후에 사이트를 재 설계하는 것이 얼마나 힘든지 상상해보십시오.

Tip: Do NOT use tables for your page layout!

팁 : 페이지 레이아웃에 테이블을 사용하지 마십시오!

---

CSS Frameworks

CSS 프레임 워크

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

레이아웃을 빠르게 만들려면 W3.CSS 또는 부트 스트랩 과 같은 프레임 워크를 사용할 수 있습니다 .

---

CSS Floats

CSS 수레

It is common to do entire web layouts using the CSS float property. 

CSS 플로트 속성을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적입니다.

Float is easy to learn - you just need to remember how the float and clear properties work. 

플로트는 배우기 쉽습니다. 플로트 및 투명한 속성이 어떻게 작동하는지 기억해야합니다.

Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. 

단점 : 플로팅 요소는 문서 흐름에 묶여있어 유연성에 해를 미칠 수 있습니다. 

Learn more about float in our CSS Float and Clear chapter.

CSS Float 및 Clear 장 에서 float에 대해 자세히 알아보십시오 .

Float Example

Try it Yourself »

---

CSS Flexbox

Flexbox is a new layout mode in CSS3.

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

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. 

flexbox를 사용하면 페이지 레이아웃이 다른 화면 크기와 다른 디스플레이 장치를 수용해야하는 경우 요소가 예상대로 작동합니다. 

Disadvantages: Does not work in IE10 and earlier.

단점 : IE10 이하에서는 작동하지 않습니다.

Learn more about flexbox in our CSS Flexbox chapter.

Flexbox에 대한 자세한 내용은 CSS Flexbox 장을 참조하십시오.

Flexbox Example

Try it Yourself »

---

CSS Grid View

CSS 그리드보기

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

CSS 그리드 레이아웃 모듈은 행과 열이있는 그리드 기반 레이아웃 시스템을 제공하므로 부유와 위치 지정을 사용하지 않고 웹 페이지를보다 쉽게 디자인 할 수 있습니다.

Disadvantages : Does not work in IE nor in Edge 15 and earlier.

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

Learn more about CSS grids in our CSS Grid View chapter.

CSS 그리드보기에 대한 자세한 내용은 CSS 그리드보기 장을 참조하십시오.

출처 : W3School.com