$$config title: 웹디자이너기능사 시험대비 요약 keywords: - 외우기 $$ # 주의사항 1. css 에 `@charset UTF-8;` 넣기 2. script.js 에 `defer` 넣기 `` 3. 파일 5메가 넘지않기 - 포토샵으로 사진 자르기 4. 클래스에 . 잘 넣기 ! 5. 오타 잘 확인하기 6. 문제 잘 읽기.. 제발 !! # vscode - 폴더만들기 - css - `#style.css` - images - script - jquery 넣기 - `script.js` - index.html - css 첫줄 `@charset "UTF-8";` # 슬라이드 - 세로 이동 슬라이드 ```html

``` ```css .slider-box-1 { height:300px; overflow:hidden; } .slider-box-1 > .slides { transition: margin 0.3s; height:100%; } .slider-box-1 > .slides > div { height:100%; } .slider-box-1 > .slides > div > img { display:block; width:100%; height:100%; } .slider-box-1[data-index="0"] > .slides { margin-top:0; } .slider-box-1[data-index="1"] > .slides { margin-top:-300px; } .slider-box-1[data-index="2"] > .slides { margin-top:-600px; } ``` ``` jquery console.clear(); function SliderBox1__init() { let SliderBox1__i = 0; setInterval(function() { $('.slider-box-1').attr('data-index', ++SliderBox1__i % 3); }, 3000); } SliderBox1__init(); ``` - 가로 이동 슬라이드 ```css .slider-box-1 { height:300px; overflow:hidden; } .slider-box-1 > .slides { display:flex; /* 추가 */ transition: margin 0.3s; height:100%; width:100%; /* 추가 */ } .slider-box-1 > .slides > div { height:100%; flex-shrink:0; /* 추가 */ width:100%; /* 추가 */ } .slider-box-1 > .slides > div > img { display:block; width:100%; height:100%; object-fit:cover; /* 추가 */ } .slider-box-1[data-index="0"] > .slides { margin-left:0; /* 추가 */ } .slider-box-1[data-index="1"] > .slides { margin-left:-100%; /* 추가 */ } .slider-box-1[data-index="2"] > .slides { margin-left:-200%; /* 추가 */ } ``` - fade-in/out 슬라이드 ```css .slider-box-1 { height:300px; position:relative; } .slider-box-1 > .slides > div { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transition: opacity 0.3s; } .slider-box-1 > .slides > div > img { display:block; width:100%; height:100%; object-fit:cover; /* 추가 */ } .slider-box-1[data-index="0"] > .slides > div:nth-child(1) { opacity:1; } .slider-box-1[data-index="1"] > .slides > div:nth-child(2) { opacity:1; } .slider-box-1[data-index="2"] > .slides > div:nth-child(3) { opacity:1; } ``` # 패밀리 사이트 ```html ``` # 줄넘침 ```css .notice-list > ul { width:100%; } .notice-list > ul > li > a > span:first-child { flex:1 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } ``` # 흑백으로 ```css grayscale { filter: grayscale(100%); } ```