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

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

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

Section 內 Division 세부 영역 마늘기

[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>
  </ul>
  </div>
  </div>
</section>

[style.css]

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

.class-card {
  width: 240px;
  min-width: 240px;
  /* box-shadow: 블럭에 그림자를 적용하는 CSS 기능
     https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow 
     offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2);
  transition: 0.4s;  /*어떤 현상을 설정할 때 효과가 나타나는 시간 설정*/
  border-radius: 8px;
  margin: 10px 10px;
  touch-action: pan-x;
}

.class-card:hover {
  box-shadow: 10px 10px 10px 0px rgba(25, 42, 70, 0.2); /*마우스가 위치 시 박스가 살짝 뜨는 듯이 보이게 하는 현상*/
  transform: translate(0, -5px); /* 박스가 살짝 뜰때 위로 5px만큼 이동하면서 뜨게 함 */
}

.class-image {
  width: 100%;
  border-radius: 8px 8px 0 0;
  height: 150px;
}

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

.class-container {
  padding: 0.5em 1em 1em 1em;
}

.class-skill {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1em 0;
}

.class-type {
  font-size: 0.9em;
  color: #949393;
  padding: 0.2em 0;
}

.class-format {
  font-size: 0.9em;
  color: white;
  background-color: #0d47a1;
  padding: 0.2em;
}

img {
  border-radius: 8px 8px 0 0;
  height: 150px;
}

.class-desc {
  width: 100%;
  margin-top: 1rem;
}

.class-title {
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #545e6f;
  width: 100%;
  white-space: nowrap;  /* 자동줄바꿈 방지 설정 */
  overflow: hidden; /* 텍스트가 범위를 넘어서는 경우 안보이게 해 줌, "visible" 외의 값으로 설정 */
  text-overflow: ellipsis; 
  /* text-overflow는 텍스트가 범위를 넘어가는 경우의 처리방식
     ellipsis는 넘어가는 텍스트를 말줄임표(...)로 표시하나 이를 위해서는 width가 정의되어야 하고
     white-space가 nowrap이 되어 있어야 하고 overflow도 hidden인 경우에만 적용이 가능하다. 
     clip은 그냥 텍스트를 잘라냄 */
  margin-bottom: 0.5rem;
}

.class-detail {
  font-size: 0.9rem;
  margin: 0;
  color: #545e6f;
  line-height: 1.5em; /* 글이 두줄인 경우 너무 간격이 좁아 이를 해결하기 위해 설정 */
}

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