$$config title: Web2 수업 10일차 keywords: - ( fix, sticky ) - jQuery $$ # 상단고정 fix, sticky ```css top bar 상단고정 : fixed, sticky. 1번방법 position : fixed (=absolute) top : 0 (상단붙이기) width:100%; (좌우벌리기) or left : 0; right:0; .content margin-top:calc( 65px + 16px); (띄어쓰기해야함!!) 위로 붙어버린 사진 벌리기 2번방법 position:sticky; (= relative) 위치값을 한개라도 정해줘야함 top:0; 부모를 벗어날수없음. 부모의 최하단까지밖에 내려가지 않음. ``` # 그라디언트 ``` css background-image:linear-gradient ( 각도(deg), rgb(0,0,0) 30% (왼쪽에서부터30%) rgb(7,7,7) 100%) ) 선형그라디언트 ``` [컬러헌트](https://colorhunt.co/) [컬러헥스](https://www.color-hex.com/) [그라비언트](https://www.grabient.com/) [2color](https://2colors.colorion.co/) # 자바스크립트 ```js cdnjs 가서 jquery복사하고 html에 붙여넣기 // $() = 괄호 내부를 찾는다 $(window).scroll(function(){ let scrollTop = $(window).scrollTop(); // window전체(html)을 찾아서 scroll의 Top으로부터의 위치. if(scrollTop == 0){ //top-bar라는클래스를 찾는다 $('.top-bar').removeClass("hover"); } else{ $('.top-bar').addClass("hover"); 호버라는 클래스를 찾는다. css에서 :hover를 .hover로변경. } }) ``` # visual studio code 다운받아야할것 : auto rename tag , Beautify , live server, korean language pack 파일 만들어야할것 : index.css / index.html / index.js / common.css / common.js Beautify적용 : f1 이후 beautify file 클릭 index.html에 추가 일반환경에서는 ctrl이지만, code에서는 alt + shift 누르면 div 한번에 div 한번에 div 한번에 적용가능하다. defer index.js 하면 defer는 제일 마지막에 함수를 실행해준다.