Relative Measurements
✅ 반응형 디자인(Responsivie Design) :
현대에는 데스크탑, 스마트폰, 태블릿 등 다양한 기기에서 웹사이트를 이용한다. 하지만 기기마다 화면 크기가 다르다는 점이 웹 개발자에게 문제를 일으킨다.
해결책은 반응형 디자인(Responsive Design) 이다.
반응형 디자인이란, 웹사이트가 상황에 따라 자동으로 크기와 배치를 조정하여, 모든 화면 크기에서 가독성과 시각적 일관성을 유지하는 것을 의미한다.
조정 기준은 다음과 같다:
- 웹사이트 내 다른 콘텐츠의 크기
- 화면 크기 (뷰포트 크기)
✅ 픽셀 단위(px)의 한계 :
- px → 고정값(Fixed Value)
- 예: width: 500px; height: 100px;
- 문제점: 화면 크기가 변하면 콘텐츠가 너무 작아지거나, 넘치거나, 가독성이 떨어질 수 있음
✅ 상대 단위 (Relative Units)의 장점 :
고정값 대신 상대적 크기를 사용하면,
- 화면 크기 변화에도 비율이 유지됨
- 콘텐츠가 자동으로 조정되어 반응형 디자인 구현 가능
Em
✅ 상대 단위 em :
픽셀(px)은 고정값이지만, em 단위는 상대적 크기를 지정할 수 있는 유용한 도구이다.
✅ em의 의미 :
- 과거: 글꼴에서 대문자 M의 폭을 기준으로 한 단위
- 현재: 현재 요소의 font-size 또는 브라우저의 기본 글꼴 크기(보통 16px)를 기준으로 계산됨
기본적으로 1em = 현재 글꼴 크기
✅ 예시 코드 :
.heading {
font-size: 2em;
}- 브라우저 기본 폰트 크기 = 16px 가정
- 결과: 2em = 32px
.splash-section {
font-size: 18px;
}
.splash-section h1 {
font-size: 1.5em;
}- .splash-section 기본 폰트 크기 = 18px
- .splash-section h1 = 1.5em = 27px
Rem
✅ 상대 단위 rem :
rem은 root em의 줄임말로, em과 비슷하지만 기준이 다르다.
✅ rem의 특징 :
- 기준: 최상위 <html> 요소의 글꼴 크기
- 기본값: 대부분의 브라우저에서 <html> = 16px
- 따라서 1rem = 16px (기본 상태일 때)
✅ 예시 코드 :
html {
font-size: 20px;
}
h1 {
font-size: 2rem;
}- <html> 글꼴 크기 = 20px
- h1 크기 = 2rem = 40px
✅ em vs. rem 비교 :
| 단위 | 기준 | 장점 | 단점 |
| em | 부모 요소의 font-size | 주변 요소와 상대적인 크기 지정 가능 | 중첩 시 예상치 못한 배수 효과 발생 |
| rem | 루트(html)의 font-size | 전체 사이트에서 일관된 크기 유지 | 특정 요소와의 상대적 비교에는 적합하지 않음 |
- rem: 사이트 전반에서 일관된 크기 유지가 필요할 때 적합
- em: 주변 요소와의 상대적 비율 조정이 필요할 때 적합
Persentages
✅ 상대 단위 % (percent) :
퍼센트는 부모 요소의 크기를 기준으로 상대적인 크기를 지정할 때 사용된다.
특히 반응형 레이아웃에서 많이 사용되며, 고정 단위(px)보다 유연성을 제공한다.
✅ 특징 :
- 기준: 부모 요소(container)의 크기
- 사용 가능 속성:
- 크기 관련: width, height
- 박스 모델 관련: padding, border, margin
- 위치 관련: top, bottom, left, right
✅ 예시 코드 :
.main {
height: 300px;
width: 500px;
}
.main .subsection {
height: 50%;
width: 50%;
}- .main 크기: 300px × 500px
- .subsection 크기: 50% → 부모의 절반
- 높이 = 300px × 0.5 = 150px
- 너비 = 500px × 0.5 = 250px
✅ 주의할 점 :
- 부모 요소의 크기가 정의되지 않았다면 → 자식의 퍼센트 값은 예상치 못한 결과가 될 수 있다.
- width: 100%는 부모 너비를 꽉 채우지만, padding, border, margin 때문에 overflow가 발생할 수 있다.
→ 따라서 box-sizing: border-box; 속성과 함께 사용하는 것이 일반적이다.
Percentages: Padding & Margin
✅ 퍼센트 단위와 padding/margin :
퍼센트는 padding(컨텐츠와 테두리 사이 간격)과 margin(요소와 요소 사이 간격)을 지정할 때도 사용할 수 있다.
✅ 계산 기준 차이 :
- width / height에 퍼센트 사용 시
→ 부모 요소의 해당 크기(width, height) 를 기준으로 계산된다. - padding / margin에 퍼센트 사용 시
→ 부모 요소의 width(너비) 를 기준으로 계산된다.
→ 따라서 수평·수직 방향 모두 부모의 width 값을 기준으로 비율이 정해진다.
✅ 예시 코드 :
p.content-header {
border: 3px solid coral;
padding: 10%;
margin-left: 50%;
}- padding: 10% → 부모 너비의 10% 만큼 패딩 지정
- margin-left: 50% → 부모 너비의 50% 만큼 오른쪽으로 밀림
✅ 왜 vertival padding/margin도 width 기준일까? :
- 부모 요소의 height가 정의되지 않은 경우 → 자식의 높이에 따라 부모의 높이가 계속 변함
- 자식 height가 바뀔 때마다 부모 height도 바뀌고, padding/margin도 연쇄적으로 변하게 됨
- 이런 무한 루프를 피하기 위해 CSS에서는 padding/margin을 무조건 width 기준으로 계산한다.
✅ 활용 팁 :
- 텍스트 기반의 간격 조정 → em, rem 사용 (글자 크기와 비례)
- 레이아웃 기반의 비율 조정 → % 사용 (부모 너비와 비례)
Width: Minimum & Maximum
✅ 최소·최대 너비 지정 min-width/max-width :
반응형 디자인에서 상대 단위를 사용하면 다양한 화면 크기에서 일관된 레이아웃을 유지할 수 있다.
하지만 요소가 너무 작거나 너무 커지면 가독성과 디자인이 깨질 수 있다.
이를 방지하기 위해 CSS는 최소/최대 너비 속성을 제공한다.
✅ 속성 설명 :
- min-width : 요소의 최소 너비 보장
- max-width : 요소의 최대 너비 제한
✅ 예시 코드 :
- 브라우저 크기를 줄여도 p 요소는 최소 300px 이하로 줄어들지 않는다.
- 브라우저 크기를 넓혀도 p 요소는 최대 600px 이상 커지지 않는다.
✅ 활용 포인트 :
- 텍스트가 너무 압축되거나 과도하게 퍼지는 문제를 예방한다.
- 가독성을 유지하고 적절한 레이아웃 범위를 지정할 수 있다.
- 주로 px 단위를 사용하여 하드 제한을 주는 경우가 많다.
Height : Minimum & Maximum
✅ 최소·최대 높이 지정 min-height/max-height :
가로 너비뿐 아니라 세로 높이도 제한할 수 있다.
- min-height : 요소 박스의 최소 높이 보장
- max-height : 요소 박스의 최대 높이 제한
✅ 예시 코드 :
p {
min-height: 150px;
max-height: 300px;
}- 모든 p 요소는 최소 높이가 150px 이하로 줄어들지 않는다.
- 최대 높이는 300px을 넘지 않는다.
✅ 주의사항 :
만약 max-height가 너무 낮게 설정된다면?
- 요소 안의 텍스트나 이미지가 잘려서 밖으로 넘치게(overflow) 될 수 있다.
- 이 경우 CSS의 overflow 속성을 활용해 해결할 수 있다.
예 :
p {
max-height: 100px;
overflow: auto; /* 스크롤바로 넘친 내용 표시 */
}
Scaling Images and Videos
✅ 반응형 이미지·비디오 비율 유지하기 :
웹사이트에는 다양한 미디어(이미지, 영상 등) 가 포함된다.
이때 중요한 것은 비율을 유지하며 컨테이너 크기에 맞게 조정하는 것이다.
✅ 예시 코드 :
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
display: block;
}- .container 설정
- width: 50% → 브라우저 너비의 절반 크기.
- height: 200px → 세로 크기 고정.
- overflow: hidden → 컨테이너보다 큰 콘텐츠는 잘라낸다.
- 이미지 설정 (.container img)
- max-width: 100% → 컨테이너 너비를 넘지 않도록 비율 유지.
- height: auto → 가로 크기에 맞춰 세로 크기 자동 조정.
- display: block → 인라인 정렬을 막고, 다른 요소와 줄맞춤 문제 해결.
- 결과
- 이미지는 컨테이너 크기에 맞춰 가로 폭 기준으로 비율 유지
- 세로가 컨테이너보다 크면 아래쪽이 잘려 보이지 않음
✅ 변형 패턴 :
만약 세로(height) 기준으로 비율을 맞추고 싶다면 속성을 교체한다.
.container img {
max-height: 100%;
width: auto;
}이 경우 세로가 기준이 되며, 가로가 컨테이너보다 크면 양옆이 잘린다.
Scaling Background Images
✅ CSS 배경 이미지 반응형 처리 :
웹사이트를 제작할 때, 다양한 화면 크기에 대응하기 위해 배경 이미지를 반응형으로 설정하는 방법을 알아야 한다.
body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
✅ 주요 속성 정리 :
- background-image : 배경 이미지를 불러오는 속성이다.
- background-repeat: no-repeat : 이미지가 반복되는 기본 동작을 막는다.
- background-position: center : 배경 이미지를 컨테이너의 중앙에 배치한다.
- background-size: cover : 이미지 비율을 유지하며 요소 전체를 덮는다. 이미지가 잘려 나갈 수 있다.
✅ background-size 비교 :
| 값 | 설명 |
| cover | 요소를 꽉 채우도록 확대/축소한다. 다만 이미지 일부가 잘릴 수 있다. |
| contain | 이미지 전체가 보이도록 축소/확대한다. 남는 공간이 생길 수 있다. |
| auto | 기본값으로, 원본 크기를 유지한다. |
참고
https://www.codecademy.com/enrolled/courses/learn-intermediate-css