CSS에서 다양한 크기 단위 알아보기: 초보자 가이드

 

오늘은 CSS에서 사용되는 다양한 크기 단위에 대해 알아볼 거예요.

CSS에서 크기 단위를 이해하는 것은 웹 페이지를 디자인할 때 매우 중요한데요, 이 단위를 제대로 알면 웹 페이지의 요소 크기, 글씨 크기 등을 더 유연하고 깔끔하게 조절할 수 있어요.

초보자도 쉽게 이해할 수 있도록 설명할 테니 걱정하지 마세요!

1. CSS 크기 단위란?

CSS 크기 단위는 HTML 요소들의 너비, 높이, 글꼴 크기 등을 지정할 때 사용하는 기준이에요.

단위에 따라 화면 크기나 글씨 크기를 조절할 수 있어요. 주로 절대 단위와 상대 단위로 나뉩니다.

2. 절대 크기 단위

절대 크기 단위는 고정된 크기를 나타내는 단위예요. 화면 크기와 상관없이 항상 같은 크기로 나타납니다. 주로 인쇄용 웹 페이지에서 많이 사용해요. 절대 크기 단위의 종류는 다음과 같아요:

• px (픽셀): 화면에서 가장 많이 쓰이는 단위예요. 픽셀은 화면에서 작은 점 하나를 나타내요. 예를 들어, 10px은 10개의 작은 점을 뜻해요.

h1 {
  font-size: 24px; /* 글씨 크기를 24픽셀로 설정 */
}

 

설명: 위 코드에서 h1 태그의 글씨 크기는 24px이에요. 화면 크기와 상관없이 항상 24개의 작은 점으로 글씨 크기가 나타나요.

• cm (센티미터): 인쇄 매체에서 자주 사용돼요. 화면보다는 프린트된 출력물에 더 적합한 단위입니다.

div {
  width: 10cm; /* div 요소의 너비를 10센티미터로 설정 */
}

 

• mm (밀리미터): 센티미터보다 작은 단위예요. 인쇄용으로 사용할 때 유용해요.

div {
  width: 50mm; /* div의 너비를 50밀리미터로 설정 */
}

• in (인치): 인치 단위로 크기를 설정할 수 있어요. 1인치는 약 2.54cm입니다.

div {
  height: 2in; /* 높이를 2인치로 설정 */
}

• pt (포인트): 글꼴 크기에서 자주 사용되는 단위로, 1포인트는 1/72인치에 해당해요.

p {
  font-size: 12pt; /* 글씨 크기를 12포인트로 설정 */
}

• pc (파이카): 1파이카는 12포인트입니다. 인쇄물에서 자주 쓰입니다.

p {
  font-size: 1pc; /* 글씨 크기를 1파이카로 설정 */
}

3. 상대 크기 단위

상대 크기 단위는 부모 요소나 화면 크기에 따라 크기가 달라져요. 반응형 웹 디자인에서 자주 사용되는 유용한 단위입니다.

3.1 em (부모 요소의 크기를 기준으로 함)

em 단위는 부모 요소의 글꼴 크기를 기준으로 합니다. 부모 요소의 글씨 크기에 비례하여 크기가 정해져요.

p {
  font-size: 2em; /* 부모 요소 글씨 크기의 2배로 설정 */
}

• 설명: 만약 부모 요소의 글꼴 크기가 16px이라면, 이 경우 글씨 크기는 2em = 32px이 됩니다.

3.2 rem (최상위 HTML 요소의 크기를 기준으로 함)

rem은 최상위 요소인 html의 글꼴 크기를 기준으로 합니다. 웹 페이지 전체에서 일정한 비율을 유지하고 싶을 때 유용해요.

html {
  font-size: 16px; /* HTML의 기본 글씨 크기 설정 */
}

p {
  font-size: 1.5rem; /* 기본 글씨 크기의 1.5배로 설정 */
}

• 설명: html 태그의 글씨 크기가 16px이라면, 1.5rem = 24px이 됩니다.

3.3 vw (Viewport Width)

vw는 화면 너비(뷰포트 너비)의 백분율을 나타냅니다. 화면 크기에 따라 자동으로 크기가 조절되기 때문에 반응형 웹에서 매우 유용해요.

div {
  width: 50vw; /* 화면 너비의 50%로 설정 */
}

• 설명: 화면이 커지면 div의 너비도 커지고, 화면이 작아지면 너비도 작아집니다.

3.4 vh (Viewport Height)

vh는 화면 높이(뷰포트 높이)의 백분율을 나타냅니다. vw와 같은 원리로 동작하지만, 높이를 기준으로 합니다.

div {
  height: 30vh; /* 화면 높이의 30%로 설정 */
}

• 설명: 화면의 높이에 따라 div의 높이가 조절됩니다.

3.5 % (백분율)

백분율 단위는 부모 요소의 크기에 대한 백분율로 크기를 설정할 수 있어요. 레이아웃을 동적으로 설정할 때 유용해요.

div {
  width: 80%; /* 부모 요소 너비의 80%로 설정 */
}

• 설명: 부모 요소가 1000px이라면, 이 경우 div의 너비는 800px이 됩니다.

오늘은 CSS에서 사용되는 다양한 크기 단위에 대해 알아보았어요.

절대 단위인 px, cm부터 상대 단위인 em, vw, %까지, 각각의 단위는 서로 다른 상황에서 유용하게 사용됩니다.

이 단위들을 잘 이해하고 적절히 활용하면 더 유연하고 반응형이 좋은 웹 페이지를 만들 수 있어요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