CSS - 레이아웃(layout)
display, float, clear, header, footer...
◼︎ 레이아웃이란?
• 웹 페이지에 박스, 텍스트, 이미지, 동영상 등 HTML요소들을 배치하는 것
• 수평방향 레이아웃 : inline
- <img>, <span>, <a>, <input>, <select>, <textreat> 등
• 수직방향 레이아웃 : block
- <h1~6>, <p>, <div>, <table>, <form>, <ul>, <ol>, <li> 등
◼︎ display 속성
• 속성값
- inline : 블록의 태그에 적용하여 블록을 인라인으로 변경
- block: 인라인 태그에 적용하여 인라인을 블록으로 변경
- inline-block: 인라인과 블록의 특성을 모두 갖게 하여 해당 요소를 가로방향으로 배치하고 요소의 크기를 설정할 수 있게 함
◼︎ float 속성 : 웹 페이지 요소를 왼쪽 또는 오른쪽에 배치할 때 사용하는 속성
- 공중에 떠서 존재하므로 바로 다음 요소와 겹쳐서 화면이 깨지는 현상 발생하기도 함
float: left;
float: right;
◼︎ clear 속성 : 위 float의 요소가 겹치는 문제 해결
- float 속성값을 해제
clear: left;
clear: right;
clear: both;
⦿ 웹 페이지 레이아웃
◼︎ HTML5 Layout Tag
• HTML5 : HTML 최신버전, 2014년 10월 W3C에서 최신 표준으로 제정
- <header>, <nav>, <section>, <aside>, <footer> 등 태그 추가
<header> : 웹 페이지 상단에 들어가는 요소 포함
<nav> : 웹 페이지 메뉴와 같은 요소에 사용하는 내비게이션 태그
<section> : 헤더, 내비게이션 메뉴, 사이드바, 푸터를 제외한 일반적인 콘텐츠 영역
<aside> : 사이드바
<footer> : 웹 사이트 최하단 요소를 포함하는 영역
◼︎ Webpage Layout
<header></header>
<nav></nav>
<section></section>
<aside><aside>
<footer></footer>
<끝>
