jQuery
메가박스 사이트 따라 만들기 - Youtube API - 끝
메가박스 사이트 따라 만들기 - Youtube API - 끝
2022.02.13탭메뉴, 스킵메뉴 https://developers.google.com/youtube/player_parameters youtube API 매개변수 설정 사이트 결과 HTML style.css /* 트레일러 */ .overlay { background: rgba(0, 0, 0, .92); display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; } .modal { position: absolute; } .modal_close { background: url(../img/close.svg) no-repeat; background-size: 32px 32px; border: 0; color: trans..
메가박스 사이트 따라 만들기 - 탭 메뉴, SKIP 메뉴
메가박스 사이트 따라 만들기 - 탭 메뉴, SKIP 메뉴
2022.02.13탭메뉴, 스킵메뉴 .siblings() 선택한 요소의 형제 요소를 선택합니다. .parent() 선택한 요소의 부모 요소를 선택합니다. 결과 HTML, js 최신 영화 소식 새로운 이벤트 새로운 영화 style.css /* 스킵 메뉴 */ #skip { position: relative; } #skip a { position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px; border: 1px solid #fff; color: #fff; text-align: center; background: #333; } #skip a:active, #skip a:focus { top: 0; } 출력
메가박스 사이트 따라 만들기 - Help 영역 반응형
메가박스 사이트 따라 만들기 - Help 영역 반응형
2022.02.13헬프영역 반응형 헬프 영역을 반응형을 고려하여 css를 부여합니다. 결과 style.css @media (max-width: 1024px) { .help article.help_box1 { width: 49%; margin-right: 2%; } .help article.help_box2 { width: 49%; margin-right: 0; } .help article.help_box3 { width: 100%; margin-top: 2%; } .help article { height: auto; } .service li { width: 25%; height: auto; } .service li:nth-child(1) { border-bottom: 1px solid #d7d7d7; } .service ..
메가박스 사이트 따라 만들기 - 고객센터 / 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..
메가박스 사이트 따라 만들기 - 새로운 영화 영역 1
메가박스 사이트 따라 만들기 - 새로운 영화 영역 1
2022.02.13새로운 영화 영역 background: #ccc url(../img/new01.jpg) center center; → center는 X축과 Y축을 의미합니다. 컨텐츠 요소를 가운데로 오게 하는 방법 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 결과 HTML 새로운 영화 style.css /* 새로운 영화 */ .new { padding: 100px 0; position: relative; } .new h2 { font-size: 30px; font-weight: 500; margin-bottom: 20px; } .new .new_left { position: relative; margin-right: 423px; h..
메가박스 사이트 따라 만들기 - 오프닝 영역
메가박스 사이트 따라 만들기 - 오프닝 영역
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..