[SCSS] 마우스 오버 시 채워지는 테두리 애니메이션 효과
개발하는 프로젝트에서 디자이너가 요청해서 만들게 되었는데, 추가로 생기는 요소나 CSS 라인을 최소화 해야 했다. 그래서 온라인에 나도는 팁들을 쓰지 않고 약간 치트성? 으로 만들었다.
CSS
[CSS] 일반 요소 혹은 테이블에서 말 줄임표 (..) 적용
위 코드를 상황에 맞게 수정해서 사용하자.
[CSS] font-size를 10px 이하로 적용이 안될 때
크롬 외 일부 브라우저는 브라우저 설정으로 최소 폰트 사이즈를 지정하고 있다. 각자 브라우저 설정을 하면 원하는 결과를 얻을 수 있겠지만 그게 불가능 할 경우에는 아래와 같이 적용하면 된다. 위와 비슷한 방식으로 적용하면 된다.
[CSS] 모바일에서 터치 이후 hover css 적용되는 문제
css에서 :hover를 사용해서 적용하면 마우스 오버했을때와, 모바일에서 터치했을 때 효과가 적용된다. 하지만 모바일에서는 추가적으로 다른 곳을 터치하지 않는 이상 저 효과가 지속되어 생각한대로 적용되지 않는 문제가 발생한다. 이 부분을 해결하기 위해 검색하다 나온 부분이 있어 이를 메모해 놓는다.
[CSS] 특정 언어에만 폰트 적용하기
영문 대문자 : U+0041-005A 영문 소문자 : U+0061-007A 숫자 : U+0030-0039 한글 : U+AC00-D7A3 unicode-range 속성에 위 코드를 선택적으로 적용한다. (여럿 적용할때는 쉼표 사용) 그 다음 font-family 를 사용할 때 대체 폰트까지 명시해서 사용한다.