개인 노트 정리) 마크업11 - 레이아웃, 여백의 비밀

The RED 견고한 UI 설계를 위한 마크업
Part 2. CSS
05. 레이아웃, 여백의 비밀

 

# 레이아웃, 여백의 비밀

- box-sizing : content-box 일 때는 width/height에 padding값과 border값은 포함되지 않는다. (default)

- box-sizing : border-box일 때는 width/height에 padding값과 border값이 포함된다.

- 그래서 사람들이 border-box를 더 선호하고 실제로도 추천을 한다.

## Relative <length>

- vw, vh 모바일에서 유용하게 사용할 수 있는 값.

- vmax : 뷰포트의 너비 또는 높이 중에 큰 값을 선택해서 그것을 기준으로 비율을 결정하는 것이 vmax 이다.

- vmin : 뷰포트의 너비 또는 높이 중에 작은 값을 선택해서 그것을 기준으로 비율을 결정하는 것이 vmax 이다.

## Reset box-sizing

- 많은 사람들이 공용선택자(*)를 이용해서 reset설정을 한다. 아래처럼..

/* 추천x */
*,
::before,
::after { box-sizing: border-box; }

- 하지만, 아래 코드를 추천한다.

/* 추천o */
[class],
[class]::before
[class]::after { box-sizing: border-box; }
/* class가 들어간 요소에만 box-sizing을 border-box로 선언한다. */
/* 이 코드의 장점은 사용자가 다른곳에서 코드와 스타일을 옮겨와서 위지윅 에디터에 붙여넣기를 했을 때, 그 사용자의 스타일을 존중하는 방식으로 스타일 충돌이 발생하지 않게 한다.  */

## padding

### padding의 비밀 : % value

- % 값을 설정했을 때, %의 기준이 무엇인지가 padding의 비밀이다.

- % value : Refer to logical width of containing block.

- % value : 컨테이너 블럭의 너비 값을 참조.

.parent { width: 100px; }
.child {
  width: 0;
  height: 0;
  padding-left: 25%; /* == 25px */
  padding-top: 50%; /* == 50px */
  background: red;
}

- margin 도 부모요소의 너비 값을 기준으로 결정된다.

### keep aspect-ratio

- padding과 margin의 % value의 비밀을 알면, 비율 유지 기법(keep aspect-ratio) 에 활용할 수 있다.

- 부모 요소를 기준으로 일정한 너비와 높이비율을 만들 수 있기 때문에 이 특징을 사용하면 비율이 유지된 박스를 만들 수 있다.

- 보통 유튜브에 많이 활용한다. (퍼가기 공유하기)

- 유튜브 퍼가기를 하면 iframe 의 560px 너비와 315px 높이를 가진 유튜브 영상을 기본적으로 소스코드 조각을 준다. pc화면은 괜찮지만 작은 화면에 유튜브를 추가하면 영상이 넘쳐서 화면이 잘린다. 이 문제를 해결하는 것이 종횡비 유지 기법이다.

- 첫번째 해결 방법

iframe {
    width: 100vw; /* Check margin or scroll */
    height: 56.25vw;
}

-- 하지만, body 영역에 margin이 들어간 상황에서는 body 영역의 너비와 youtube 영상의 너비가 동일해지기 때문에 왼쪽은 margin 만큼 떨어지지만 그만큼 오른쪽은 영상이 잘린다.

- 두번째 해결 방법

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 56.25; /* Check caniuse. */
}

-- 하지만, 최근에 나온 속성이라서 사파리, 삼성 인터넷 지원을 확인해야 한다.

- 세번째 해결 방법

.utube {
    position: relative;
    padding-top: 56.25%; /* 315 / 560 / 100 */
}
.utube_iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

-- 지금 현업에서 가장 많이 사용하는 방법이다.

 

### 종횡비 유지 유용성

- 누적 배치 변경(CLS) 문제 해결.
- 스켈레톤 UI를 제공할 때.
- 이미지 지연 로딩 기법을 사용할 때.
- content-visibility: auto; 속성을 사용할 때.

## margin

- margin의 비밀1 : padding과 마찬가지로 % value를 사용하면 container block의 너비 값을 참조하게 한다.

- margin의 비밀2 : 수직 마진 병합 (인접 형제, 부모/자식)

### 수직 마진 병합

- 인접 형제, 부모/자식. 2가지 경우에서 발생.

- 부모/자식의 경우 자식의 margin 값을 부모가 빼앗아서 사용하는 듯한 렌더링을 보여준다.

### 수직 마진 병합 규칙

- 블럭 요소 사이에서만 발생.

- 양수끼리, 음수끼리 만난 경우 절대값이 큰 값 적용.

- 양수와 음수가 만난 경우 두 값의 합.

### 수직 마진 병합 규칙 예외

- 최상위 요소(body)의 수직 마진.

- display: flow-root 인 경우에는 수직 마진 병합 규칙이 발생하지 않는다. (예를 들어 부모에 flow-root를 적용하면 자식의 margin을 가져오지 않는다.)

- 부모의 overflow : hidden | auto | scroll

- 부모의 padding-top/bottom 값이 0 아닌.

- 부모의 border-top/bottom 값이 0 아닌.

- display : inline | inline-*

- float : left | right

### 수직 마진을 병합하는 이유?

- 필요이상으로 과도한 margin이 서로 발생하는 것을 상쇄하려는 목적을 가지고 있다.