조반짝의 도전일지

탭메뉴(영화차트 스와이퍼) 복습 swiper 접속 layout copy chart1 중간에 붙여넣기 swiper script 붙여넣기 위에서 이미 swiper const 지정을 했기 때문에 const 대신에 let swiper로 변경한다. 이미 지정된 const swiper는 const 삭제한다. loope 빼고 밑에 다 삭제하고 '.swiper' >' .swiper2 '로 변경 swiper-wrapper 마크업 reset.css에 여백초기화 부분에 figure, figcaption 추가하기 reset.css 에 .icon 스타일 추가하기 html 에 icon 이름을 넣어주면 reset에 넣은 icon 이미지가 들어간다. .chart1 css 편집 img를 100%로 지정하고 포스터를 기준으로 rank가..

탭메뉴 html 마크업 #movie css 편집 위아래 여백 100px 떨어뜨리기 movie 탭 li 편집 반응형 적용하기 media.css 편집 movie_title 사이즈 편집 화면크기 960px 화면크기 768px ir_su 살리기 reset.css 에서 ir_su 코드 가져오기 밑에 선 가상요소로 넣기 ::before로 넣어준다. active 가상요소 만들기 화면크기600px .row의 가상요소 만들기 탭메뉴 jquery script 영화포스터 만들기 swiper 링크 걸기 css, js 링크 html layout 복사해서 붙여넣기 swiper-slide 각 div 안에 이미지 넣기 .movie_chart1 css 편집 css setting .swiper-slide image 편집 reset.cs..

닷메뉴_ 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: ..

1. 배경 - 영상 넣기 글꼴넣기 다른방법으로 폰트 넣기 font : 17px 1.4(줄간격) 폰트종류 body css편집 wrap에서 fixed 하기 object-fit: cover; 비율 맞추기 html 마크업 #circle css 편집 #circle 3d효과 지정 #circle html 세부 마크업 #circle article css 편집 위치 정하기 #circle html 세부 마크업2 #circle article h2 css 편집 #circle article .inner css 편집 article 숨겨주기 div 하나하나 편집해준다. face1 부터 편집 face1 html 마크업 div 6개가 필요하다. 폰트어썸 이미지를 넣어야하기 때문에 폰트어썸 링크를 걸어주자 i태그 밖에 p태그를 추가해준..

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 부분 복사..

▶ 네비게이션을 닷메뉴 형태로 변경 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 편집 .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..

● 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로 나..

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

● 파비콘 링크하기 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..