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. 반응형 사이트 - 컨텐츠 영역 레이아웃 레이아웃 연습을 할때 해봐서 알겠지만, 반응형 사이트를 만들때 주의할 점으로는 왼쪽과 오른쪽 컨텐츠 영역은 고정을 시키고 가운데 영역이 줄어 들 수 있도록 코딩을 해줘야한다. (3개의 영역 모두 width 값을 % 로 정할 경우에는 반응형 사이트를 만들경우 3개의 영역이 같이 줄어드게 된다.) ※ 예제 소스 반응형 사이트 컨텐츠 반응형 사이트 왼쪽 컨텐츠 반응형 사이트 왼쪽 컨텐츠1 반응형 사이트 왼쪽 컨텐츠2 반응형 사이트 왼쪽 컨텐츠3 반응형 사이트 가운데 컨텐츠 반응형 사이트 가운데 컨텐츠1 반응형 사이트 가운데 컨텐츠2 반응형 사이트 가운데 컨텐츠3 반응형 사이트 오른쪽 컨텐츠 반응형 사이트 오른쪽 컨텐츠1 반응형 사이트 오른쪽 컨텐츠2 반응형 사이트 오른쪽 컨텐츠3 * 레이아웃 */ body {.. 2022. 4. 12. 가상요소 (::before , ::after) 1.가상 요소와 가상 클래스 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있다. 2. 가상요소 종류 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택. ::marker 목록 아이템 앞에 붙는 마커를 선택. ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택. ::first-line 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택. 2. 적용 예.. 2022. 4. 11. box-sizing 1. box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. 박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다. box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외... 2. box-sizing 문법 /* 기본 속성 */ box-sizing: content-box;(기본값) → border, padding 값이 포함되지 않는다. box-sizing: border-box; → border, padding 값이 포함해서 width값을 계산한다. /* 기본 값으로 설정합니다. */ box-sizing: initial; /.. 2022. 4. 10. IR효과기법 /* IR효과(IR기법) */ /* 이미있는 이미지의 대체 텍스트를 제공 하는경우 */ .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미 있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할때 */ .ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 대체텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때*/ .ir_su {overflow: hidden; position: absolute; width: 0; height:.. 2022. 4. 10. 이전 1 2 3 4 ··· 41 다음
