Element가 배치되는 방법(CSS layout)

• 들어가기 전에

CSS의 배치를 위해서는 중요한 여러가지 개념을 알고있어야 한다. 그 중에서 block과 inline의 차이 그리고 position의 속성을 이해해야 한다. 또한, 많이 사용되고 있는 float의 성질도 알아둘 필요가 있다.

• 학습 목표

1. layout의 방식에 대해 이해하자.

• 핵심 개념

- 박스 모델 (Box model)

- margin

- border

- padding

- position

• 엘리먼트가 배치되는 방식

엘리먼트를 화면에 배치하는 것을 layout 작업, 또는 Rendering 과정이라고 한다. 편의상 배치라고 하자. 위에서 아래로 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현이 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용한다.

- display(block, inline inline-block)

· block, inline-block : 벽돌을 쌓든 블록을 가지고 쌓인다.

· inline : 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 쌓인다. 이는 높이와 넓이를 지정해도 반영되지 않는다.

- position(static, absolute, relative, fixed) : 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월하다.

· static : 기본값, 순서대로 배치된다.

· absolute : 기준점에 따라 특별한 위치에 위치하게 된다. top/left/right/bottom으로 설정한다.

· relative : 원래 자신이 위치해야 할 곳을 기준으로 이동한다. top/left/right/bottom으로 설정한다.

· fixed : viewport(전체화면) 좌측, 맨 위를 기준으로 동작한다.

- float(left, right) : 원래 flow에서 벗어날 수 있다. 일반적인 배치에 따라 배치된 상태에서 float는 벗어난 형태로 특별히 배치된다. 따라서 뒤에 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩된 배치가 가능하다.

· blue/green/red 순으로 순서대로 쌓여있는 엘리멘트가 있다고 가정하면, green에 float : left 속성을 주게되면 red가 화면에서 보이지않는다. 이것은 green에 float 속성을 줌으로써 green 엘리먼트가 화면에서 붕 뜨게 되고, 빈자리가 생겼다고 생각하는 red가 그 자리에 올라오게 되면서 green 뒤에 중첩되어 보이지 않게 되는 것이다.

- box-model : 블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정할 수 있다. margin/padding/border/outline으로 설정한다. top right bottom left 나 top&bottom right&left 순서로 설정이 가능하다. border 밖에 테두리를 그릴 수 있는 box-shadow 속성도 box-model에 포함지어 설명할 수 있다.

· margin : 엘리먼트 간의 간격을 말하며 그 간격만큼 내 위치가 달라진다.

· padding : 엘리먼트 안의 컨텐츠와 그 엘리먼트가 가지고 있는 원래 크기 사이즈는 padding을 줄 수가 있다.

• 엘리먼트의 크기

기본적으로 부모의 크기만큼을 가진다. width:100%는 부모의 크기만큼을 다 갖는 것과 같다.

• box-sizing과 padding

width와 height에 고정된 값을 부여했다고 하더라도, padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. box-sizing 속성으로 이를 컨트롤 할 수 있다. box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 최대한 고정하면서 padding 값만 늘릴 수 있다.

• layout 구현 방법

전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를 활용해서 사용하도록 한다. 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다. 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다. 엘리먼트 안의 텍스트의 간격과 다른 엘리먼트 간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.