CSS layout

엘리먼트가 배치되는 방식

엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering과정 이라고도 한다.

기본적으로 엘리먼트는 위에서 하래로 배치되는데

웹사이트의 배치는 다양하게 표현 가능해야하므로, 이를 다양한 방식으로 배치할 수 있도록

다양한 속성을 활용해야 한다.

이렇게 별도의 설정 없이 배치를 하면 위에서 아래로 배치가 되는 모습을 볼 수 있다.

display 속성이 inline인 경우  

위에서 보이는 것과 같이 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다

높이와 넓이를 지정해도 반양이 되지 않는다는 특징이 있다.

다음의 예시를 보면 기본적으로 inline 속성을 가지고 있는 span, a, strong 태그들에게

display : block 을 주었더니 inline속성을 가지는 각각의 문장들이

블록처럼 위에서 아래로 쌓이는 모습을 볼 수 있다.

엘리먼트가 배치되는 방식 (position:static, relative, absolute

엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵다.

position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는것이 수월하다.

1. position속성을 통한 배치

position 속성은 기본 static이며 그냥 순서대로 배치된다.

2. absolute는 기준점에 따라서 특별한 위치에 위치한다.

top / left / right / bottom으로 설정한다.

기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점이다.

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동한다.

top / left / right / bottom 으로 설정한다.

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

아래 예시를 보면 좀 더 이해하기가 수월할 것이다.

간격을 다르게해서 배치하기

margin으로 배치가 달라질 수 있다.

margin은 위/아래/좌/우 엘리먼트와 본인간의 간격이다. 

따라서 그 간격만큼 내 위치가 달라진다.

아래의 예시를 통해 어떻게 적용되는지 살펴보자.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16677/