TIL/HTML + CSS
[240116] 메타(meta) 태그
위와 같이 참고자료 https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com
TIL/HTML + CSS
TIL/HTML + CSS
[240115] 이미지 스프라이트와 자동화
이미지 스프라이트란? 웹사이트들을 개발자도구로 뜯어보면 네트워크 탭에서 가끔 저런 이미지의 모음들을 볼 수 있다. 이게 이미지 스프라이트이다! 이미지 스프라이트란, 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다. 이미지 스프라이트, 장점과 단점 장점 단점 서버 요청 횟수를 줄여 로딩 속도를 줄여준다 하나의 스프라이트 이미지 파일만 관리하면 된다 img 태그가 아니라 css의 background-image로 처리되기 때문에 alt 속성을 사용할 수 없다 일부 이미지의 수정이 필요한 경우 파일을 다시 수정해야 한다 언제 사용할까? 의미상 크게 중요하지 않고 디자인적인 이미지의 경우 수정이 자주 되지 않는 이미지의 경우 어떻게 ..
TIL/HTML + CSS
[240113] vendor prefix
vendor prefix란? CSS를 작성하면서 위와 같은 코드를 본 적이 있을 것이다. -webkit/-moz 등이 바로 벤더 프리픽스이다. 벤더 프리픽스(vendor prefix)란, 주요 웹 브라우저 공급자(vendor)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 해당 기능을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 주요 브라우저와 vendor prefix 브라우저 prefix Chrome, Safari 등 크로미움 기반 브라우저 -webkit 파이어폭스 -moz 엣지 (크로미움 이전) -ms 오페라 -o 지금까지는 남발했던 vendor prefix 나는 지금까지 이렇게 벤더 프리픽스를 활용했다. caniuse 를 활용해서 확인 (특이한 속성 이용할 경우) 크로스 브..
