TIL 07_CSS Layout 1

헷갈리지만 CSS에서 정말 중요한 레이아웃에 관한 부분을 정리해보자!

Layout?

layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다.

Display 속성

display 속성은 설정하는 값에 따라 어떤 형식으로 보여질지 결정할 수 있다. HTML의 요소들은 각각의 기본 display 타입을 갖고있는데 가장 대표적인 타입들이 block과 inline이다.

block(수직정렬)

기본적으로 하나의 줄을 차지하고 가능한 최대의 가로 넓이를 가진다.
** 대표 태그 : div, p

inline(수평정렬)

특정 텍스트를 감싸는 형태의 디스플레이 속성이다.
** 대표 태그 : span, a

inline-block

줄 바꿈 없이 다른 인라인 엘리먼트와 나란히 배치되는 속성이다. 브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있다. inline-block 요소는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있다.

Position 속성

static

static은 기본값이다. 다른 태그와의 관계에 의해 자동으로 배치되고 위치를 임의로 설정할 수 없다.

relative

relative은 원래 있던 위치를 기준으로 상대적인 포지션을 갖게 해준다. 상대적 위치가 지정된 요소에 top, right, bottom, left를 지정하면 기본 위치와는 다르게 위치가 조정된다.

fixed

fixed는 스크롤과 상관없이 화면에 요소를 고정시킨다. 스크롤되더라도 늘 같은 곳에 있는 1:1 문의창 등이 해당된다. relaitve 속성과 마찬가지로 지정된 요소에 top, right, bottom, letf를 지정해줄 수 있다.

sticky

sticky는 스크롤시에 값을 고정시킬 수 있는 대표 속성 중 하나이다.
처음에는 relative속성처럼 동작하다가 스크롤이 어떤 특정한 지점에 도달하면 해당 요소가 고정된다.
** IE에서는 미지원!

absolute

absolute는 부모 요소에 따라서 절대적인 위치를 지정해준다.
** 하지만 부모요소에 기본값(static)이 설정되어 있다면 부모요소의 부모요소(할머니 요소)에 기준값이 잡혀서 위치가 지정된다.

fixed와 sticky의 차이점은 뭘까?

fixed는 페이지 전체영역을 기준으로 고정되고
sticky는 선언한 영역의 부모 요소 안에서만 고정되어 스크롤에 따라 움직임.

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed{
  position: fixed;
}

.sticky{
  position: sticky;
}

Float 속성

레이아웃을 잡는 데 사용하는 또 하나의 속성이며 이미지 주위를 텍스트로 감싸준다.
left, right 값을 주어 왼쪽 혹은 오른쪽에 요소를 고정 시키고 화면상에서 말 그대로 띄운다.

출처 - https://techbug.tistory.com/181