html
메가박스 사이트 따라 만들기 - 고객센터 / SVG
메가박스 사이트 따라 만들기 - 고객센터 / SVG
2022.02.13고객센터/SVG SVG 아이콘은 SVG로 이용할 경우 선명도가 뛰어나고, 반응형이 지원됩니다. 최근 많이 사용하는 추세이며, 단점은 익스플로러 옛날 버전에서는 지원이 안됩니다. 결과 HTML 고객센터 1:1 문의 단체관람 자주묻는 질문 분실물 문의 style.css /* 고객센터 */ .service ul { overflow: hidden; } .service li { float: left; width: 50%; height: 193px; box-sizing: border-box; border: 1px solid #d7d7d7; text-align: center; } .service li a span { display: block; width: 120px; height: 120px; margin: 20p..
메가박스 사이트 따라 만들기 - 메가박스 할인카드
메가박스 사이트 따라 만들기 - 메가박스 할인카드
2022.02.13메가박스 할인카드 min-height 영역이 없을 경우 min-height값을 줘서 영역을 잡아줍니다. 결과 HTML 메가박스 할인카드 T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) style.css /* 할인카드 */ .card { padding: 17px; } .card ul {} .card ul li { position: relative; border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; min-height: 102px; box-sizing: border-box; } .card ul li span { p..
메가박스 사이트 따라 만들기 - 공지사항
메가박스 사이트 따라 만들기 - 공지사항
2022.02.13공지사항 한 줄 효과 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 결과 HTML 공지사항 전체 공지 전체 2019.05.26 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.27 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.27 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.28 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 영화관 공지 안양 2019.05.26 [영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 인덕원 2019.05.27 [..
메가박스 사이트 따라 만들기 - 새로운 영화 영역 2
메가박스 사이트 따라 만들기 - 새로운 영화 영역 2
2022.02.13새로운 영화 영역 2 box-sizing: border-box; 조건 : width값이 50px / 마진 20px / 패딩 10px / 보더 1px 결과 : 총 width값 : 90px(패딩, 보더값 불포함) 결과 HTML 새로운 영화 로그 원: 스타워즈 스토리 2016년 10월 28일 개봉 7.5/10 액션미국, 오스트레일리아 142분12세 이상 관람가 단숨에 행성 하나를 파괴할 위력을 지닌 데스 스타가 완성되기 전에 설계도를 훔쳐내야 하는 이번 작전의 성공 확률은 고작 2.4%. 생사도 모르는 아버지에 얽힌 비밀을 밝히려는 진을 ...비롯해 유능한 정보 요원 ‘카시안’(디에고 루나), 두 눈이 멀었지만 탁월한 무술 실력을 지닌 ‘치루트’(견자단), 전투 베테랑 ‘베이즈’, 파일럿 ‘보디’, 시니컬한 ..
메가박스 사이트 따라 만들기 - 오프닝 영역
메가박스 사이트 따라 만들기 - 오프닝 영역
2022.02.13오프닝 영역 글씨는 안 보이고 이미지만 보이게 함 → class에 ir_pm을 넣어줌 결과 HTML Grand Opening 2019.01 ~ 2019.03 LIFE THEATER로 새롭게 시작하는 메가박스를 만나보세요! 리뉴얼 오픈 경기도안양12월 8일 리뉴얼 오픈 경기도인덕원 사거리12월 8일 리뉴얼 오픈 경기도용인테크노밸리12월 8일 style.css /* 오프닝 */ .opening { padding: 100px 0; text-align: center; color: #bb9b51; } .opening h2 { margin-bottom: 15px; } .opening h2 .grand { background-position: 0 -175px; display: inline-block; width: 3..
메가박스 사이트 따라 만들기 - 이벤트 영역
메가박스 사이트 따라 만들기 - 이벤트 영역
2022.02.13이벤트 영역 이미지는 인라인 구조이기 때문에 폰트 사이즈도 영역이 잡힘 → 이미지에 display: block;을 주기 결과 HTML 새로운 이벤트 style.css /* 이벤트 */ .event { overflow: hidden; padding: 100px 0; } .event img { display: block; } .event h2 { font-size: 30px; font-weight: 500; margin-bottom: 20px; } .event .event_left { overflow: hidden; float: left; width: 66%; margin-right: 2%; } .event .event_left .event_box1 { float: left; width: 50%; } .ev..
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더 반응형
2022.02.13영화 차트 이미지 슬라이드 반응형 모바일에서도 원활히 볼 수 있도록 디바이스 크기에 따라 조절합니다. 결과 style.css @media (max-width: 960px) { .movie_title ul { width: auto; } .movie_title li { width: 25%; box-sizing: border-box; } } @media (max-width: 768px) { body { background: #d9d7e0; } #movie .row { background: #fff; margin: 24px; padding: 24px; } #movie .ir_so { position: static; width: auto; height: auto; line-height: normal; text-i..
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더
메가박스 사이트 따라 만들기 - 영화 차트 슬라이더
2022.02.13영화 차트 이미지 슬라이드 6초가 지날 때마다 슬라이드가 죄측으로 움직이도록 설정합니다. (https://swiperjs.com/)에서 원하는 슬라이더 소스를 가져와서 사용합니다. * 구조를 잘 잡아야함 결과 HTML 1 MX Boutique 전체관람가 침묵 상세보기 예매하기 2 MX Boutique 12세 침묵 상세보기 예매하기 3 MX Boutique 15세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 4 MX Boutique 19세 침묵 상세보기 예매하기 이하 3개의 컨텐츠에도 동일하게 넣어줍니다. j..