🌐 HTML,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: 가로 방향

여태까지 고쳐온 오류들 : 웹폰트 깨지는 현상 해결 5가지

이번에 보안상 문제로 링크로 걸려있던 웹폰트를 @font-face로 로컬 경로로 임베드하면서, 브라우저에서 글자가 깨져보이는 현상이 발견되었다. 특히 13px같이 작고 홀수사이즈인 폰트는 더더욱 깨져보인다. 브라우저마다 폰트를 랜더링하는 방식이 달라 이를 원천적으로 해결할 방법은 없다..만, 꼼수는 있다. 꼼수 1 : -webkit-text-stroke -webkit-text-stroke: 1px; -webkit-text-stroke: 1px rgba(0,0,0,0.1); 꼼수 2 : text-shadow text-shadow: #fff 0px 1px 1px; text-shadow: #333 0px 0px 1px; //검은색 글자용 꼼수 3 : -webkit-font-smoothing -webkit-fo..

여태까지 고쳐온 오류들 : 어느 상황에서도 100%로 보이는 비디오 BG 만들기

여태까지 비디오 BG를 메인에 깐 홈페이지들을 여럿 만들면서, 다양한 이슈를 경험했다. 제일 자주 맞닥뜨리는 상황은, 사파리에서 재생되지 않는 것. https://sunshineyellow.tistory.com/57 여태까지 고쳐온 오류들 : 사파리 영상 백그라운드가 안 뜬다/자동재생된다 여태까지 고쳐온 버그들 시리즈는 똑같은 오류가 발생하지 않도록 하고, 똑같은 오류가 발생했을 시 조속한 대처를 할 수 있도록 기록하는 시리즈다. 숫자 순서대로 시도해본다. 사파리 영상 백 sunshineyellow.tistory.com https://sunshineyellow.tistory.com/67 여태까지 고쳐온 오류들 : 사파리 video가 안보인다/재생도 안 된다 사파리에서 videos태그로 걸어둔 video가..

여태까지 고쳐온 오류들 : 사파리 숫자(전화번호형태) css가 안먹히는 문제

사파리 숫자(전화번호형태) css가 안먹히는 문제 a[href^=tel] { color: inherit; text-decoration: none; } reset.css에 추가해둬야겠다. important 아무리 먹여봐야 소용이 없다. 사파리는 참 지정해줘야 하는 것들이 많은듯.. 호환성: 문제없음.

뒤늦게 알아서 뼈아픈 유용한 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..