메가박스 사이트 따라 만들기 - 새로운 영화 영역 1

megabox14

새로운 영화 영역

background: #ccc url(../img/new01.jpg) center center;
→ center는 X축과 Y축을 의미합니다.

컨텐츠 요소를 가운데로 오게 하는 방법

position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);

결과

HTML

<section id="new">
  <div class="container">
    <div class="row">
      <div class="new">
        <h2>새로운 영화</h2>
        <div class="new_left">
          <div class="play">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120"
              style="enable-background:new 0 0 120 120;" xml:space="preserve">
              <circle class="st0" cx="60" cy="60.4" r="56" />
              <path class="st1"
                d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z" />
            </svg>
          </div>
        </div>
        <div class="new_right"></div>
      </div>
    </div>
  </div>
</section>
<!-- //new -->

 

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;
  height: 500px;
  background: #ccc url(../img/new01.jpg) center center;
  background-size: cover;
}

.new .new_left .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
}

.new .new_left .play .st0 {
  fill: #fff;
  opacity: 0.3;
}

.new .new_left .play .st1 {
  fill: #fff;
}

.new .new_right {
  position: absolute;
  right: 0;
  top: 165px;
  width: 400px;
  height: 500px;
  background: #f0f0f0;
}

 

출력