CSS 레이아웃
CSS 레이아웃 입문서
nomal flow
일반흐름(nomal flow)은 페이지 레이아웃을 제어하기위해 아무것도 하지 않을 경우, 브라우저가 기본값으로 HTML을 배치하는 방법을 말한다.
display
CSS 상에서 페이지 레이아웃을 구현하는 주요 방법은 display 속성에 포함된 값을 지정하는 것이다. block, inline, inline-block 과 같은 속성값 은 nomal flow속에서 동작하는 방식을 변경할 수 있다. display 속성값 지정을 통해 활성화 될수있는 전체 레이아웃 메서드 도 존재한다. 바로 grid 와 flex 이며 부모요소 내부에 자식 요소가 배치되는 방식을 변경할 수 있다.
•
flex : 행이나 열을 한 차원으로 쉽게 레이아웃 할 수있도록 설계된다. 레이아웃 하려는 요소의 부모요소에 display:flex 를 적용하면 모든 직계 자식이 플렉스 항목이 된다.
•
flex 속성 설정하기 : 플렉스 콘테이너에 적용할 수 있는 속성 외에도 플렉스 항목에 적용할 수 있는 속성도 있다 이러한 속성은 항목이 플렉스 되는 방식을 변경하여 사용가능 한 공간에 따라 항목을 확장하거나 축소할 수 있다.
.wrapper {
display: flex;
}
.wrapper > div {
flex: 1;
}
CSS
복사
<div class="wrapper">
<div class="box1">하나</div>
<div class="box2">둘</div>
<div class="box3">셋</div>
</div>
HTML
복사
<before> flex:1; 안줬을때
<after> flex:1; 줬을때
•
grid : 플렉스 박스는 일차원 레이아웃을 위해 설계된 반면, 그리드 레이아웃은 행과 열로 정렬하는 이차원 레이아웃을 위해 설계됬다.
•
float : 플로팅 된 요소는 왼쪽이나 오른쪽으로 이동되어 nomal flow 에서 벗어나게 되며 주변 콘텐츠가 그주위에 떠 있게된다. 값은 4가지가 있다.
◦
left - 요소를 왼쪽으로 띄운다.
◦
right - 요소를 오른쪽으로 띄운다.
◦
none - 기본값. 플로팅을 하지않는다.
◦
inherit - 플로팅 속성의 값을 요소의 부모 요소에서 상속하도록 지정한다.
flex, grid 레이아웃 같은 기술이 나오기 이전엔 float는 열 레이아웃을 만드는 방법으로 사용됐다.•
position : nomal flow 에서 배치되는 위치에서 다른 위치로 이동할 수 있다. 페이지에서 특정 항목의 위치를 관리하게 미세하게 조정하는데 사용된다. 5가지 유형이 있다.
◦
static : 기본값 으로 부여된 속성이다.
◦
relative : 페이지에서 요소의 위치를 수정하여 nomal flow 위치에 비해 상대적으로 이동하고, 페이지의 다른 요소와 겹치도록 만들수 있다.
◦
absolute : 페이지의 일반적인 레이아웃 흐름에서 완전히 벗어나 마치 별도의 레이어에 있는 것처럼 이동 시킨다. 여기에서 가장 가까운 위치에 있는 상위 요소의 가장자리를 기준으로 한 위치를 고정할 수 있다.(다른 상위 요소가 없는 경우<html> 이 기준이 된다.) 이 기능은 서로 다른 콘텐츠 패널이 서로 겹쳐져 있고, 원하는 대로 표시되거나 숨겨지는 탭 상자나, 기본적으로 화면 밖에 있지만 제어 버튼을 사용하여 화면에서 슬라이드 되도록 만들 수 있는 복잡한 레이아웃 효과를 만드는데 유용하다.
◦
fixed : 브라우저 뷰포트를 기준으로 요소를 고정한다는 점을 제외하면 absolute 포지셔닝과 매우 유사하다. 이방법은 콘텐츠가 스크롤될때, 항상 화면의 같은 위치에 유지되는 영구 탐색 메뉴와 같은 효과를 만드는데 유용하다.
◦
sticky : relative와 fixed 를 혼합한 것이다. 뷰포트 기준에서 오프셋에 도달할 때 까지 일반흐름으로 스크롤 된다. 이시점에서 fixed가 적용된것처럼 고정된다
테이블 레이아웃
HTML 테이블은 테이블 형식의 데이터를 표시하는데 적합하지만 기본적인 CSS조차 안정적으로 지원되기 전에는 웹 개발자가 전체 웹 페이지 레이아웃에도 테이블을 사용하여 머리글, 바닥글, 열 등을 다양한 테이블 행과 열에 넣곤 했었다. 당시에는 효과가 있었지만 테이블 레이아웃이 유연하지 않고, 마크업이 매우 무거워지고, 디버깅이 어렵고 의미상 잘못된 많은 문제점이 있었다. 레이아웃에 CSS테이블을 사용하는 것은 현재로서는 레거시 방법으로 간주되어야 하며, 플렉스박스 나 그리드를 지원하지 않는 구형 브라우저를 지원할 때만 사용해야 한다.
다단 레이아웃
신문에서 텍스트가 흐르는 방식과 유사하게 콘텐츠를 열로 배치하는 방법을 제공한다. 한 블록을 다단 컨테이너로 바꾸려면 column-count 속성을 사용하여, 브라우저에 원하는 열을 지정하거나 column-width 속성을 사용하여 지정된 너비의 열로 컨테이너를 채우도록 지시할수 있다. 사용자가 위아래로 스크롤 해야하기 때문에 웹 환경에서는 덜 유용하지만, 콘텐츠를 열로 배열할 수 있다는 것은 유용한 기술이 될 수 있다.
