🌐 HTML,CSS/뒤늦게 알아서 뼈아픈 유용한 CSS

뒤늦게 알아서 뼈아픈 유용한 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: 가로 방향

뒤늦게 알아서 뼈아픈 유용한 CSS : gap (flexbox)

맨날 flex 줘놓고도 margin-right 주고 nth-child에 margin-right:0주는 식으로 작업해왔는데, 요게 물건이다. margin-right 주고 삭제하고 할 필요 없음. 반응형도 거뜬하다. 사파리 등 브라우저들의 이전버전에서는 지원 안한다니 참고. (아래 지원 안하는 브라우저에서 쓰는 방법 참고) /* 단일 값 */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* 단일 값 */ gap: 16%; gap: 100%; /* 이중 값 */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* 이중 또는 혼합 값 */ gap: 16% 100%; gap: 21px 82%; /* cal..

뒤늦게 알아서 뼈아픈 유용한 CSS : webkit-box

여태까지 여러줄 텍스트를 overflow hidden하기 위해 max-height를 설정하는 뻘짓거리를 해왔다. 반응형에서는 심지어 구간별로 바꿔주기까지 했는데.. 문득 그런 css가 없을리 없다는 생각이 들었다. 역시나.. 바로 나왔다. ㅠㅠ .example p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } 호환성 : 전부 가능

뒤늦게 알아서 뼈아픈 유용한 CSS : background-blend-mode

background-blend-mode background-blend-mode는 포토샵에 있는 레이어 블랜드 모드를 html에서도 구현할 수 있도록 도와준다. 백그라운드 img url을 두개를 적으면 앞 이미지가 뒷 이미지에 블랜드된다. (자식 div 백그라운드를 부모 백그라운드에 블랜드하는 식은 안 된다. : 혹시 되는 형태를 발견하면 수정할 것) div { background: url(../images/blend.png) center 40% no-repeat, url(../images/bg.png) center no-repeat; background-size: 276px 46px, cover; background-blend-mode: hard-light; } 위 코드는 내가 실사용했던 코드를 수정한 ..

뒤늦게 알아서 뼈아픈 유용한 CSS : aspect-ratio

뒤늦게 알아서 뼈아픈 유용한 css 시리즈는 내가 2년넘게 스스로 홈페이지 구축을 해오다 늦게 알아버린 css 모음이다. 또 까먹어서 어마어마한 시간을 들여 이 작은 css 한개를 구현하는 것을 막고자 블로그에 담는다. aspect-ratio aspect-ratio는 이미지나 객체의 비율을 지정해 반응형 등을 직관적으로 다룰 수 있게 도와준다. div { width: 100px; aspect-ratio: 4 / 3; /* 4:3 비율*/ } img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } 호환성 : IE 빼고 전부 가능