3.1 width 속성
CSS에서 블록의 크기는 웹 페이지 레이아웃을 작성하는 데 중요한 역할을 해. 이것들은 요소가 주변 요소들과 어떻게 표시되고 상호작용할지 결정해. 이제 우리는 블록의 크기를 설정할 수 있는 width, height, max-width, max-height 속성을 살펴볼 거야.
width 속성은 요소의 너비를 설정해. 이것은 px, %, em, rem 등 다양한 단위로 설정될 수 있어.
값
- 자동 값:
auto— 요소의 너비는 콘텐츠와 주변 환경을 기반으로 자동으로 결정됨 - 절대 단위:
px,pt,cm,mm,in등 - 상대 단위:
%,em,rem,vw,vh등
사용 예시:
CSS
.box {
background-color: #3498db;
color: white;
padding: 10px;
margin: 10px;
}
.box-fixed {
width: 200px;
}
.box-percentage {
width: 50%;
}
HTML
<div class="box box-fixed">고정 너비 (200px)</div>
<div class="box box-percentage">너비 퍼센트 (50%)</div>
코드 설명:
.box-fixed: 200 픽셀 고정 너비를 가진 요소.box-percentage: 부모 요소의 50% 너비를 가진 요소
3.2 height 속성
height 속성은 요소의 높이를 설정해. 이것 역시 다양한 단위로 설정될 수 있어.
값:
- 자동 값:
auto— 요소의 높이는 콘텐츠와 주변 환경을 기반으로 자동으로 결정됨 - 절대 단위:
px,pt,cm,mm,in등 - 상대 단위:
%,em,rem,vh,vw등
사용 예시:
CSS
.container {
height: 300px;
}
.box {
color: white;
padding: 10px;
}
.box-fixed-height {
height: 150px;
background-color: #2ecc71;
}
.box-percentage-height {
height: 50%;
background-color: #7a5c71;
}
HTML
<div class="container">
<div class="box box-fixed-height">고정 높이 (150px)</div>
<div class="box box-percentage-height">높이 퍼센트 (50%)</div>
</div>
코드 설명:
.box-fixed-height: 150 픽셀 고정 높이를 가진 요소.box-percentage-height: 부모 요소의 50% 높이를 가진 요소
3.3 max-width 속성
max-width 속성은 요소의 최대 너비를 설정해. 이것은 요소가 설정된 값 이상으로 확장되는 것을 막는 제한이야.
값:
- 제한 없음:
none— 요소는 어떤 너비로도 확장될 수 있음 - 절대 단위:
px,pt,cm,mm,in등 - 상대 단위:
%,em,rem,vh,vw등
사용 예시:
CSS
.box {
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 10px;
}
.box-max-width {
width: 100%;
max-width: 300px;
}
HTML
<div class="box">너비 100% (기본)</div>
<div class="box box-max-width">최대 너비 300px</div>
코드 설명:
.box-max-width: 최대 너비 300 픽셀을 가진 요소. 콘텐츠는 요소가 300 픽셀 이상 확장되는 것을 막아줌
3.4 max-height 속성
max-height 속성은 요소의 최대 높이를 설정해. 이것은 요소가 설정된 값 이상으로 증가하는 것을 막는 제한이야.
값:
- 제한 없음:
none— 요소는 어떤 너비로도 확장될 수 있음 - 절대 단위:
px,pt,cm,mm,in등 - 상대 단위:
%,em,rem,vh,vw등
사용 예시:
CSS
.box {
background-color: #9b59b6;
color: white;
padding: 10px;
max-height: 35px;
overflow: auto;
}
HTML
<div class="box">
<p>스크롤을 위한 추가 텍스트.<br>스크롤을 위한 추가 텍스트.<br>스크롤을 위한 추가 텍스트.</p>
</div>
코드 설명:
.box-max-height: 최대 높이 100 픽셀을 가진 요소. 요소의 콘텐츠가 이 값을 초과하면overflow: auto;속성 덕분에 스크롤 될 거야
GO TO FULL VERSION