728x90 반응형 Parallax10 비주얼 스튜디오 코드 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: .. 2023. 7. 4. 비주얼 스튜디오 코드 57 _ parallax 05 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.. 2023. 6. 30. 비주얼 스튜디오 코드 50 _ Parallax02 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.. 2023. 6. 27. 비주얼 스튜디오 코드 48_Parallax 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으로 창이 뜬다. 2023. 6. 26. 이전 1 2 다음 728x90
