CSS Layout - position, inline/block/inline-block, float

HTML(HyperText Markup Language)의 역할은 페이지 안에 담길 정보와 그 정보의 골격을 짜는 일이다. 다만 HTML만으로는 복잡한 레이아웃을 설정하는데 무리가 있다.

여기서 CSS(Cascading Style Sheets)을 활용하면 HTML만을 사용하는 방식에 비해 레이아웃을 효과적으로 그릴 수 있다(고 한다). 다음 요소들이 해당 속성들이다.

1) position 속성 (static, relative, absolute, fixed)
2) display 속성 (inline / inline-block / block)
3) float 속성

1) position 속성(static, relative, absolute, fixed)

: HTML이 위에서 아래로(라인 바이 라인으로) 순차적으로 element들을 그려낸다면, CSS는 보다 자유로운 위치에 element를 배치할 수 있도록 한다. positon 속성은 element(혹은 box)들의 위치를 결정하는데 활용된다. 5개의 value(static, absolute, fixed, relative, initial, inherit)를 가지며, 브라우저에 따라 1개의 value(sticky)를 제한적으로 지원한다.

position: static|absolute|fixed|relative|sticky|initial|inherit;
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

• static은 element들을 코딩된 순서대로(위→아래, 왼쪽→오른쪽) 그려낸다. position 속성을 특별히 설정하지 않을 경우의 디폴트 값이다. top, right, bottom, left 속성 등에 영향을 받지 않는다.

• relative는 추가적으로 top, right, bottom, left 속성을 사용, 박스의 위치를 조정할 수 있다. 박스의 좌측상단 꼭지점 기준 상하좌우 값에 적절한 양수/음수 값을 줘 멀어지게 할 수 있다. 기준점은 'normal position'이다.

• absolute 속성은

1. 부모에 position설정값이 없을 때에는 브라우저를 기준으로 자리를 잡는다.
2. 그런데 부모요소에 position속성값이 생기면(static을 제외) 부모를 기준으로 자리를 다시 재정렬한다.
3. 역시 top, right, bottom, left 속성을 사용한다. relative와는 '가장 가까운 상위 요소 중 position 속성이 relative인 요소'가 기준점이 된다는 차이가 있다.
4. relative position이 없을 경우 body 태그에 연결되고 페이지 스크롤과 함께 움직인다.
5. relative와 absolute의 공통점은

• fixed는 viewport 상에서의 좌표를 따진다. 즉 기준점이 브라우저에서 현재 표시되고 있는 영역이므로 페이지를 스크롤 하더라도 고정되어 위치가 변하지 않는다. 네비게이터 등을 만들 때 활용된다.

2) display 속성 (inline / inline-block / block)

: HTML의 박스들은 display 속성을 가지며 대상을 어떻게 보여줄 것인지를 결정한다. 이는 block과 inline, 두 가지의 가장 특징적인 형태와 그 중간 단계인 inline, 그리고 element를 화면상에서 숨겨주는 none 속성으로 구성된다.

• w3c에 따르면 block element는 항상 새 라인에서 시작하고 full width를 차지해 페이지의 좌우 폭 전부를 사용한다. div, h1~6, p, form, header, footer, section 등이 대표적이다.

• inline element는 새 라인에서 시작하지 않으며 필요한 만큼의 좌우 폭만 사용한다. 대표적인 태그는 span, a, img 등이다.

• inline-block은 block과 inline의 중간 단계다. 즉 width, height + padding(border 내부), border, margin(border 외부) 등의 박스 모델 값이나 line break도 마음대로 설정할 수 있다.

• none은 데이터는 로드하지만 화면에 표시하지 않은 상태다.

3) float 속성

: float은 이미지 주변에 텍스트를 감싸기 위한 용도로 만들어진 속성으로 컨테이너(부모) 안에서 대상의 좌우 배치(가로 정렬)를 결정한다. 예를 들면 우측에 사진을, 좌측에는 텍스트를 나누어 배치하고 싶을 때 사용한다. left, right, none(default), inherit(부모를 상속)로 구성되어 있다.

다만 float는 자신이 속한 컨테이너의 높이를 인지하지 못해 범위를 벗어나는 경우가 왕왕 생긴다. 다양한 해결방법이 있지만 flexbox를 활용하거나 float의 바깥을 감싸고 있는 컨테이너(예컨대 div)에 overflow: hidden;을 주는 방법이 권장된다.