css

CSS width (너비), height (높이) CSS 크기 속성 단위 알아보기

by

CSS width (너비), height (높이) CSS 크기 속성

CSS에서 너비(width)와 높이(height) 는 웹 요소의 크기를 지정하는 데 사용되는 웹 개발에 중요한 속성입니다.

  1. 너비 (width) 설정:
    • 너비는 요소의 가로 폭을 결정합니다. 픽셀(px) 단위로 지정하면 고정 크기를 갖는 요소를 만들 수 있습니다. 예를 들어, width: 200px; 은 가로로 200픽셀의 공간을 요소에 할당합니다.
    • 백분율(%) 단위를 사용하여 상위 요소에 대한 상대적인 너비를 정의할 수 있습니다. 예를 들어, width: 50%; 는 부모 요소의 절반 너비가 됩니다.
    • 최소(min-width)와 최대(max-width)값을 설정하여 유연성을 부여할 수 있습니다. 이를 통해 뷰포트 크기에 반응하는 반응형 디자인을 구현할 수 있습니다.
  2. 높이 (height) 설정:
    • 높이는 요소의 세로 길이를 나타냅니다. 너비와 마찬가지로 픽셀(px) 단위로 고정 크기를 설정할 수 있습니다. height: 150px; 세로로 150픽셀의 공간을 할당합니다.
    • 백분율(%) 단위를 사용하여 상위 요소에 대한 상대적인 높이를 정의할 수 있습니다. 예를 들어, height: 50%; 는 부모 요소의 절반 높이가 됩니다.
    • 최소(min-height)와 최대(max-height)값을 이용하여 동적인 레이아웃을 생성할 수 있습니다. 이는 내용의 양에 따라 유연하게 조절되는 효과를 가집니다.
  3. 반응형 디자인과 함께 활용:
    • 백분율이나 상대적인 단위를 사용하여 너비와 높이를 설정하면 반응형 디자인을 쉽게 구현할 수 있습니다.
    • 예를 들어, 화면의 너비에 대한 백분율로 설정하면 화면 크기에 따라 자동으로 조절됩니다.
      예) div { width: 50%; }
  4. 자동으로 크기 조절 (width: auto, height: auto):
    • auto 값을 사용하면 내용에 따라 자동으로 크기가 조절됩니다.
    • 특히 내용의 길이나 크기에 따라 동적으로 변해야 하는 경우 유용합니다.
      예) div { width: auto; }

크기 속성 단위 자세히 알아보기

  1. 픽셀(px): 가장 일반적으로 사용되는 단위로, 화면에서의 고정 크기를 나타냅니다. 예를 들어, width: 200px; 은 해당 요소의 너비를 200픽셀로 설정합니다.
  2. 백분율(%): 부모 요소에 대한 상대적 크기를 나타냅니다. 예를 들어, width: 50%; 는 부모 요소의 반을 차지하는 너비를 가지도록 요소를 설정합니다.
  3. em: 해당 요소의 폰트 크기에 대한 상대적인 크기를 나타냅니다. 예를 들어, font-size: 1.5em;은 폰트 크기를 현재 부모 요소의 1.5배로 설정합니다.
  4. 렘(rem): 루트 요소(일반적으로 <html>요소)에 대한 상대적인 크기를 나타내며, 상속이 적용되지 않습니다. 일반적으로 글꼴 크기를 기준으로 하는 상대적인 크기를 지정할 때 사용됩니다. font-size: 2rem; 은 루트 요소의 폰트 크기의 2배로 현재 요소의 폰트 크기를 설정합니다.
  5. vw와 vh: 화면의 너비(vw) 및 높이(vh)에 대한 상대적인 크기를 나타냅니다. 예를 들어, width: 50vw; 는 화면 너비의 50%로 요소의 너비를 설정합니다.
  6. cm, mm, in 등: 물리적 크기를 나타내는 단위로, 각각 센티미터, 밀리미터, 인치 등이 있습니다. 예를 들어, width: 5cm; 은 5센티미터로 요소의 너비를 설정합니다.

CSS width (너비), height (높이) 예제

기본 설정

border (테두리) 를 설정하고 width 200px 과 height 150px 을 설정했습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      text-align: center; /* 텍스트 가운데 정렬 */
      border: 2px solid black; /* 테두리 설정 */
      width: 200px; /* 너비 200px */
      height: 150px; /* 높이 150px */
    }
</style>
<title>예제</title>
</head>
<body>
<div class="box">
    <p>박스</p>
</div>
</body>
</html>
HTML
box

너비가 200px , 높이가 150px 인 박스가 만들어졌습니다.

크기 키우기

이번에는 크기를 키워서 width 300px 과 height 200px 로 설정하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      text-align: center; /* 텍스트 가운데 정렬 */
      border: 2px solid black; /* 테두리 설정 */
      width: 300px; /* 너비 300px */
      height: 200px; /* 높이 200px */
    }
</style>
<title>예제</title>
</head>
<body>
<div class="box">
    <p>박스</p>
</div>
</body>
</html>
HTML
bigbox

너비가 300px , 높이가 200px 인 박스가 만들어졌습니다.

백분율(%) 단위

백분율(%) 단위를 사용하여 상위 요소에 대한 상대적인 너비를 설정했습니다.
비교를 위해 body 에 border 를 주었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      border: 2px solid yellow; /* 테두리 설정 */
    }
    .box {
      text-align: center; /* 텍스트 가운데 정렬 */
      border: 2px solid black; /* 테두리 설정 */
      width: 50%; /* 너비 50% */
      height: 200px; /* 높이 200px */
    }
</style>
<title>예제</title>
</head>
<body>
<div class="box">
    <p>박스</p>
</div>
</body>
</html>
HTML
halfbox

너비를 50%로 설정했고, box는 부모 요소인 body 에 절반 크기가 되었습니다.

자동으로 크기 조절

auto 값을 사용하면 내용에 따라 자동으로 크기가 조절됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      text-align: center; /* 텍스트 가운데 정렬 */
      border: 2px solid black; /* 테두리 설정 */
      width: 300px; /* 너비 300px */
      height: auto; /* 높이 auto */
    }
</style>
<title>예제</title>
</head>
<body>
<div class="box">
    <p>박스</p>
</div>
</body>
</html>
HTML
heightautobox

너비가 300px , 높이가 auto 인 박스가 만들어졌습니다.
높이는 p태그의 크기만큼 자동으로 조절 되었습니다.

결론

CSS의 너비와 높이 속성은 웹 디자인에서 중요한 역할을 하며, 다양한 설정을 통해 화면에 적절한 레이아웃을 구성할 수 있습니다.

Leave a Comment