조반짝의 도전일지

보호되어 있는 글입니다.

html mark up css edit h1태그의 가상요소 만들기 폰트어썸 링크걸고 폰트어썸 넣기 폰트어썸 css edit main html mark up article 20개 만들기 article css edit 플러그인 사용 isotope 홈페이지 접속 Isotope · Filter & sort magical layouts (metafizzy.co) Isotope · Filter & sort magical layouts Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --s..

하이시네마_ 공지사항, 푸터란 만들기 html 마크업 .help는 세개의 박스를 옆으로 띄워야하기 때문에 .help안에 clearfix를 넣는다. .help css 편집 .help 안에 세개 박스 편집하기 article의 마지막 아이의 border를 0주어 박스를 삭제한다. . 클래스를 지정해줬으니 이름을 넣어줘도 된다. article > .help_box3 .notice html markup ● dl : 타이틀과 데이터를 싸고 있는 박스 ● dt : 타이틀 작성 ● dd : 데이터 작성 >> 영어사전에 많이 사용되는 형식이다. .notice css edit 기준값이 다르기 때문에 정렬이 다르다. 정렬을 맞춰줘야한다. position을 띄워서 기준점을 맞추어준다. a tag edit .card html ..

#contents openig html 마크업 opening css 편집 이미지를 포토샵에서 열어서 포토샵의 위치를 보고 background-position으로 좌표값 넣어주면 이미지가 나온다. ir_pm으로 안에 글자를 없애준다. 바 이미지 넣기 (위치는 bottom center) 이미지 배율 100%로 하려면 background-size: 100%; 설정 opening 배경이미지 넣기 100%로 사용을 했으니 #opening에 배경을 넣는다. .opening 에 padding:100으로 변경해준다. div float 띄워서 옆으로 나열하기 h3 p태그 날짜 css 편집 반응형 넣기 화면크기960PX 화면크기780PX 화면크기600PX 새로운영화 컨텐츠 만들기 #new html 마크업 #new css편..

탭메뉴(영화차트 스와이퍼) 복습 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 마크업 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..

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

패럴럭스에서 했던 코딩파일에 이어서 작업한다. #nav 밑에 mNav 클래스를 만들어준다. css 편집 .mNav를 포지션을 띄워줘야 원하는 자리에 위치시킬 수 있다. 백그라운드 컬러와 너비 높이값으로 영역 잡기 top, right로 위치 잡기 햄버거 바 만들기 가상요소로 햄버거 바 2개 더 만들기 전체화면에는 메뉴가 있기 때문에 햄버거바는 없어야한다. 미디어 쿼리 화면너비 W 960px이 되면 햄버거 메뉴가 나오게 하기 display:none 을 다시 살리면 메뉴가 안보인다. 햄버거 메뉴 클릭했을 때 메뉴 슬라이드로 나오게하기 HI menu1 menu2 menu3 menu4 menu5 menu6 안녕하세요 챠오 곰방와 나마스테 사와디캅 샬롬 @charset "utf-8"; *{ padding: 0; m..

레이아웃 01 ●header태그: 헤더는 로고와 네비가 포함된 영역 ●aside태그: css편집 바탕색은 body에서 주면된다. ●aside, section 이 float으로 띄워져 있기때문에 footer가 aside, section 밑으로 겹쳐서 들어가게된다. footer 영역에 clear:both를 주어 aside, section영역 바로 아래에 위치된다. ●반응형 @media 영역 화면너비 0~1200px 화면 너비에 따라서 화면 스타일이 다르게 나오게 된다. 화면의 크기에 따라 스타일을 따로 준다. #wrap 너비값으 100%는 wrap이 꽉 차지만 95%는 양쪽 여백이 나온다. wrap이 1200px 이기 때문에 최대크기를 1200px를 하면 충돌이 날 수 있다. 그래서 좀더 큰 크기인 1220..