HTML·CSS
-
이미지 스프라이트(Image Sprite)HTML·CSS 2022. 2. 15. 18:23
이미지 스프라이트(Image Sprite)란? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것 웹 브라우저가 서버에 요청하는 이미지가 많으면 많을 수록 웹 페이지 로딩이 오래걸린다. 이미지 스프라이트를 사용하면 단 하나의 이미지 요청으로 줄일 수 있고, 파일 관리도 간편해진다. 사용할 스프라이트 이미지↓ 원본이미지(클릭) /* 기본 설정 */ .character .c { display: inline-block; width: 424px; height: 523px; border: 1px solid red; background: url('/img/img_sprite.png') no-repeat; } /* 위치변경 */ .character .c1 { background-position: -0px -35p..
-
id/class/name의 차이점HTML·CSS 2021. 12. 30. 02:16
요소(Element) CSS jQuery 기타 id 하나의 요소만 지정 가능 선택자(Selector) 역할 수행 가능 ex) #id ${"#id_val"} getElementById 활용할때 사용 class 여러 요소에 지정 가능 선택자(Selector) 역할 수행 가능 ex) .class $(".class_val") name 여러 요소에 지정 가능 선택자(Selector) 역할 수행 불가능 $("input[name=name_val]" 에서 submit 전송 시 사용 jQuery 접근 예시 //id 버튼 //class 버튼 //name 버튼 출 처 : https://okiidokii.tistory.com/105 https://mos6502.tistory.com/1