[20231220 TIL] 미디어 쿼리와 CSS 단위(px, %, em, rem, vw, vh)

Haizel·2023년 12월 20일

🧹 유데미 취업부트캠프

목록 보기

6/45

⏰ Today I Felt.

어제밤 여독의 여파로 아침 버스에서 자면서 왔다. 혹시 몰라 중간중간 어느정도 왔나 체크했는데, 마지막에 눈을 떴을 때, 이미 내릴 정류장을 지나치고 있었다.
다행히 한정거장만 더 간거라 늦진 않았지만, 앞으로는 혹시 모를 상황을 위해 알람을 맞춰놔야겠다.
점심으로 닭볶음탕을 먹었는데 맛있음 + 가까움 + 저렴의 콤보였다.
오늘도 TIL 작성 완료 !!!!!

✍️ Today I Learned.

01. 절대 단위 vs 상대 단위

웹 개발에서 가장 전통적인 측정 단위로 사용되던 절대 단위인 px에서, 반응형 웹 디자인이 대두되면서 점차 상대 단위를 이용한 웹 사이트 스타일링이 많아지고 있다. 각 CSS 단위의 차이는 무엇인지 알아보자!

✴︎ 절대 단위

절대(absolute) 단위는 어떤 상황에서든 항상 고정된 단위를 말한다.

대표적으로 px, pt, 그리고 cm, in 등이 있다.

✴︎ 상대 단위

상대(realative) 단위란 그 크기가 고정되지 않고, 어떤 기준에 따라 유동적으로 바뀔 수 있는 단위를 말한다.

대표적으로 %, em, rem, vw, vh, 등이 있다.

02. CSS 단위

✴︎ px(Pixel)

px은 웹 개발에서 사용되는 가장 전통적인 측정 단위로, 화면의 단일 점을 나타내는 절대적인 단위이다.

예를 들어 해상도가 1920x1080인 이미지가 있다면 해당 이미지의 width(너비)는 1920px이고, height(높이)는 1080px이 된다.

⭕️ 장점

요소의 크기와 위치 지정을 정밀하게 제어할 수 있다.
테두리, 그림자, 고정 크기 이미지와 같은 비배율 요소에 적합하다.

❌ 단점

확장이 불가능하며, 사용자 설정(글꼴 크기 기본 설정 등)에 따라 변경되지 않는다.
고정된 픽셀 값으로 인해 다양한 장치나 화면 크기에 대해 대한 레이아웃 적응성과 반응성이 떨어진다.

❓ 언제 사용하면 좋을까?

고정 크기 이미지나 테두리, 그림자와 같은 크기 조정이 아닌 요소를 작업할 때
사용자의 설정이나 뷰포트 크기에 관계 없이 요소 크기에 대한 절대적인 제어가 필요할 때

✴︎ em vs rem

em과 rem은 둘 다 CCS의 font-size 속성값에 비례해서 결정되는 상대 단위이다.

차이점은 어디의 font-size 속성값을 기준으로 하는가이다.

html)

html {
	font-size : 16px;
}

✴︎ em

해당 단위의 요소가 사용되고 있는 요소의 font-size 속성값이 기준이 된다.

em은 해당 요소의 font-size를 기준으로 하기 때문에, html아닌 div요소의 font-size인 20px에 비례하여 결정된다.

div {
	font-size ; 20px;
    width: 10em; /* 20px * 10 = 200px */
}

💡 만약 해당 요소에 font-size 속성이 없다면 ?

해당 요소에 font-size가 정의되지 않았다면, 부모의 font-size 값을 그대로 상속받게 된다.

따라서 위 경우에서 div 태그 안에 font-size 속성이 없다면, html의 font-size인 16px을 상속받아 width: 10em 값은 16px * 10 = 160px로 계산된다.

⭕️ 장점

상대 단위로 확장 가능하고, 상위 요소의 글꼴 크기에 맞게 조정되므로, 디자인 유연성이 높다.
다른 부분에 영향을 주지 않고, 문서의 특정 섹션 내에서 사소한 조정 작업이 가능하다.

❌ 단점

중첩된 em 단위 사용 시 관리가 어렵고, 복합적인 효과가 발생하여 요소 크기를 예측하기 어려워진다.

❓ 언제 사용하면 좋을까?

문서의 나머지 부분에 영향을 주지 않고, 특정 섹션 내에서 사소한 조정이 필요할 때
상위 요소의 글꼴 크기에 맞는 상대 단위가 필요할 때

✴︎ rem (Root em)

rem은 루트 HTML 요소, 즉 최상위 요소인 html 태그의 font-size 속성값이 기준이 된다.

rem은 최상위 요소인 html요소의 font-size에 비례하여 결정된다.

  div {
	font-size ; 20px;
    width: 10rem; /* 16px * 10 = 160px */
  }

👉 즉 rem 단위는 해당 요소의 font-size 속성과는 전혀 상관 없다.

⭕️ 장점

루트의 font-size 속성에 따라 자동으로 조정되므로, 뷰포트 혹은 사용자 기본 설정 변화에 반응적으로 대응할 수 있다.
확정성과 반응성이 요구되는 글꼴 크기 및 기타 요소에 rem을 사용하면 활용도를 높일 수 있다.
전체 문서에서 일관된 font-size를 반영할 수 있다.

❌ 단점

루트 요소에 대한 기본 글꼴 크기 설정이 필요하고, 단위 계산이 필요하다.

❓ 언제 사용하면 좋을까?

다양한 장치와 사용자 선호도에 맞춰 반응형 디자인을 구현할 때
전체 문서에서 일관된 크기 조정을 적용하고 접근성을 유지하고 싶을 때

