내마음대로만들어보자326 lightgallery.js 1. lightgallery.js https://sachinchoolur.github.io/lightgallery.js/ lightgallery.js lightgallery.js V1.0.0 Full featured javascript lightbox gallery, No dependencies. View on github Get a license sachinchoolur.github.io 2. CSS / JS 연동 (Doc 참고) Blend Effect Background-blend-mode와 mix-blend-mode blur brightness contrast grayscale hue-rotate invert opacity saturate sepia Mix /* 라이트 박스 */ .square a .. 2022. 4. 17. 이미지 슬라이드 - slick.js 1. 배너 이미지 슬라이드 slick.js https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 이미지 슬라이드가 동작하는 구조와 원리를 알아보자. 2. CSS / JS 연동 반응형 사이트 가운데 컨텐츠 Slick Slider Slick.js를 이용한 이미지 슬라이드 효과입니다. Responsive Site슬라이드 플러그인을 이용한 반응형 이미지 .. 2022. 4. 17. 한줄효과 / 두줄효과 /* 게시판1 */ .notice1 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;} .notice1 li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;} .notice1 li:before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #449ce2; position: absolute; left: 0; top: 6px; } * 게시판2 */ .notice2 {position: relative;} .notice2 h5 {font-si.. 2022. 4. 15. position - absolute, relative, static, fixed 1. postion position 요소의 위치를 지정해주는 역할을 한다. 2. 적용 방법 position : static | absolute | fixed | relative 3. 속성 - static : 속성의 정상적인 위치를 설정한다.(기본값) - absoulte : 요소의 위치를 절대값으로 지정한다. (위치를 지정할 기준점이 필요) - relative : 요소의 위치를 상대적인 위치 및 기준점으로 설정한다. - fixed : 요소의 위치를 고정으로 설정한다. * 적용예시 container 영역을 기준점으로 설정하여, cont_right 영역을 고정시키기 위해 작성한 코드 #cont_right {position: absolute; right: 0; top: 0; width: 250px;} #foot.. 2022. 4. 12. 이전 1 2 3 4 ··· 82 다음
