본문 바로가기
728x90
반응형

전체 글304

비주얼 스튜디오 코드 64_ 하이시네마 웹페이지 03 swiper 접속 use swiper from CDN에 https:// 부터 복사 브라우저 새창 열고 복사한 주소를 붙여넣는다 전체선택 후 복사 swiper.css파일 새로 만들어서 복사한 것 붙여넣기 format Document 로 정렬 정리하기 java script도 가져오기 js 주소 복사하기 java script 파일 만들고 복사한 코드 붙여넣기 swiper.css 링크걸기 java script 링크걸기 swiper html 마크업 복사해서 .slider 안에 넣기 script swiper 복사해서 붙여넣기 닷메뉴 활성 clickable: ture, 글자 삭제 후 h3, p 태그에 문구 넣기 swiper demos 원하는 디자인을 선택 후 core를 클릭하면 코드가 나온다. script 부분 복사.. 2023. 7. 5.
비주얼 스튜디오 코드 63_ parallax07 ▶ 네비게이션을 닷메뉴 형태로 변경 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분 더 참는 것이다. 욕망은 이성의 지배하에 두어라 교육의 위대한 목표는 앎이 아니라 행동이.. 2023. 7. 5.
비주얼 스튜디오 코드 62_ 하이시네마 웹사이트 만들기 02 html 마크업 css 편집 .container 편집 .header html 세부 마크업 .header css 편집 .nav html 세부 마크업 pc .nav css 편집 **로고와 네비를 꼭 float을 띄워야한다. 모바일 nav 만들기 햄버거 메뉴 만들기 반응형 화면 media css 만들기 ▼ .row 값을 화면 크기가 축소될 때마다 치수를 줄여준다. banner .nav 편집 media 편집 ◆ slick 슬릭을 2개 이상 사용시에 충돌이 나서 오류가 생긴다. 슬릭 여러개 사용시 슬릭 중 하나를 초기화 시키기 슬릭 초기화 코드 // $('.review').get(0).slick.setPosition() ◇ swiper https://swiperjs.com/ Swiper - The Most Mod.. 2023. 7. 4.
비주얼 스튜디오 코드 61 _ 비교연산자 ● A = 10 : 대입 ● A == 10 : 값(숫자), 문자 모두 같아야 참 ● A === 10 : 숫자 문자 타입 까지 모두 같아야 참 ● A ! = 10 : 같지 않다는 표시, ≠ 로 10이 아닐 때 참 ● if (조건1 && 조건2) : 2개의 조건이 모두 만족될 때 참 ● if(조건1 || 조건2) : or 2개중 하나만 만족해도 참 ● ! 조건: 조건이 반대일 때 참 ● && 는 곱했을 때 참이나오면 참 ● ||(or) 둘다 거짓일 때만 빼고 다 참 ● !(not) 반대일 때 참 ● 10진법 : 0-9 ● 2진법 : 0,1 ● 8진법 : 0-7 ● 16진법 : 0-9, A-F A=10 B=11 C=12 D=13 E=14 F=15 G=16 10 진법을 2진법으로 변환하기 ex) 16을 2로 나.. 2023. 7. 4.
비주얼 스튜디오 코드 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.
비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기 ● 파비콘 링크하기 header 영역 html 마크업 h1 > a > em / strong 마크업 nav 마크업 (nav 두개 만들예정 , pc네비게이션, 모바일 네비게이션) css편집 #header .container .row 모바일 네비게이션 편집 #mNav 편집 .ham span 편집 .ham span 가상요소 만들기 #mNav display:none; 숨겨놓기 반응형 로고 만들기 .header .logo 편집 .nav (pc버전)편집 nav float 띄우기 > html > header에 clearfix 넣기 반응형 적용하기 media.css 만들기 max-width: 1290px .container max-width: 1024px .header .nav 숨겨주기 햄버거 메뉴 나오게하기 max-w.. 2023. 7. 3.
728x90

티스토리툴바