728x90 CSS46 [JS / CSS] 캐러셀 만들기 (숫자 버튼) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw; transition: all 1s; } .slide-box img { width: 100%; } 이미지 사이즈 일정하게 만들기 이미지 브라우저에 꽉 차게 만듦 .slide-box { width: 100vw; float: left; } .slide-container 너비를 300vw로 설정함으로써, 이 컨테이너는 뷰포트의 세 배 너비를 가지게 됩니다. 이는 세 개의 슬.. 2024. 3. 24. [CSS] display:none 대신 사용하는 visiblity CSS display=none; => 대상을 숨길 때 사용 => opacity: 0; 도 사용 가능 visibility : hidden 을 써야 애니메이션이 잘 먹는다. .black-bg { visibility : hidden; opacity : 0; } .show-modal { visibility : visible; opacity : 1; } opacity: 0; 의 반대는 opacity: 1; 을 사용 visilbility: hidden 반대로는 visible 을 사용해주면 된다. transition : all 1s; = 1초에 걸쳐서 천천히 변하게 해달라는 의미 2024. 3. 21. CSS 메모 보호되어 있는 글 입니다. 2024. 1. 12. [생활코딩] 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. 이전 1 2 3 4 5 6 7 8 다음 728x90
