부트캠프/멋쟁이 사자처럼

19+DAY_멋사 프론트엔드 부트캠프 14기_TIL

NamDoHyeon 2025. 5. 19. 16:35

What I Learned Today

오늘 오전에는 라이트. 다크 모드에 대해서 실습했다. 그리고 과제 리뷰를 했다.

 

라이트/다크 모드는 미디어쿼리를 사용해서 설정할 수 있다.

@media (prefers-color-scheme: <light/dark> {
	CSS 스타일링
}

하지만 이 방법으로 만들면 코드가 상당히 복잡해진다. 그래서 새롭게 등장한 함수가 있다.

/* 
미리 선언해두기
이때 텍스트는 자동으로 검은색/흰색으로 바뀐다.
*/
:root {
	color-scheme: light dark
}

/* 사용 방법 */
CSS 속성: light-dark(라이트 모드에서 보여질 색,다크모드에서 보여질 색)

 

주말 과제가 apple 사이트 ui 만들기였다.

모바일 사이즈일때

 

화면을 늘리면 아래처럼 배치가 바뀐다.

데스크탑 사이즈일때

 

오후에는 장바구니 ui 만들기 실습을 했다.

장바구니 실습 결과

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

미디어쿼리를 이용한 라이트/다크 모드에서도 레이아웃 변경이 가능하지만 사용자 경험을 유지하기 위해 색상만 바꾼다고 한다.

svg 모드에서도 미디어 쿼리를 통해 라이트/다크 모드를 사용할 수 있지만 새로고침을 해야 반영이 된다.

이유는 html 파일을 불러올때 당시의 화면 모드를 따라 불러오기 때문에 그렇다.

 

점심에 너무 배고파서 밥을 많이 먹는데 너무 졸리다... 적게 먹어야겠다.

 

반응형