본문으로 건너뛰기

Width and Height

Width and Height

The width and height properties in CSS set the width and height of an HTML element, respectively.

max-width and max-height limit the maximum width and height of an element, while min-width and min-height set the minimum width and height.

Units for defining width and height include pixels (px), percentages (%), and more.

"Pixels" are the smallest unit drawn on the screen and specify a fixed size regardless of the device and resolution, while "percentages" specify a size relative to the parent element's size.

We will cover units in more detail in Chapter 2.


Width and Height

width and height specify the horizontal width and vertical height of an element, respectively.

Example code:

CSS
.structure {
width: 300px; /* The width of the building is 300 pixels */
height: 150px; /* The height of the building is 150 pixels */
}

CSS: Limiting the Size of HTML Elements

Controlling the size of elements in web design is important for improving user experience and implementing responsive design.

You can limit the size of elements using the max-width, max-height, min-width, and min-height properties.


max-width

  • The max-width property specifies the maximum width of an element.

  • It restricts the width of the element so it does not exceed the specified value.

CSS
.box {
max-width: 300px;
width: 100%;
}

In the example above, the width of the box will expand according to the width of the parent element but cannot exceed 300px.


max-height

  • The max-height property specifies the maximum height of an element.

  • It restricts the height of the element so it does not exceed the specified value.

CSS
.box {
max-height: 150px;
height: auto;
}

min-width

  • The min-width property specifies the minimum width of an element.

  • It ensures that the width of the element does not become narrower than the specified value.

CSS
.box {
min-width: 200px;
width: 100%;
}

In the example above, the width of the box will shrink according to the width of the parent element but will not be smaller than 200px.


min-height

  • The min-height property specifies the minimum height of an element.

  • It ensures that the height of the element does not become shorter than the specified value.

CSS
.box {
min-height: 100px;
height: auto;
}

Follow the parts of the code emphasized with asterisks.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!