조반짝의 도전일지

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

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

● 코드 정렬 : ctrl+a > ctrl + k f ● > : 바로 밑에 있는 태그를 지정할 때 사용 ex: #wrap > div 태그 명령어 줄여서 쓰는 방법 html mosue hover 마우스 오버효과 앞면입니다. mosue hover 마우스 오버효과 뒷면입니다. mouse hover_상하회전 마우스 오버효과 앞면입니다. mouse hover_상하회전 마우스 오버효과 뒷면입니다. css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; background-color: #0f2027; } #wrap{ height: 100vh; /* 정렬할 때 세로..