CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다.
출처: mdn web docs
레이아웃(layout, 배치)은 말그대로 요소의 위치를 정하는 기술이다. 디자인에서도 이미지, 텍스트 등이 서로 조화를 이뤄 보기 좋게 구성하는 연습을 하곤했다. 개발에서도 디자인과 비슷하게 각 요소가 서로에게 영향을 받고 제어하고 조화를 이룬다.(디자인 업을 오래하다보니 비교대상이 이곳뿐이다.)
mdn web docs에서는 CSS layout을 다음과 같이 분류하고 있다.
- normal
- display
- flexbox
- grid
- floats
- positioning
- table layout
- multiple-column layout
각각의 기술은 저마다 용도가 있고, 어느 하나 중요하지 않은게 없지만 부트캠프를 통해 가장 먼저 배운 position에 대해서 정리해보려 한다.
position
포지션은 단어 뜻대로 위치를 어디에다 지정해줘야 하는지에 대한 속성이다. HTML은 그 시작이 문서인만큼 기본적으로 요소들이 방향이 차곡차곡 써내려져 가는데 이 속성을 이용하면 내가 원하는 위치로 설정할 수 있다.(직접적으로 위치값을 지정해주는 속성은 아니다.)
포지션은 4개의 속성값과 추가로 top, right, bottom, left의 부수적인 속성을 갖게 된다.
static
기본적으로 적용이 되어 있는 속성, static은 위 > 아래의 순서로 배열시켜주는 속성이다.relative
relative는 기본적인 포지션에서 상대적인 포지션을 가질 수 있도록 해준다. 위에서 말한 부수적인 속성들을 이용해 원래 위치엥서 상대적인 위치로 지정이 가능하다.fixed
단어 뜻대로 화면에 보이는 위치로 고정시키는 역할을 한다.absolute
부모 요소에 속박되지 않고, 독립된 위치를 갖게 되는 속성이다. 디자인과 비교하자면 새로운 레이어를 추가하는 느낌으로 이해했다.display
display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 정해주는 역할을 한다.
inline
inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등이 있다. inline은 width, height 속성을 지정해도 무시되기 때문에 사용시 주의해야 한다.block
block은 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등이 있다. block은 inline과 달리 width, height, margin, padding 등의 속성이 모두 반영된다.inline-block
inline-block은 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다!이렇게 layout 속성을 공부하고 정리해봤지만, 아직 누군가가 설명해달라고 하면 어버버거리는게 현실... 조급하게 하지말고 천천히 꼭꼭 씹어먹으면서 정진해야겠다!
