너비와 높이

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 37번째.

CSS에서 width 및 height 속성은 요소의 콘텐츠 영역 크기를 설정하는 데 사용됩니다. 이러한 속성은 웹 페이지에서 요소의 크기와 레이아웃을 제어하는 데 필수적입니다.

width 및 height 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    width: value;
    height: value;
}

width: 요소 콘텐츠 영역의 너비입니다.

height: 요소 콘텐츠 영역의 높이입니다.

value: 원하는 너비 또는 높이 값으로, 픽셀(px), 엠(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정할 수 있습니다. 또한 auto 키워드를 사용하여 브라우저가 콘텐츠를 기반으로 너비나 높이를 자동으로 계산하도록 할 수 있습니다.

예를 들어:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

이 예제에서 모든 <div> 요소는 너비가 300px이고 높이가 200px인 반면, 모든 <img> 요소는 부모 요소 너비의 100%를 차지하는 너비를 가지며, 가로세로 비율을 유지하기 위해 높이가 자동으로 계산됩니다.

챌린지

쉬움

HTML 문서에 div(<div>)와 이미지(<img>)가 주어집니다. 여러분의 작업은 width와 height 속성을 사용하여 이 요소들의 크기를 설정하는 것입니다. 다음 단계를 따르세요:

<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 400px로, height를 250px로 설정하세요.
<img> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px로, height를 auto로 설정하세요.

치트 시트

width 및 height 속성은 요소의 콘텐츠 영역 크기를 제어합니다:

selector {
    width: value;
    height: value;
}

값은 픽셀(px), em(em), 백분율(%)로 지정하거나, 자동 계산을 위해 auto를 사용할 수 있습니다:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

직접 해보기

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>