html & css/개념55 코드 경량화 (minify) Minify (경량화) - 무언가를 작게 만드는 것( 여기선 css코드의 크기를 줄이는 것) - css 코드를 작게 만들어 서버와 클라이언트 사이에 주고 받는 데이터의 크기를 줄이는 것이 목표 - 코드의 크기가 커지면 데이터를 주고받는 속도가 느려지기 때문 - 명렁어를 입력하거나, 웹사이트, 확장 프로그램을 통해 경량화를 할 수 있다. 2023. 11. 29. link와 import로 한번에 적용하기 link - html 태그로 css로 로드할 때 사용한다. - 별도의 css 파일을 만들어 이를 html에 삽입하는 것 - 경재성이 높고, 재사용성을 높일 수 있다. - 유지보수의 편의성이 높아진다. - 소스코드를 이해하기 좋아진다. 용량이 줄어들지 않는다. - 여러번 접속할수록 컴퓨터의 부하가 걸릴 확률이 높다. -> 캐쉬 : 한번 다운로드 받은 것은 임시 파일에 저장해 놓았다가 후에 저장된 파일을 읽어 사용하므로 네트워크를 사용하지 않으므로 경량화가 된다. DOCTYPE html> page 1 import - css 안에서 다른 css를 로드할 때 사용한다. - style 안에서 link하는 것 - @import를 이용하여 삽입한다. - 별도의 css 파일 안에서도 사용하여 동작할 수 있다. DOCT.. 2023. 11. 28. 움직임 주기 - transition (전환) transition - css의 여러가지 속성(효과)들의 어떤 값이 변경되었을 때 그 전환을 부드럽게 하는 기능 ex) 폰트의 크기가 10에서 100이 될때 자연스럽게 전환되는 것 전환을 제공하기 위한 기능 1. transition-property - 효과의 대상을 정하는 속성 a { font-size: 3rem; display: inline-block; /* transform 효과는 엘리먼트가 block level 요소이거나 inline-block인 경우에만 동작한다. */ transition-property: all; /* a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다. */ /* 장면전환 효과를 누구에게 줄 것인가를 정하는 것 */ 2. transition-duration.. 2023. 11. 28. 변형 (transform) 소개 transform - 요소의 크기 조절, 회전, 비틀기 등을 하는 것 - https://codepen.io/vineethtrv/pen/XKKEgM 통해 다양한 기능을 확인할 수 있다. DOCTYPE html> h1 { background-color: deepskyblue; color: white; display: inline-block; padding: 20px; font-size: 3rem; margin: 100px; transform: scaleX(2); /* x축으로 2배 커지는 것 */ transform: scaleY(2); /* 밑에있는게 위를 덮어버림 */ transform: scaleX(2) scaleY(2); /* 한번에 써서 두개의 값을 모두 적용할 수 있다. */ transform: s.. 2023. 11. 28. 이전 1 2 3 4 ··· 14 다음
