media query

뒤늦게 알아서 뼈아픈 유용한 CSS : 다크모드 만들기 (@ media (prefers-color-sheme : dark)) + :root

구축사이트 온갖 데 다 써야 할 다크모드 CSS를 공유한다. @media (prefers-color-scheme : dark) { .dark { background: #000; } } 그런데 여기서 머리를 쓰면 더욱 편리하게 사용할 수 있다. :root 활용 (이게 찐) /* 기본 테마 */ :root { --text-color: black; --background-color: white; } /* 다크 모드에 대응하는 스타일 */ @media (prefers-color-scheme: dark) { :root { --text-color: white; --background-color: black; } } /* 다크 모드에서 사용할 스타일 */ body { color: var(--text-color); b..

뒤늦게 알아서 뼈아픈 유용한 CSS : @media (orientation: landscape)

모바일 웹을 굳이 가로로 돌려서 보는 사람이 있다. media query를 px 기준으로만 잡으면 이럴 때 이미지나 테이블 등이 잘려 보일 수 있다. 그럴 때 쓰는 media query. @media (orientation: landscape) { #image-container { max-width: 100%; /* 또는 다른 원하는 크기로 설정 */ } } orientation은 사용자의 디바이스 또는 브라우저의 방향을 의미하며, 두 가지 값으로 나타낼 수 있다 : portrait: 세로 방향 landscape: 가로 방향