조반짝의 도전일지

원페이지_사이트_with_패럴랙스_스크롤링 ※ 중요) 원페이지_사이트_with_패럴랙스_스크롤링_구현 원 페이지 사이트는 하나의 사이트를 한 화면에 담는 사이트입니다. 원 페이지 사이트는 필요한 내용이 한 페이지 안에 다들어 있어야 합니다. 그래서 전체 콘텐츠의 양이 많지 않을 때 적합한 레이아웃입니다. parallax-scroll 플러그인은 배경 이미지를 조금만 움직여 패럴랙스 스크롤링 효과를 만드는 플러그인 입니다. 이때, 페럴렉스(Parallax)란? 영어 단어로 "시차" 를 뜻합니다. 시간차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것이며, 패럴랙스 스크롤링 효과는 스크롤의 움직임에 따라 콘텐츠가 반응하여 시간차 움직임을 보이는 효과를 말합니다. 이 효과는 마우스 스크롤 위치에 따라..

닷메뉴_ active 값에 변화주기 css reset #header css편집 h1 편집 #contents css 편집 #dot css 편집 active 활성화 @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; color: #222; } #header{} #header h1{ width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.5); position: fixed; left: 0; top: 0; text-align: center; line-height: ..

스크롤 시 네비게이션 보이기 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: ..

html 마크업 #contents css편집 한 페이지당 h2가 들어가도록 편집 h2 그라디이션으로 배경 넣기 #nav 편집 nav z-index : 100; cursor : 1000; 지정한다. h1 편집 .menu 편집 @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; color: #222; } .clearfix::before, .clearfix::after{ content: ""; display: block; clear: both; } #contents{ text-align: center; height: 100vh..

패럴럭스에서 했던 코딩파일에 이어서 작업한다. #nav 밑에 mNav 클래스를 만들어준다. css 편집 .mNav를 포지션을 띄워줘야 원하는 자리에 위치시킬 수 있다. 백그라운드 컬러와 너비 높이값으로 영역 잡기 top, right로 위치 잡기 햄버거 바 만들기 가상요소로 햄버거 바 2개 더 만들기 전체화면에는 메뉴가 있기 때문에 햄버거바는 없어야한다. 미디어 쿼리 화면너비 W 960px이 되면 햄버거 메뉴가 나오게 하기 display:none 을 다시 살리면 메뉴가 안보인다. 햄버거 메뉴 클릭했을 때 메뉴 슬라이드로 나오게하기 HI menu1 menu2 menu3 menu4 menu5 menu6 안녕하세요 챠오 곰방와 나마스테 사와디캅 샬롬 @charset "utf-8"; *{ padding: 0; m..

html 골격 만들기 nav 생성 contents thml생성 css 편집 편집할 태그 셋팅하기 #nav 픽스하기 position : fixed; 그라디언트로 각 페이지에 배경색 채우기 #nav 편집 float을 위치잡기 menu 위치 편집 li 가 블럭 구조이기 때문에 옆으로 나열하기 위해 inlne 구조로 변경해주고 a태그는 인라인구조와 블럭구조 성격을 가질 수 있도록 inline-block 구조로 변경한다. active 시에 글자색이 변경되도록 글자색 변경한다. h2 편집 패럴럭스 이벤트 생성 active 시에 글자색이 변경되도록 글자색 변경되는 이벤트 쿨또 menu1 menu2 menu3 menu4 menu5 menu6 Time is gold Seeing is believing Asking cos..

menu1을 클릭했을 때 section1이 나올 수 있도록 링크를 걸어준다. 나머지 section 내용 넣어주기 css reset 넣어주기 css 편집 셋팅 #contents 편집 ●background: radial-gradient (ellipse farthest-corner at center center, 색상코드 영역(0%), 색상코드 100%) 멀리있는 코너부터 서서히 바꾸어줘라 나머지 #section 도 백그라운 그라데이션 넣어주기 #nav 편집 ● position: fixed; nav 고정시키기 패럴럭스 J-Query 이용해서 script 넣어주기 꼭지점(offset) 찾기 메뉴를 클릭하면 해당 section으로 창이 뜬다.