조반짝의 도전일지

html mark up reset css 지정 client: 브라우저 기준으로 잡아주는 마우스 offset: 마우스가 특정 구역에 들어가면 마우스 형태가 바뀜 page:전체 페이지 잡아줄 때 사용 screen:모니터가 기준(0,0) .info css edit ● max-width: 70vw 가장 큰 사이즈 화면에서 70vw를 사용하겠다. cursor 만들기 /* 기준점이 따로 없다 */ .cursor{ position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; border: 3px solid #fff; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; /* 가장 위에 오도..

section이 회전을 해야한다. section에 시간을 줘야 움직이는게 보임 넥스트 버튼을 눌렀을 때 오른쪽에 있는 씨디가 2번, 왼쪽 씨디가 8번째이다. 기준점에서 10vw만큼 떨어져있음 script 제이쿼리는 css, 자바스크립트 style n = 0 변수 지정해준다. n++는 오른쪽 으로 회전 , n--는 왼쪽회전 rotate {n * deg = 0 * 45} deg 45도씩 증감하여 회전한다. 버튼을 누르면 section이 회전한다. 함수지정 on을 갖고 있는 액티브 값을 0으로 변수 지정 0-7번까지 인덱스 번호가 돌아갈 것이다. 회전하면서 8개의 on을 제거할 것이다. index에 들어가있는 번호(선택되어있는 번호)만 on을 넣어줄 것이다. length-1을 넣어 0부터 시작하도록한다. ●함..

화면이 움직이면 글자가 바운딩해서 나타남 html mark up css 편집 #header 편집 #dot 편집 #header 편집 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; color: #222; } li{ list-style: none; } .clearfix::after,.clearfix::before{ display: block; content: ""; clear: both; } #contents{ text-align: center; } #contents > div{ width: 100%; height: 100vh; display: flex; align-items: cent..

닷메뉴_ 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 #contents css 편집 각 article 배경색 넣기 article 한번에 편집 #header css 편집 #dot - ul(menu) css 편집 fixed 시키고 위치 변경하기 .li css 편집 menu 1-6 글자 지우기 parallax 적용 script dot 클릭하면 해당페이지로 움직이게 하기 스크롤 좌표 알아보기 페이지별 dot이 활성화되면서 해당페이지로 이동한다. C's Web menu1 menu2 menu3 menu4 menu5 menu6 언어의 한계가 곧 자기세계의 한계다. 교육은 최상의 노후대비책이다. 용기란 공포를 1분 더 참는 것이다. 욕망은 이성의 지배하에 두어라 교육의 위대한 목표는 앎이 아니라 행동이..

html 마크업 css 편집 사이드 메뉴 스타일 지정 open 버튼 만들기 클릭이벤트 액티브 이벤트 open 단추 활성화하기 사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기 open 클래스와 nav가 만나게 해야한다. 스르륵 open 되기 위해서 시간을 더해주면 된다. 하지만 .css 는 open만 되고 닫히지 않는다. .toggleClass("Open"); 을 한다. 만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때 if문 : 모든 조건을 다 수용할 수 있다. ● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드 ●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드 We..

패럴럭스에서 했던 코딩파일에 이어서 작업한다. #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..