728x90 > 프로그래밍 언어/CSS29 [생활코딩] CSS 수업 정리 (17) 미니파이의 목표 : css 코드를 작게 압축해서 서버와 클라이언트 사이에 주고받는 데이터의 크기를 줄이는 것 코드 경량화(minify) - CSS (opentutorials.org) 코드 경량화(minify) - CSS CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify opentutorials.org 왼쪽에 있는 코드를 clean-css라고 하는 도구를 이용해서 minify 한 것 원래 original 소스는 1186 문자가 있었는데 minify 된 후에 793 문자로 축소 프로퍼티가 없기 때문에 있으나 마나한 코드가 돼서 무.. 2023. 7. 24. [생활코딩] CSS 수업 정리 (16) 웹페이지 만들다 보면 여러 개의 웹페이지가 생기는데 여러 개의 웹페이지가 공통적으로 동일한 css를 갖게 되는 경우가 있는데 그걸 해결하기위한 방법 2개의 페이지와 (2개의 html) 1개의 동일 css 설정 page1 page2 h1 { color: red; } 링크의 중복 해결방법 link 사용 외의 다른 사용 방법 @import 2023. 7. 24. [생활코딩] CSS 수업 정리 (15) 전환 속성들의 값이 변경됐을 때 그 전환을 부드럽게 하는 기능 Click a { font-size: 3rem; } 사용자가 마우스를 클릭했을 때, 효과적용 하는 방법 = active 사용 display:inline-block 을 사용해야 transform transition이 적용된다 transform 이라고 하는 속성은 a 엘리먼트가 block level 엘리먼트 이거나, inline-block 인 경우에만 동작. inline 엘리먼트에서는 동작 X 부자연스러운 움직임 동작을 자연스럽게 하려면 = 전환 사용 a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다 라는 의미 transition-duration:1s; 0.1s al.. 2023. 7. 24. [생활코딩] CSS 수업 정리 (14) 변형 엘리먼트의 크기(조절), 엘리먼트의 회전 또는 비틀기 h1이 화면 전체를 쓸 경우, 트랜스 폼 효과의 결과를 보기 어렵다. display:inline-block; 사용 transform 효과들 1 -> 2 transform:scaleX(2) 두 배 했다는 뜻 Hello Transform! h1 { background-color: aqua; /* 텍스트 사이즈 */ color: white; display: inline-block; padding: 5px; /* 폰트사이즈 3배 */ font-size: 3rem; margin: 100px; transform: scaleX(2); } 0.5 1/2 즉, 반으로 크기를 줄인 것 X 의미 : X축으로 변형 일어난 것 y 축 또한 .. 2023. 7. 23. [생활코딩] CSS 수업 정리 (13) blend 클래스 태그 생성 style 효과 background-image, background-color 생성 img 는 표시되는데 background color 가 표시 안되는 이유 : img가 위에 있는 것 같은 상태이기 때문 blend : 혼합하려는 대상 있어야 함 background img 하고 background color 를 혼합 혼합할 때 사용하는 것 : background-blend-mode background-size:cover; css 효과 적용 rgb의 젤 끝에는 투명도 지정 가능 r: red g: green b: blue 빨간색(255)는 빨간색인데 투명도 0.5 라는 의미 blend-hover 사용 transition.. 2023. 7. 23. [생활코딩] CSS 수업 정리 (12) 그래픽 대상에게 여러가지 효과를 줄 수 있는 기능 img 불러오기 img에 필터 주기 webkit : 크롬이나, 사파리에서 사용하는 벤더 프리픽스 ( 최신이라 지원하는 경우가 적을 때 사용하는 접두사 ) grayscale(100%) 적용 나머지 벤터 프리픽스도 적용 현시점 그냥 filter 만 써도 적용된다. 텍스트에 filter 적용 blur은 효과의 강도를 px 로 준다 hover 적용 (마우스 올라갈 때 이미지 변환) 필터 효과를 부드럽게 적용하는 방법 transition 모든 효과에 대해서 1초 동안 장면전환을 한다 라는 뜻 codepen 사이트 활용 2023. 7. 22. 이전 1 2 3 4 5 다음 728x90
