메가박스 사이트 따라 만들기 - 이벤트 영역

megabox12

이벤트 영역

이미지는 인라인 구조이기 때문에 폰트 사이즈도 영역이 잡힘
→ 이미지에 display: block;을 주기

결과

HTML

<section id="event">
  <div class="container">
    <div class="row">
      <div class="event">
        <h2>새로운 이벤트</h2>
        <div class="event_left">
          <div class="event_slider">
            <img src="assets/img/event01.jpg" srcset="assets/img/event01@2.jpg 2x" alt="시티 패키지">
          </div>
          <div class="event_box1">
            <img src="assets/img/event02.jpg" srcset="assets/img/event02@2.jpg 2x" alt="남포항점 2019 시즌할인권">
          </div>
          <div class="event_box2">
            <img src="assets/img/event03.jpg" srcset="assets/img/event03@2.jpg 2x" alt="설 선물 이수점 전용 관람권 런칭">
          </div>
        </div>
        <div class="event_right">
          <img src="assets/img/event04.jpg" srcset="assets/img/event04@2.jpg 2x" alt="사표 대신 영화표">
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //event -->

 

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%;
}

.event .event_left .event_box2 {
  float: left;
  width: 50%;
}

.event .event_right {
  float: left;
  width: 32%;
}

@media (max-width: 768px) {
  #event .row {
    padding: 24px;
  }

  .event {
    padding: 24px;
    background: #fff;
  }

  .event h2 {
    font-size: 24px;
    font-weight: 700;
  }

  .event .event_left {
    width: 100%;
    margin-right: 0;
  }

  .event .event_right {
    display: none;
  }
}

@media (max-width: 600px) {
  #event .row {
    padding: 0 8px;
  }

  .event {
    padding: 16px;
  }

  .event h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
}

 

출력