반응형 홈페이지 만들기 - 006

**[공지사항]** [개인적인 공부를 위한 내용입니다. 오류가 있을 수 있습니다.]

[반응형 홈페이지 만들기-006]

Section 內 Division 세부 영역 만들기

아래의 class-card를 복사해서 총 6개로 만들어본다.

[index.html]

<section>
  <div class="inner">
    <div class="roadmap-container">
      <div class="roadmap-title-container">
        <div class="roadmap-title">IT분야</div>
      </div>
      <div class="arrow-container">
        <i class="slide-prev fas fa-chevron-circle-left" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-prev라는 클래스 명명 -->
        <i class="slide-next fas fa-chevron-circle-right" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-next라는 클래스 명명 -->
      </div>
    </div>
    
    <ul class="class-list">
      <li class="class-card">
        <a href="https://gibson1211.github.io/" target="_blank"><img src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
          alt="IT분야" class="class-image"/>
        <div class="class-container">
          <div class="class-skill">
            <div class="class-type">제목1</div>
            <div class="class-format">제목2</div>
          </div>
          <div class="" class-desc
          ">
          <div class="class-title">세부내용1</div>
          <div class="class-detail">세부내용2</div>
        </div>
        </div>
  </a>
      </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="" class-desc
        ">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="" class-desc
        ">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="" class-desc
        ">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="" class-desc
        ">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="" class-desc
        ">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
      </ul>
      </div>
     </div>
    </section>

class-card를 6개로 만들면 일부 우측의 카드는 화면을 넘치게 된다.
이를 해결하기 위해 inner에 overflow 옵션을 hidden으로 설정하면 화면에서 넘쳐나지 않게 된다. 다만 hidden 옵션은 padding값은 적용이 되지 않는다.

  .inner {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0rem 2rem;
    overflow: hidden;
  }

그래서 class-list 內 overflow값도 hidden으로 설정하면 inner의 width값에 맞게 짤린다.

  .class-list {
  display: flex;
  list-style: none;
  padding: 0;
  overflow: hidden; /* overflow 를 hidden 으로 설정하면, transform 시 이미지 짤림 */
}

위의 내용을 모두 적용하여 실행하면 아래와 같은 화면이 나온다.

Section 전체를 복사해서 붙여넣어 두개의 class-list를 만들어준다.

<section>
  <div class="inner">
    <div class="roadmap-container">
      <div class="roadmap-title-container">
        <div class="roadmap-title">IT분야</div>
      </div>
      <div class="arrow-container">
        <i class="slide-prev fas fa-chevron-circle-left" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-prev라는 클래스 명명 -->
        <i class="slide-next fas fa-chevron-circle-right" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-next라는 클래스 명명 -->
      </div>
    </div>

    <ul class="class-list">
      <li class="class-card">
        <a href="https://gibson1211.github.io/" target="_blank"><img src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
          alt="IT분야" class="class-image"/>
        <div class="class-container">
          <div class="class-skill">
            <div class="class-type">제목1</div>
            <div class="class-format">제목2</div>
          </div>
          <div class="class-desc">
          <div class="class-title">세부내용1</div>
          <div class="class-detail">세부내용2</div>
        </div>
        </div>
        </a>
      </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="class-desc">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="class-desc">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="class-desc">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="class-desc">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
    <li class="class-card">
      <img
        src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
        alt="IT분야" class="class-image"/>
      <div class="class-container">
        <div class="class-skill">
          <div class="class-type">제목1</div>
          <div class="class-format">제목2</div>
        </div>
        <div class="class-desc">
        <div class="class-title">세부내용1</div>
        <div class="class-detail">세부내용2</div>
      </div>
      </div>
    </li>
      </ul>
      </div>
     </div>
    </section>

