📍 HTML 레이아웃
처음 레이아웃을 사용했을 때는 단순한 텍스트의 정렬만 가능했다. 이후 순서대로 테이블, 프레임, box modelrhk float등을 이용해서 레이아웃을 구성했습니다. 현재는 시맨틱 마크업, flex, grid등을 사용한다. 이는 접근성, 최적화, 반응형 등에 따라 생겨난 기법입니다.
시맨틱 마크업 경우 구 브라우저 지원, 다른 프로그램과의 호환을 고려할 경우 사용하지 않는 경우도 있습니다.
✅ 시맨틱 태그
시맨틱 태그가 필요한 이유?
1. 웹 브라우저가 HTML 소스 코드만 보고도 쉽게 구조를 파악할 수 있다.
2. 문서 구조가 정확히 나누어지므로 다양한 디바이스에서 웹 문서를 표현하기 쉽다.
3. 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
• header 태그
: 소개, 탐색에 도움을 주는 태그로 회사명, 제목, 로고 등의 요소가 포함될 수 있다. 주로 사이트의 맨 위족이나 왼쪽에 있다. head 태그와는 다른 태그이다.
• nav 태그
: 현재 페이지에서 다른 위치 혹은 다른 페이지로 연결하는 링크를 보여준다. 페이지의 주요 탐색 링크를 위한 태그로 메뉴, 목차, 브레드크럼으로 사용된다.
• footer 태그
: 페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는 태그로 주로 사이트 맨 아래쪽에 위치한다.
• main 태그
: body의 주요 컨텐츠로 웹 페이지에서 한 번만 사용 가능하다. 메뉴, 사이드 바, 로고처럼 페이지마다 반복되는 정보는 넣을 수 없다.
• artical 태그
: 독립적인 콘텐츠를 답는 태그로 웹에서 실제로 보여주고 싶은 내용을 담는다. 주로 뉴스기사, 게시판, 매거진 등에 많이 사용한다. artical 태그를 여러 개 사용할 수 있고 section 태그를 넣을 수도 있다.
• section 태그
: 콘텐츠 영역을 나타낸다.
artical태그 vssection태그
:artical태그는 블로그 포스트처럼 독립된 콘텐츠를 묶을 때 사용한다.section은 앞뒤 문맥 연결성이 필요한 몇 개의 콘텐츠를 묶는 용도로 사용한다. 단순 스타일 적용을 위해 콘텐츠를 묶으려면div태그를 사용한다.
• aside 태그
: 본문 내용과 간접적으로 연관된 부분을 나타낸다. 보조적인 역할을 하기 때문에 사이드 바 영역을 나타낸다. 주로 각주, 광고 배너 등에 사용한다.
• hr 태그
: 주제가 변경되어 단락을 구분할 때 사용한다. p 태그 내에는 사용하지 않는다.
• 스타일링을 위해서만 사용하는 태그
div : 콘텐츠 분할 요소로 블록 컨테이너이다. 영역을 구분 짓거나 스타일 적용할 때 사용한다.
span : 인라인 컨테이너로 스타일을 적용하거나 인라인 요소를 묶을 때 사용한다.
📍 CSS 레이아웃
✅ float
• 물 위나 공중에서 떠가다, 뜨다는 의미로 웹 요소를 문서 위에 떠 있게 만든다.
/* HTML */
<div class='box'>BOX</div>
<div class='box-left'>BOX-LEFT</div>
<div class='box-right'>BOX-RIGHT</div>
/* CSS */
.box{ float: none; } /* 기본값 */
.box-left{ float: left; } /* 왼쪽 */
.box-right{ float: left; } /* 오른쪽 */Clear 속성
• float를 해제하기 위해 사용한다. float 속성을 사용하다 더 이상 float 속성이 유용하지 않다고 판단될 때 사용한다.
/* HTML */
<div class='box'>BOX1</div>
<div class='box'>BOX2</div>
<div class='box'>BOX3</div>
<div class='box'>BOX4</div>
/* CSS */
.box:first-child, .box:nth-child(2){ float:left; }
.box:nth-child(3), .box:last-child{ float:right; }
.box:last-child{ clear:both; }
자식 요소들 모두 float 속성을 가질 때
자식 요소가 모두 float 속성을 가지면 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는다.
해결방법
/* HTML */
<div class="container">
<div class='box'>BOX1</div>
<div class='box'>BOX2</div>
<div class='box'>BOX3</div>
</div>
• 부모에게 높이 값을 지정한다.
.container{
height:100px;
}• overflow:hidden을 사용한다.
.container{
overflow:hidden;
}• 부모의 가상 요소 ::after을 사용하는 clear-fix 방법을 사용한다.
.container::after{
content:'';
display:block;
clear:left;
}