CSS 만 사용하여 특정 비율 + 반응형 요소 만들기

css padding 특정 비율 요소 만들기

---

종종  이미지, 비디오 등 요소들은 브라우저의 사이즈에 따라 확대 혹은 축소되는 스펙을 구현해야 되는 경우가 많습니다.

보통 요소의 width/height 가 특정 비율(ex: 2:1)을 유지해야하는 스펙이 함께 있습니다.

 

보통 해당 스펙은 CSS 만으로 구현하기 어렵기 때문에 JS를 사용하여 구현하는 경우가 많습니다. 

 

하지만 JS로 처리할 경우 스크립트 처리에 대한 추가 공수가 필요할 뿐 아니라 viewport 사이즈가 변경될 때마다 영역을 계산해서 다시 렌더링 해줘야 하기 때문에 성능에 악영향을 끼치게 됩니다. 이는 사용성 저하로 인한 유저 이탈로 이어질 수 있습니다.

 

사실 이 스펙은 CSS의 % 단위의 값 과 padding-top 만으로 구현할 수 있습니다. 자세히 알아보겠습니다.

 

---

비율을 유지하면서 반응형 너비를 적용하는 방법

1:1 비율을 유지하면서 브라우저 크기에 반응하도록 코드는 아래와 같습니다.

 

 

설명

위 코드를 이해하려면 아래 설명을 하나씩 차례대로 이해해야 한다.

 

속성별 % 값 적용 시 특징

% 단위는 부모 요소를 기준 삼아 상대적으로 계산된다. 아래 예제를 살펴보자.

 

 

1. width의 % 계산

 

- 기본값:

    - display: block → 부모 width 값을 상속 (width: 100%)

    - display: inline / inline-block → 기본적으로 콘텐츠의 크기만큼 차지

- % 값 적용 시: 부모 요소의 width 값을 기준으로 설정

 

2. padding-top의 % 계산

- 기본값: 항상 0

- %값 적용시: 부모 요소의 width 값을 기준으로 설정

 

padding-top박스모델 계산

예시 코드의 박스 모델을 그려보면 위 그림과 같다.

부모 요소의 width가 400px, 자식 요소에 padding-top: 50% 값을 주면, 자식 요소에 200px 만큼의 값이 적용된다.

 

정리하자면

핵심 원리는 아래 두 가지이다.

- 부모 요소의 width에 % 값을 적용 → 화면 크기에 따라 가변
- 자식 요소에 padding-top: n%→ 부모 요소 width를 기준으로 자식 요소의 높이 설정 가능

 

 

활용 1. 특정 비율 적용

앞서 알아본 padding-top의 특성을 이용하면 특정 비율을 적용할 수 있다.

예를 들어, 자식 요소에 padding-top을 100%를 주게 된다면, 1:1 비율이 되는 것이다.

 

자주 쓰는 비율 예시 코드 

 

 

a) 1:2 비율

padding-top: 200%

 

 

b) 4:3 비율

padding-top: 75%

 

 

c) 16:9 비율

padding-top: 56.25%

 

 

d) 1.5:1 비율

padding-top: 66.66%

 

---

 

반응형

 

활용 2. 특정 비율 + 이미지 적용

활용 1 에 이미지를 적용하면, 브라우저 사이즈에 따라 비율을 유지하며 사이즈가 변하는 이미지 요소를 만들 수 있다. 

 

 

 

참고) 이미지 portrait, landscape 설정 및 crop 관련 아래 포스팅 참고

[CSS] 이미지 적용 및 crop 방법 A to Z