CSS

여태까지 고쳐온 오류들 : 사파리 숫자(전화번호형태) 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..

기타 자주 쓰는 CSS : background 투명 블러 넣기

background-color: #193988a6; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);

기타 자주 쓰는 CSS : 스크롤바 가리기

브라우저 자체에서 제공하는 스크롤바를 가려달라고 하거나, 가려진 스크롤바를 보이도록 풀어달라는 요청이 있다. html::-webkit-scrollbar {width:0; height:0; background:none;}

여태까지 고쳐온 오류들 : 나눔스퀘어 16px 아래에서 깨짐

나눔스퀘어 16px 아래에서 깨짐 16px 아래로 나눔스퀘어 사용시엔 아래 css를 추가해주자. div {transform: skew(-0.03deg);}

여태까지 고쳐온 오류들 : 사파리 fixed 요소 날라가는 문제 (햄버거닫기버튼 등)

사파리 fixed 요소 날라가는 문제 사파리는 왜인지 fixed도 오류가 난다. 1. 일단은 position: absolute로 대체할 수 있는지 시도해보자. 2. 대체할 수 없는 경우엔 아래 css를 시도해보자. (시도해본 적 없으나 아래 방법으로 성공한 사람이 있다고 한다) div { position: fixed; z-index: 999999999; transform: translateZ(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; /* seems to ..