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: 가로 방향
React : module css (전체 적용되는/컴포넌트별 css)
전체 적용되는 CSS App.js 상단에 아래처럼 css를 import하면 head에 로 박히게 된다. import "./App.css"; 컴포넌트별 css 컴포넌트 상단에 아래처럼 css를 import하면 컴포넌트별로 적용이 된다. (그래서 동일한 이름으로 들어가도 중복되지 않아 편리하다.) 파일명은 해당컴포넌트.module.css로 짓는 게 일반적이다. import styles from "./Hello.module.css"; 출처 : 코딩앙마
React : styled-components (설치 , 사용, 장단점), css파일 js에 종속시키기
styled-components 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다. 설치 터미널에 아래 코드를 입력한다. npm install styled-components * 현재 version6 이후 해당 명령어 입력 시 문제가 발생하고 있어서, npm install styled-components@5.3.10로 입력했다. 그리고 사용하고 싶은 컴포넌트 맨 위에 import해온다. import styled from 'styled-components' 사용 import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey; `; let YellowBtn = styled.button` backgrou..
여태까지 고쳐온 오류들 : 웹폰트 깨지는 현상 해결 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가..