thinkNote

▶ 웹 사이트는 종종 여러 열에 잡지나 신문같은 콘텐츠를 표시한다.

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float 

■ HTML 레이아웃 요소

▶ HTML은 웹 사이트의 다른 부분을 정의하는 여러 의미적 요소가 있다. 

▷ <header> - 색션이나 문서의 헤더를 정의한다.

▷ <nav> - 탐색 링크의 집합을 정의한다.

▷ <section> - 문서의 섹션을 정의한다.

▷ <article> - 독립적이고 독립적인 콘텐츠를 정의한다.

▷ <aside> - 사이드바와 같이 콘텐츠와 별개로 콘텐츠를 정의한다.

▷ <footer> - 섹션이나 문서의 바닥글을 정의한다.

▷ <details> - 사용자가 필요에 따라 열고 닫을 수 있는 추가 세부 정보를 정의한다.

▷ <summary> - <details> 요소에 대한 제목을 정의한다.

■ HTML 레이아웃 기술

▶ 여러 열 레이아웃을 만드는 데는 4 가지 기술이 있다.

▶ 각 기술에는 장단점이 있다.

▷ CSS framework

▷ CSS float property

▷ CSS flexbox

▷ CSS grid

■ CSS Frameworks

▶ 레이아웃을 빠르게 만들고 싶다면 bootstrap 혹은 W3.CCC 같은 CSS framework를 사용할 수 있다.

■ CSS Float 레이아웃

▶ CSS "float" 속성을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적이다.

▶ "float"는 배우기 쉽다 - "float"와 "clear" 속성이 어떻게 작동하는지 기억하기만 하면 된다.

▶ 단점 : floating 레이아웃은 문서 흐름에 연결되어 유연성을 해칠 수 있다.

▶ float를 더배우고 싶다면 링크에서 확인한다 - https://www.w3schools.com/css/css_float.asp

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float 

■ CSS Flexbox 레이아웃

▶ flexbox를 사용하면 페이지 레이아웃이 다양한 화면 크기와 다양한 디스플레이 장치를 수용해야 할 때 요소가 예측 가능하게 작동한다.

▶flexbox를 더 배우고 싶다면 링크에서 확인한다. - https://www.w3schools.com/css/css3_flexbox.asp

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox 

■ CSS Grid 레이아웃

▶ CSS Grid 레이아웃 모듈은 행과 열이 있는 그리드-기반 레이아웃 시스템을 제공하여 floats와 위치 지정을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있다.

▶ Grid를 더 배우고 싶다면 링크에서 확인한다 - https://www.w3schools.com/css/css_grid.asp

출처 : https://www.w3schools.com/html/html_layout.asp