공부/메가박스 사이트 따라만들기
메가박스 사이트 따라 만들기 - swiper 이용
메가박스 사이트 따라 만들기 - swiper 이용
2022.02.13swiper.js 슬라이드 배너 만들기 https://swiperjs.com/에서 필요한 소스 가져오기 결과 HTML 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 style.css /* 배너 */ .banner_menu { overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; z-index: 10; } /* 슬라이드 */ .slider { width: 100%; height: 600px; } .slider .ss1 { background: url(../img/..
메가박스 사이트 따라 만들기 - header 반응형
메가박스 사이트 따라 만들기 - header 반응형
2022.02.13모바일 메뉴 미디어쿼리 @media 반응형 웹 페이지를 제작하려면 뷰포트와 미디어 쿼리를 사용해야 합니다. @media 화면 크기를 지정해놔서(1280px) 이보다 작아지면 스크롤바가 생깁니다. → 1차적으로 .container{width: 100%;} :before 정석은 ::(2개) 써서 익스플로어 8, 9까지 먹히게 합니다. 결과 HTML 메가박스 전체메뉴 style.css /* 레이아웃 */ #mNav { display: none; position: absolute; top: 10px; right: 14px; } /* 모바일 메뉴 */ .ham { display: block; width: 25px; height: 10px; background: rgba(0, 0, 0, 0); padding: 15..
메가박스 사이트 따라 만들기 - 배너영역
메가박스 사이트 따라 만들기 - 배너영역
2022.02.13배너 영역 ir 효과 대체 텍스트를 제공합니다. (background를 통해 이미지를 표현하면 대체 문자를 표현할 수 없습니다.) 결과 HTML 최신 영화 소식 전체메뉴 필름 소사이어티 클래식 소사이어티 고객센터 멤버쉽 VIP 상영시간표 빠른 예매 style.css /* 배너 */ .banner_menu { overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; } .banner_menu a { color: #fff; font-size: 16px; transition: all 0.3s; } .banner_menu a:hover { color: #c1c1c1; } .banner_menu .bm_left { f..
메가박스 사이트 따라 만들기 - 헤더영역
메가박스 사이트 따라 만들기 - 헤더영역
2022.02.13기본 셋팅 링크를 걸 때 많이 씁니다. Emmit 기능 ul>li*7>a[] float float을 사용한 상위 박스의 높이값이 0으로 설정됩니다. 즉, 영역이 사라집니다. 해결 방법 1. 똑같이 float를 사용 2. clear:both;를 사용 3. overflow:idden; 사용 4. .clearfix 사용 아래로 갈수록 추천하는 방법 → reset에 .clearfix 설정 결과 HTML 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 reset.css @charset "utr-8"; /* 여백 초기화 */ body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, ..
메가박스 사이트 따라 만들기 - 기본셋팅
메가박스 사이트 따라 만들기 - 기본셋팅
2022.02.13기본 셋팅 pc화면에서 비율을 줄여 모바일 화면에서 보일 수 있도록 하는 기술입니다. 익스플로어 브라우저를 위한 것입니다. 현재는 구 익스를 많이 사용하지 않아 죽은 소스입니다. 결과
메가박스 사이트 따라 만들기 - 시작
메가박스 사이트 따라 만들기 - 시작
2022.02.13기본준비 - 셋팅 psd 파일 다운로드 폴더 만들기 assets 폴더 생성, index.html 파일 생성 - assets 폴더 안에 css, fonts, icons, img, js 폴더 생성