메가박스 사이트 따라 만들기 - 영화 차트 구조

megabox08

영화 차트 구조잡기

이미지 관련 태그

<img> : 이미지를 불러올 때 사용
<figure> : 이미지를 표현할 때 사용
<figcation> : 이미지를 설명할 때 사용
<picture> : 이미지를 화면 크기에 따라 사용, 반응형 이미지와 관련된 태그, <source>태그와 같이 사용

반응형 사이트

1. 유동 레이아웃
2. 미디어쿼리
3. 반응형 이미지 : 이미지에 width:100%를 하면 됨. 단, 이미지 크기와 용량, 레디나 디바이스 대응의 문제가 생김

css 검사 서비스 사이트

http://www.css-validator.org/validator.html.ko : css 오류를 알려줌

 

결과

HTML

<section id="movie">
  <div class="container">
    <div class="row">
      <div class="movie">
        <h2 class="ir_so">최신 영화 정보</h2>
        <div class="movie_title">
          <ul>
            <li class="active"><a href="#">박스오피스</a></li>
            <li><a href="#">최신개봉작</a></li>
            <li><a href="#">상영예정작</a></li>
            <li><a href="#">큐레이션</a></li>
          </ul>
        </div>
        <div class="movie_chart">
          <div class="chart_cont1">
            <div>
              <div class="poster">
                <figure>
                  <img
                    src="assets/img/poster01.jpg"
                    srcset="assets/img/poster01@2.jpg 2x"
                    alt="1번 포스터 이미지입니다."
                  />
                </figure>
                <div class="rank"><strong>1</strong></div>
                <div class="mx">
                  <span class="icon m ir_pm">MX</span>
                  <span class="icon b ir_pm">Boutique</span>
                </div>
              </div>
              <div class="infor">
                <h3>
                  <span class="icon all ir_pm">전체관람가</span>
                  <strong>침묵</strong>
                </h3>
                <div class="infor_btn">
                  <a href="#">상세보기</a>
                  <a href="#">예매하기</a>
                </div>
              </div>
            </div>
            <div>
              <div class="poster">
                <figure>
                  <img
                    src="assets/img/poster02.jpg"
                    srcset="assets/img/poster01@2.jpg 2x"
                    alt="2번 포스터 이미지입니다."
                  />
                </figure>
                <div class="rank"><strong>2</strong></div>
                <div class="mx">
                  <span class="icon m ir_pm">MX</span>
                  <span class="icon b ir_pm">Boutique</span>
                </div>
              </div>
              <div class="infor">
                <h3>
                  <span class="icon a12 ir_pm">12세</span> <strong>침묵</strong>
                </h3>
                <div class="infor_btn">
                  <a href="#">상세보기</a>
                  <a href="#">예매하기</a>
                </div>
              </div>
            </div>
            <div>
              <div class="poster">
                <figure>
                  <img
                    src="assets/img/poster03.jpg"
                    srcset="assets/img/poster01@2.jpg 2x"
                    alt="3번 포스터 이미지입니다."
                  />
                </figure>
                <div class="rank"><strong>3</strong></div>
                <div class="mx">
                  <span class="icon m ir_pm">MX</span>
                  <span class="icon b ir_pm">Boutique</span>
                </div>
              </div>
              <div class="infor">
                <h3>
                  <span class="icon a15 ir_pm">15세</span> <strong>침묵</strong>
                </h3>
                <div class="infor_btn">
                  <a href="#">상세보기</a>
                  <a href="#">예매하기</a>
                </div>
              </div>
            </div>
            <div>
              <div class="poster">
                <figure>
                  <img
                    src="assets/img/poster04.jpg"
                    srcset="assets/img/poster01@2.jpg 2x"
                    alt="4번 포스터 이미지입니다."
                  />
                </figure>
                <div class="rank"><strong>4</strong></div>
                <div class="mx">
                  <span class="icon m ir_pm">MX</span>
                  <span class="icon b ir_pm">Boutique</span>
                </div>
              </div>
              <div class="infor">
                <h3>
                  <span class="icon a19 ir_pm">19세</span> <strong>침묵</strong>
                </h3>
                <div class="infor_btn">
                  <a href="#">상세보기</a>
                  <a href="#">예매하기</a>
                </div>
              </div>
            </div>
          </div>
          <!-- chart_cont1 -->
          <div class="chart_cont2"></div>
          <!-- chart_cont2 -->
          <div class="chart_cont3"></div>
          <!-- chart_cont3 -->
          <div class="chart_cont4"></div>
          <!-- chart_cont4 -->
        </div>
      </div>
    </div>
  </div>
</section>
<!-- movie -->

 

style.css

/* 무비 */
.movie {
  padding: 100px 0;
}

.movie_title {
  margin-bottom: 60px;
}

.movie_title ul {
  overflow: hidden;
  width: 848px;
  margin: 0 auto;
}

.movie_title li {
  float: left;
  width: 210px;
  text-align: center;
  border: 1px solid #c4c4c4;
  margin-right: -1px;
}

.movie_title li a {
  display: block;
  padding: 15px 0;
  font-size: 18px;
  color: #666;
  font-weight: 700;
}

.movie_title li.active a {
  background: #666;
  color: #fff;
}

.movie_chart {
  height: 592px;
}

.movie_chart>div {
  overflow: hidden;
}

.movie_chart>div>div {
  float: left;
  width: 292px;
  height: 592px;
  margin-right: 18px;
}

.movie_chart>div>div:last-child {
  margin-right: 0;
}

.movie_chart>div>div .poster {
  position: relative;
}

.movie_chart>div>div .poster img {
  display: block;
}

.movie_chart>div>div .poster .rank {
  position: absolute;
  top: 17px;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #38116a;
  text-align: center;
}

.movie_chart>div>div .poster .rank strong {
  color: #fff;
}

.movie_chart>div>div .poster .mx {
  position: absolute;
  top: 17px;
  right: 17px;
}

.movie_chart>div>div .poster .mx span {
  width: 103px;
  height: 25px;
  display: block;
}

.movie_chart>div>div .poster .mx .m {
  background-position: 0 -75px;
}

.movie_chart>div>div .poster .mx .b {
  background-position: 0 -100px;
}

.movie_chart>div>div .infor {
  background: #fff;
  padding: 17px;
  border: 1px solid #d9d9d9;
}

.movie_chart>div>div .infor h3 {
  color: #333;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}

.movie_chart>div>div .infor h3 strong {}

.movie_chart>div>div .infor h3 span {
  width: 29px;
  height: 29px;
  display: inline-block;
  margin-top: 9px;
  vertical-align: -2px;
}

.movie_chart>div>div .infor h3 span.all {
  background-position: -87px -125px;
}

.movie_chart>div>div .infor h3 span.a12 {
  background-position: -58px -125px;
}

.movie_chart>div>div .infor h3 span.a15 {
  background-position: 0px -125px;
}

.movie_chart>div>div .infor h3 span.a19 {
  background-position: -29px -125px;
}

.movie_chart>div>div .infor_btn a {
  display: inline-block;
  background: #f2f2f2;
  font-size: 18px;
  padding: 15px 30px;
}

 

reset.css

/* 아이콘 이미지 최적화 작업 */
.icon {
  background-image: url(../img/icon.png);
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
  .icon {
    background-image: url(../img/icon@2.png);
    background-size: 500px;
  }
}

 

출력