🌐 HTML,CSS/실무에서 자주 발생한 오류들

여태까지 고쳐온 오류들 : 웹폰트 깨지는 현상 해결 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 아무리 먹여봐야 소용이 없다. 사파리는 참 지정해줘야 하는 것들이 많은듯.. 호환성: 문제없음.

여태까지 고쳐온 오류들 : 사파리 video가 안보인다/재생도 안 된다

사파리에서 videos태그로 걸어둔 video가 안 보이는(정확히는 재생버튼만 허공에 떠있는) 경우가 있다. 버튼을 눌러도 재생되지 않는데, 이 경우 확장자가 webm인지 확인해보자. 사파리는 webm 확장자를 못 읽는 듯 하다. + 사파리에서는 백그라운드 컬러를 지정해줘야 재생버튼이 허공에 둥둥 떠있지 않다. background-image로도 활용해 볼 수 있을 듯 하다..

여태까지 고쳐온 오류들 : 나눔스퀘어 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 ..