Like Lion : 6일차

김진권·2021년 11월 8일

like lion

목록 보기

7/22

1️⃣ @keyframes, overflow: hidden을 활용하여 회전하는 목록을 만들어 보았다.

원통을 돌리면서 원통에 적힌 텍스트들을 보여주는 것 같다.
사실 <div class="name-job-list">가 @keyframes에 의해 div박스를 아래로 내리고 있는 것.
overflow: hidden을 해제했을 때의 모습

2️⃣ 함께하는 마크업시간

✔️ 나의 html 마크업

  <section>
    <h1>정글 시네마 영화 목록</h1>
    <ul class="index">
      <li><a href="#">현재상영영화</a></li>
      <li><a href="#">개봉예정영화</a></li>
      <li><a href="#">박스오피스</a></li>
    </ul>

    <div class="contents">
      <ul class="contents__top">
        <li class="content">
          <div class="content__main">
            <img src="./영화목록페이지/포스터_위니브월드.png" alt="">
            <p class="content__title">
              위니브 월드 : 새로운 시대
            </p>
            <dl class="content__summary">
              <div>
                <dt>개요</dt>
                <dd>판타지</dd>
              </div>
              <div>
                <dt>평점</dt>
                <dd>
                  <img src="./별점이미지.png" alt="">
                </dd>
                <dd>9.05</dd>
              </div>
              <div>
                <dt>개봉</dt>
                <dd>2021.03.27</dd>
              </div>
              <div>
                <dt>출연</dt>
                <dd>라이캣, 소울곰, 개리씨</dd>
              </div>
            </dl>
          </div>
          <div class="content__function">
            <div>
              예매하기
            </div>
            <div>
              <i class="far fa-play-circle"></i>
              예고편
            </div>
          </div>
        </li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
      <ul class="contents__bottom">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </section>

✔️ 강사님의 html 마크업

비교분석

1️⃣ section header footer article 마다 스크린리더기를 위한 h태그가 반드시 있다.
웹페이지에서 보이지 않도록 class="sr-only"를 적용한다.

// 나의 마크업
  <section>
    <h1>정글 시네마 영화 목록</h1>
    <ul class="index">
      <li><a href="#">현재상영영화</a></li>
      <li><a href="#">개봉예정영화</a></li>
      <li><a href="#">박스오피스</a></li>
    </ul>
    
// 강사님의 마크업
  <h1 class="sr-only">정글 시네마</h1> 🚩
  <section class="cont-movie">
    <h2 class="tit-cont">정글 시네마 영화 목록</h2>
    <header>
      <h3 class="sr-only">영화 정보 목록</h3> 🚩
      <nav class="nav-movie">
        <ul class="list-movieNav">
          <li class="on"><a href="#none" class="link-nav">현재상영영화</a></li>
          <li><a href="#none" class="link-nav">개봉예정영화</a></li>
          <li><a href="#none" class="link-nav">박스오피스</a></li>
        </ul>

2️⃣ 나는 main section 내부에 header 태그가 없다.

시멘틱한 구조의 완성을 위해 헤더에 해당된다고 생각하는 부분은 header태그로 감싸줄 필요가 있을 것 같다.
게다가 내가 ul로 감싼 부분은 nav로 먼처 처리하는게 옳아보인다. nav역할을 하는 목록이기 때문에.

// 나의 마크업
    <ul class="index">
      <li><a href="#">현재상영영화</a></li>
      <li><a href="#">개봉예정영화</a></li>
      <li><a href="#">박스오피스</a></li>
    </ul>
// 강사님의 마크업
    <header>
      <h3 class="sr-only">영화 정보 목록</h3>
      <nav class="nav-movie">
        <ul class="list-movieNav">
          <li class="on"><a href="#none" class="link-nav">현재상영영화</a></li>
          <li><a href="#none" class="link-nav">개봉예정영화</a></li>
          <li><a href="#none" class="link-nav">박스오피스</a></li>
        </ul>
      </nav>
    </header>

3️⃣ naming convention
나는 BEM convention 으로 class name을 지정하려 했다.

4️⃣ 하나의 카드는 article 지정했다. 나는 div사용. 생각해보면 무의미한 div보다 독립적인 의미를 갖는 article이 적절해 보임. 굳이div를 쓸 필요가 없었던거 같기도.

나는 contents 안에 contents__top content__bottom으로 나눔 (의미부여라기 보다 그냥 css 적용의 편리함을 위해)
강사님은 그냥 ul안에 li 8개로 채움.

✔️ 강사님의 css

@charset "utf-8";

/* setting */
/* animaion */
/* reset */
/* util */

.sr-only {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 한줄 말줄임 */
.sl-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2줄 말줄임 */
.multi-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* style */
.cont-movie {
  width: 1006px;
  margin: 86px auto 0;
  padding: 0 27px 29px;
  border: 2px solid #BDBDBD;
  border-radius: 15px;
  background: #E5E5E5;
}

.cont-movie .tit-cont {
  font-size: 25px;
  text-align: center;
  line-height: 28px;
  padding: 38px 0;
}

.cont-movie .nav-movie {
  text-align: center;
}

.cont-movie .nav-movie::before {
  display: block;
  content: "";
  width: 650px;
  height: 2px;
  background: #BDBDBD;
  margin: 0 auto;
}

.cont-movie .list-movieNav {
  display: inline-block;
  margin: 27px 0;
}

.cont-movie .list-movieNav li {
  float: left;
}

.cont-movie .list-movieNav li + li {
  margin-left: 60px;
}

.cont-movie .list-movieNav .link-nav {
  color: #828282;
}

.cont-movie .list-movieNav .on .link-nav{
  color: #000;
  font-weight: bold;
}

/* layout */
/* design */
/* media query */

한글 주석 깨짐을 방지하기 위해 캐릭터셋 설정해주고
css의 역할군을 미리 주석으로 구분해둔 모습
.sr-only, sl-ellipsis, .multi-ellipsis 와 같은 기능성 클래스들은 util에 모아둔다.

느낀점

항상 그렇지만 마크업을 직접 보여주시는건 도움이 많이 된다.
논리적인 순서와 태그의 역할들을 잘 고려해서 모두를 배려할 수 있는 코드를 만들어야겠다.
남들과 같은 필요는 없지만 적어도 한줄 한줄 왜 이렇게 만들었는지 설명할 수 있고 더 나아가 설득할 수 있어야 하지 않을까?