조반짝의 도전일지

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..

html 마크업 네비게이션 마크업 모바일 바 마크업 CSS 편집 ●row 넣는 이유는 완충작용으로 여백에 여유를 주어 다양한 크기의 디바이스에 글씨가 잘리지 않도록함 ●반응형 크기적용하기 ● container width: 100% 설정 해야 화면 조정시 같이 크기가 변함 row값은 화면 크기에 따라 다르게 설정한다. 화면 크기가 작을수록 작게 설정 [ min-960px media 설정] 네비게이션 스타일설정 navBG 의 기준점을 container로 잡는다. 네비게이션 마우스오버 시 하단 바 나오게 하기 네비게이션 슬라이드 다운 효과 960px 이상일 때 네비게이션 슬라이드 효과 지정 ●.width() : 요소의 너비값만 구할 경우 ●.innerWidth() : 요소의 너비 값 + padding을 더한 ..

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..

모바일 네비게이션 01 html 마크업 css 편집 #contents 편집 ●vw : 세로로 잘라서 나눠서 쓰겠다. ●vh : 가로로 잘라서 나눠서 쓰겠다. #nav 편집 h1, nav float left/ right 줌 nav 포지션 픽스를 해주어 고정시키고 포지션을 띄우면 너비값을 잃기 떄문에 w:100%를 줌 menu 를 옆으로 나열하기 위해 inline 구조로 변경하고 active는 인라인구조와 블럭구조의 성질을 가지게한다. active a 를 만들어서 컬러값을 넣어야 변경됨 반응형 적용하기 #nav .mNav 편집 햄버거메뉴 만들기 - 영역 잡기 햄버거메뉴 위치 잡기 햄버거 메뉴 바 만들기 햄버거 메뉴 바 2 , 3 만들기 **실무팁 나중에 디자인된 부분을 보고 할 때는 포토샵 파일을 참고해서 ..