728x90
반응형

ON 3

비주얼 스튜디오 코드 60_ parallax 06

스크롤 시 네비게이션 보이기 html 마크업 css reset css 편집 #nav nav position: absolute 띄워주기 nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌 #contents @charset "utf-8"; *{ margin: 0; padding: 0; /* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */ box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both; } #nav{ position: ..

비주얼 스튜디오 코드 55_ parallax04

html 마크업 css 편집_contents css 편집_nav ●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드 header 높이값 if문을 이용하여 nav 액션주기 처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다. this 는 nav 이다. JHH's Website menu1 menu2 menu3 menu4 menu5 menu6 열심히 합시다. 졸지 마시고 자십시오 무슨 일 이든 안되면 반복하세요 오늘 비가 너무 많이 오네요 평양냉면 먹고싶다. 돈 많은 백수가 됐으면 좋겠다. @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-styl..

[JAVASCRIPT]5.클래스 제어하기

html 마크업 #wrap article css 편집 자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기 변수 지정 아쿠아를 클릭하면 핑크로 변경된다. addClass = classList >> 클래스를 추가한다. click하면 "on"이 발생하도록한다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); }); 클래스가 없기 때문에 false가 뜬다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); let isOn = wrap.classList.contains("on"); console.log(isOn); }); 클래스를 추가하면 true가 된다. if문을 이용해서 자바스크..

728x90
반응형