<section>
  <div class="inner">
    <div class="roadmap-container">
      <div class="roadmap-title-container">
        <div class="roadmap-title">IT분야</div>
      </div>
      <div class="arrow-container">
        <i class="slide-prev fas fa-chevron-circle-left" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-prev라는 클래스 명명 -->
        <i class="slide-next fas fa-chevron-circle-right" id="0"></i>
        <!-- 폰트어썸 아이콘 사용, 아이콘의 크기를 css에서 slide-next라는 클래스 명명 -->
      </div>
    </div>

    <ul class="class-list">
      <li class="class-card">
        <img
          src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
          alt="IT분야" class="class-image"/>
        <div class="class-container">
          <div class="class-skill">
            <div class="class-type">제목1</div>
            <div class="class-format">제목2</div>
          </div>
          <div class="class-desc">
          <div class="class-title">세부내용1</div>
          <div class="class-detail">세부내용2</div>
        </div>
  </div>
  </li>
  <li class="class-card">
    <img
      src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
      alt="IT분야" class="class-image"/>
    <div class="class-container">
      <div class="class-skill">
        <div class="class-type">제목1</div>
        <div class="class-format">제목2</div>
      </div>
      <div class="class-desc">
      <div class="class-title">세부내용1</div>
      <div class="class-detail">세부내용2</div>
    </div>
    </div>
  </li>
  <li class="class-card">
    <img
      src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
      alt="IT분야" class="class-image"/>
    <div class="class-container">
      <div class="class-skill">
        <div class="class-type">제목1</div>
        <div class="class-format">제목2</div>
      </div>
      <div class="class-desc">
      <div class="class-title">세부내용1</div>
      <div class="class-detail">세부내용2</div>
    </div>
    </div>
  </li>
  <li class="class-card">
    <img
      src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
      alt="IT분야" class="class-image"/>
    <div class="class-container">
      <div class="class-skill">
        <div class="class-type">제목1</div>
        <div class="class-format">제목2</div>
      </div>
      <div class="class-desc">
      <div class="class-title">세부내용1</div>
      <div class="class-detail">세부내용2</div>
    </div>
    </div>
  </li>
  <li class="class-card">
    <img
      src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
      alt="IT분야" class="class-image"/>
    <div class="class-container">
      <div class="class-skill">
        <div class="class-type">제목1</div>
        <div class="class-format">제목2</div>
      </div>
      <div class="class-desc">
      <div class="class-title">세부내용1</div>
      <div class="class-detail">세부내용2</div>
    </div>
    </div>
  </li>
  <li class="class-card">
    <img
      src="https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/itpartImage.JPG? raw=true"
      alt="IT분야" class="class-image"/>
    <div class="class-container">
      <div class="class-skill">
        <div class="class-type">제목1</div>
        <div class="class-format">제목2</div>
      </div>
      <div class="class-desc">
      <div class="class-title">세부내용1</div>
      <div class="class-detail">세부내용2</div>
    </div>
    </div>
  </li>
  </ul>
  </div>
  </div>
</section>

위와 같이 코딩을 하면 아래와 같은 화면으로 나타난다.

저해상도의 화면에서 불필요한 글 안보이게 하기
안보이게 할 대상에 대해 인라인 태그인 'span' 태그로 지정하고 그 안에 글을 작성한다.
여기에 아래와 같이 class 이름을 설정해준다.(roadmap-desc)

<section>
  <div class="inner">
    <div class="roadmap-container">
      <div class="roadmap-title-container">
        <div class="roadmap-title">IT분야<span class="roadmap-desc">(글이 두줄이 되는 경우 저해상도에서는 사라져요.)</span></div> 
        <!-- 저해상도에서 안보이게 할 글을 span 태그로 묶고  class name을 설정(roadmap-desc) -->
      </div>
      <div class="arrow-container">
        <i class="slide-prev fas fa-chevron-circle-left" id="0"></i> 
        <i class="slide-next fas fa-chevron-circle-right" id="0"></i>
      </div>
    </div>    

style.css에 rodamap-desc의 visibility를 visible로 설정하여 보이게한다.

또한 아래 @media 영역에서는 980px 이하 해상도에서는 안보이게 display를 none으로 설정한다.

.roadmap-desc { /* 세부내용 문장이 두줄 이상인 경우 일정 해상도에서는 두번째 글이 사라지게 세팅 */
  visibility: visible
}

@media only screen and (max-width: 980px) {
  .skill-container {
    display: none;
  }
  .roadmap-desc {  /* 980px 이하 해상도 시 사라지게 하는 옵션*/
    display: none;
  }
}

class-card에 마우스가 올라가면 마우스 커서가 손모양으로 바뀌게 세팅한다. 다만 개별 세팅이 아닌
일괄 적용을 위해 class-card가 li 태그에 a 태그로 적용되어 있는 것을 활용하여 일괄 적용해준다.
다만 이 경우 모든 class-card는 a태그로 다른 곳의 링크가 걸려있어야 한다.

li a:hover { /* 모든 class-card 위에 마우스가 올라가면 커서가 손모양으로 바뀌게 일괄 세팅하기*/
  cursor: pointer;
}