✴︎ vw(vertical width) / vh(vertical height)

vh와 vw는 뷰포트(Viewport, 현재 화면의 크기)의 높이와 너비에 비례해 결정된다.
즉 문서 또는 모바일 기기에서 볼 수 있는 부분의 크기가 기준이 된다.

1vh는 실제 높이값의 1/100으로, 예를 들어 현재 화면의 높이가 1000px이라면 1vh는 10px이 된다.

vw : Viewport 너비의 1% (1/100)

vh : Viewport 높이의 1% (1/100)

✴︎ %

부모 요소의 size에 비례해 결정된다.

<body>
  <div>
    <p>나는 크기가 얼마일까?</p>
  <div>
</body>

부모 요소인 div의 크기가 100px이라면 해당 size에 비례한 %만큼의 크기를 가지게 되므로, p태그의 크기는 70px이 된다. (단, body의 margin이 0이라고 가정했을 때)

	div {
    	width : 100px;
    }
	
    p {
    	width : 70%; /* 100px * 70% = 70px */
    }

03. Media Query

다양한 디바이스에서 웹 브라우징을 지원하면서, 디바이스의 뷰포트 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해졌다. 그리고 이를 위해 미디어 쿼리가 등장하게 되었다.

기본 문법

@media screen and (사이즈조건){
	//조건에 맞는 기기에 적용할 CSS
}

✴︎ 미디어 유형의 종류

미디어 유형	설명
all	기본값, 모든 미디어 유형 장치에 사용
screen	컴퓨터화면, 태블릿, 스마트폰 등에 사용하는 뷰포트 사이즈 설정
print	프린터(인쇄) 장치에 사용, 인쇄용 CSS를 설정
내용1	스크린리더기가 페이지를 소리내어 읽을 때 사용

※ 스크린리더기 : 시각장애인 분들을 위해 웹컨텐츠 읽어주는 프로그램

✴︎ 중단점(break point)

뷰포트 너비에 따른 CSS를 적용할 화면의 크기를 중단점(breakpoint)라고 한다.
중단점이 세분화될수록 더 많은 디바이스 환경에서 유연하게 반응할 수 있으나 현실적인 문제가 있기 때문에, 최소 모바일, 태블릿, PC 3분기로 나누어 처리하는 경우가 많다.

✴︎ 모바일 퍼스트(Mobile First) / 데스크탑 퍼스트(Desktop First)

모바일 퍼스트(Mobile First)

min-width를 사용한다.

/* Default CSS */
/* Mobile - Portrait(세로) */

/* Mobile - Landscape(가로) */
@media (min-width: 576px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 992px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

데스크탑 퍼스트(Desktop First)

max-width를 사용한다.

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (max-width: 767px) {}

/* Tablet */
@media (max-width: 991px) {}

/* Desktop */
@media (max-width: 1199px) {}

/* Default CSS */

해상도 범위 지정

min-width, max-width 모두 사용하며, 덮어쓰기(override)를 사용하지 않는다.

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (min-width: 576px) and (max-width: 767px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

04. 가상 선택자 :target

✴︎ :target

: 외부 링크 혹은 문서가 아닌, 동일 문서 내에서 특정 위치(target 요소)로 이동할 때, 앵커(Anchor) 태그에 :target 가상 클래스 선택자를 이용해 스타일을 적용할 수 있다.

:target으로 이동하면 URL끝에 해당

기본 문법

a:target {
	css 속성
}

예제

// html
</nav>
	 // 사이드바 열기
      <a href="#side-drawer" class="menu-btn">
        <span></span>
        <span></span>
        <span></span>
      </a>
    </header>
	// 사이드바 닫기
    <aside id="side-drawer">
      <header>
        <a href="#" class="menu-btn">
          <span></span>
          <span></span>
          <span></span>
        </a>
      </header>
      <nav>

/* css */
#side-drawer {
  width: 100%;
  height: 100%;
  background-color: rgb(29, 26, 27);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#side-drawer:target {
  display: block;
}

※ 참고자료

Haizel

한입 크기로 베어먹는 개발지식 🍰

이전 포스트

[20231219 TIL] CSS 선택자 / Grid

다음 포스트

[20231220 TIL] 미디어 쿼리와 CSS 단위(px, %, em, rem, vw, vh)

🧹 유데미 취업부트캠프

⏰ Today I Felt.

✍️ Today I Learned.

01. 절대 단위 vs 상대 단위

✴︎ 절대 단위

✴︎ 상대 단위

02. CSS 단위

✴︎ px(Pixel)

⭕️ 장점

❌ 단점

❓ 언제 사용하면 좋을까?

✴︎ em vs rem

✴︎ em

⭕️ 장점

❌ 단점

❓ 언제 사용하면 좋을까?

✴︎ rem (Root em)

⭕️ 장점

❌ 단점

❓ 언제 사용하면 좋을까?

✴︎ vw(vertical width) / vh(vertical height)

✴︎ %

03. Media Query

기본 문법

✴︎ 미디어 유형의 종류

✴︎ 중단점(break point)

✴︎ 모바일 퍼스트(Mobile First) / 데스크탑 퍼스트(Desktop First)

모바일 퍼스트(Mobile First)

데스크탑 퍼스트(Desktop First)

해상도 범위 지정

04. 가상 선택자 :target

✴︎ :target

기본 문법

예제

[20231219 TIL] CSS 선택자 / Grid

[유데미 취업부트캠프] 프론트엔드&백엔드 1주차 회고

0개의 댓글

관련 채용 정보