728x90 반응형 media11 AOS(Animate on scroll library) 보호되어 있는 글 입니다. 2023. 8. 9. 비주얼 스튜디오 코드 82_반응형 웹갤러리 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.. 2023. 7. 19. 비주얼 스튜디오 코드 74_ 하이시네마 footer 하이시네마_ 공지사항, 푸터란 만들기 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 .. 2023. 7. 11. 비주얼 스튜디오 코드 71_하이시네마_컨텐츠(유투브 영상 삽입) #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편.. 2023. 7. 10. 비주얼 스튜디오 코드 68_ 하이시네마 탭메뉴_02 탭메뉴(영화차트 스와이퍼) 복습 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가.. 2023. 7. 7. 비주얼 스튜디오 코드 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. 이전 1 2 다음 728x90
