기본적으로 HTML로 작성된 웹페이지는 위에서 아래의 방향으로 요소들을 나열한다. 하지만, 우리가 사용자에게 웹페이지를 보여줄 때는 필요에 따라 적재적소에 요소들을 배치할 필요가 있다. CSS의 레이아웃 관련 property에 대해서 예시와 함께 정리해보자.

레이아웃의 모든 것!

박스 모델

레이아웃을 고려할 때 우선적으로 생각해야하는 부분은 바로 박스 모델이다. 기본적으로 웹 페이지는 박스들의 집합으로 이루어져 있다.

• content : 내용을 담고 있는 영역으로 width, height를 통해서 크기를 조정할 수 있다.
• padding : content와 border 사이의 여백을 뜻한다. a 태그 등에 사용하면 사용자가 더 편하게 링크를 누를 수 있다!
• border : 테두리를 뜻한다.
• margin : 다른 요소와의 여백을 뜻한다. margin 을 이용해서 가운데 정렬도 할 수 있다.

position

레이아웃을 조정할 때 자주 사용하는 property 중에 하나로 position 이 있다. position 의 값으로는 static, absolute, relative, fixed, sticky 등이 있다. 이 중에서 static 의 경우에는 아무런 변화도 없는 기본값을 의미하므로 제외하고 나머지 내용들에 대해서 보자.

1. absolute

position 이 absolute 경우에는 특정 요소를 맥락에 관계 없이 원하는 장소에 위치시키고 싶을 때 사용한다고 생각하면 된다. 예를 들어서 팝업 창을 나갈 수 있는 X 버튼의 위치를 조정할 때 사용할 수 있다.

/* 예시입니다 */
.close-btn{
  position: absolute;
  top: 0;
  right: 0;
  transform:translate(-50%, -50%);
}

위처럼 사용하면 아래와 같은 결과를 얻을 수 있다.

여기서 주의할 점은 absolute 의 경우에는 부모를 포함한 조상 요소 중에서 position 이 static 이 아닌 가장 가까운 요소를 기준으로 움직인다는 점이다. 따라서 실제로 사용하는 경우에는 주로 부모 요소에 position 을 relative 를 지정하는 경우가 많다.

2. relative

위에서 absolute 의 경우에는 맥락과 상관 없이 요소를 움직이고 싶을 때 사용한다고 이야기를 했었다. 또, absolute 를 사용하기 위해서는 부모 요소에 주로 relative 를 사용한다고도 덧붙였다.

relative 의 경우에는 기존 static 상태의 위치에서 상대적으로 움직이기 위해서 사용한다. 즉, 기존 요소의 위치가 어디였는지가 중요하다.

/* 예시입니다. */
.move-box{
  position: relative;
  top: 10px;
  left : 10px;
}

위 코드의 경우에는 move-box 라는 클래스를 가진 요소가 자기 기본 위치를 기준으로 위로부터 10px, 왼쪽으로부터 10px 움직인 곳으로 이동하게 된다.

3. fixed

웹 페이지를 사용하다보면 특정 버튼이나 헤더가 움직이지 않고 고정되어 있는 경우를 봤을 것이다. 이 때 사용하는 것이 바로 fixed 이다.

/* 예시입니다. */
.header__menu{
  position:fixed;
  top:0;
  left:0;
}

예시로 헤더 메뉴의 코드를 작성했다. fixed 의 경우에 viewport를 기준으로 위치를 고정시키기 때문에 매우 유용하게 사용할 수 있다.

위의 결과물을 보면 스크롤이 진행되고 있지만 헤더 메뉴의 경우에는 움직이지 않고 고정되어 있음을 알 수 있다.

4. sticky

sticky 의 경우 비교적 최신 기능이라고 볼 수 있는데 viewport 에 위치를 고정하는 fixed와 다르게 스크롤 되는 부모 요소에 고정되는 성질을 가진다.

/* 예시 코드입니다. */
.container {
  width: 100%;
  height: 1200px;
  background-color: #bbb;
}

.sticky-box {
  position: sticky;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background-color: #000;
}

.container2 {
  width: 100%;
  height: 1200px;
  background-color: oldlace;
}

스크롤이 일어날 수 있도록 부모 요소에 높이 1200px을 주었고 sticky-box 라는 클래스를 가진 요소에 position 을 sticky 로 설정했다.

결과 모습을 보면 부모 요소가 스크롤 되는 과정에서는 위치가 고정되어 있다가 끝나는 지점부터 함께 올라가고 있음을 알 수 있다. 이처럼 sticky 는 스크롤 박스마다 위치를 고정하며 사용할 수 있기 때문에 마찬가지로 유용하게 사용할 수 있다.

float

float 의 경우에는 원래 텍스트에 둘러싸인 이미지의 배치를 위해서 사용하던 속성이다. 하지만, 사용에 따라서 레이아웃을 조정하는 것에도 유용했기 때문에 많이 사용되었다.

1. 사용법

.float-box{
  float:left;
}

float 의 사용법은 간단하다. float property에 left 나 right 값을 주어서 이용할 수 있다. 기본적으로 float 된 요소는 부유하는 성질이 있기 때문에 이에 주의해야 한다.

2. clearfix

float 는 가로배치 등을 할 때 유용하게 사용하기 좋지만 큰 단점이 있다.

float의 단점!🥵
1. 부모 요소나 다른 요소가 float 된 요소의 위치를 인식하지 못한다.
2. block 요소와 다르게 inline 요소는 float 된 요소를 인식하면서 레이아웃이 어긋나게 된다.
3. 부모 요소는 자식 요소 height의 합을 자신의 height로 하는데 float 된 요소는 이를 계산하지 못한다.

이를 고치기 위해서 적용할 수 있는 방법이 clear property 이다. 적용하는 방법은 아래와 같다.

.parent::after{
  content: "";
  display: block;
  clear: left;
}

부모 요소에 자식 요소를 추가해주고 여기에 clear 을 적용하면 된다. 또 다른 방법으로 부모 요소에 overflow:hidden 을 주는 방법도 있다.

위에서 다룬 내용 이외에도 CSS에는 flexbox나 inline element, block-level element 등 고려해야하는 요소들이 많다. 관련된 내용은 아래의 TIL에 정리해 두었다.
1. CSS Flexbox
2. CSS Box
3. CSS Media Query