너비와 높이

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 37번째.

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

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

selector {
    width: value;
    height: value;
}

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

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

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

예:

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

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

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

챌린지

쉬움

<div> 요소와 이미지(<img>)가 포함된 HTML 문서가 주어집니다. width 및 height 속성을 사용하여 이러한 요소의 크기를 설정하는 것이 과제입니다. 아래 단계를 따르세요:

<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 400px로 설정하고 height를 250px로 설정하세요.
<img> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 300px로 설정하고 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>