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

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

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

Section 內 Division 영역 만들기

[index.html]

   <section>
    <div class="inner">
      <div class="skill-container">
        <div class="skill">
          <i class="fa-solid fa-network-wired skill-icon it-style"></i>
          <div class="skill-title">
            <div class="skill-name">IT분야</div>
            <div class="skill-usage">Web/App개발</div>
          </div>
        </div>
        <div class="skill">
          <i class="fa-solid fa-mug-hot skill-icon coffee-style"></i>
          <!-- fontawesome.com에서 아이콘을 검색해서 그 값을 넣어 줌
               그리고 아이콘의 크기 조정을 위해 skill-icon이라는 클래스를 줌
               아이콘의 색상 변경을 위해 coff-style이란 클래스를 줌 -->
          
          <div class="skill-title">
            <div class="skill-name">coffee분야</div>
            <div class="skill-usage">핸드드립/로스팅</div>
          </div>
        </div>
        <div class="skill">
          <i class="fas fa-music skill-icon music-style"></i>
          <div class="skill-title">
            <div class="skill-name">Music분야</div>
            <div class="skill-usage">KPop/Classic</div>
          </div>
        </div>
        <div class="skill">
          <i class="fa-solid fa-people-line skill-icon life-style"></i>
          <div class="skill-title">
            <div class="skill-name">일상다반사</div>
            <div class="skill-usage">유머/감동</div>
          </div>
        </div>
      </div>
    </div>
  </section>

[style.css]

  .skill-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around; /* 4항목의 균등 정렬 */
    align-items: center; /* 상하 중앙정렬 */
  }
  
  .skill {
    width: 25%; /* 총 4분야이기에 전체의 25%씩 배분 */
    background-color: #fff;
    display: flex; /* 한 행에 배열 */
    align-items: center; /* 상하 중앙정렬 */
    border-radius: 9px; /* 모서리 둥글게 */
    padding: 0.5rem 1rem; /* 안에 있는 글과 박스와의 거리 */
    margin: 0 1rem; /* 옆 박스와의 거리 */
    /* 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; /* 박스가 움직이게 할 때 소요되는 시간값 */
  }
  
  .skill:hover {
    transform:translate(0, -5px); /* 박스가 움직이게 할 때 움직임의 정도로 마우스가 위에 있을때 정위치에서 위로 5px정도 올라감 */
  }
  
  .skill-icon {
    font-size: 2.5rem;
    margin: 0 10px;
  }
  
  .skill-title {
    display: flex;
    flex-direction: column; /* 수직 정렬을 위해 */
    align-content: center; /* align-item은 각 행마다 정렬을 해주며 align-content는 전체 행을 한꺼번에 정렬 */
  }
  
  .skill-name {
    font-weight: bold;
    color: #545e6f;
    margin-bottom: 0.2rem;
  }
  
  .skill-usage {
    font-size: 0.9rem;
    color: #545e6f;
  }
  
  .it-style {
    color: #2186c4; /* 아이콘의 색상 변경을 위해 */
  }
  
  .coffee-style { 
    color: #ff8066; /* 아이콘의 색상 변경을 위해 */
  }
  
  .music-style { 
    color: #f7df1e; /* 아이콘의 색상 변경을 위해 */
  }
  
  .life-style {
    color: #2e7d32; /* 아이콘의 색상 변경을 위해 */
  }

  @media only screen and (min-width: 1200px) {
    .inner {
      max-width: 1200px;
    }
  }
  
  /* 해상도가 980 px 이하일때는 아래 항목(division)을 보이지 않게 만든다.*/
  @media only screen and (max-width: 980px) {
      .skill-container {
          display: none;
      }
  }

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

주석없는 index.html 일부 파트

   <section>
    <div class="inner">
      <div class="skill-container">
        <div class="skill">
          <i class="fa-solid fa-network-wired skill-icon it-style"></i>
          <div class="skill-title">
            <div class="skill-name">IT분야</div>
            <div class="skill-usage">Web/App개발</div>
          </div>
        </div>
        <div class="skill">
          <i class="fa-solid fa-mug-hot skill-icon coffee-style"></i>
          <div class="skill-title">
            <div class="skill-name">coffee분야</div>
            <div class="skill-usage">핸드드립/로스팅</div>
          </div>
        </div>
        <div class="skill">
          <i class="fas fa-music skill-icon music-style"></i>
          <div class="skill-title">
            <div class="skill-name">Music분야</div>
            <div class="skill-usage">KPop/Classic</div>
          </div>
        </div>
        <div class="skill">
          <i class="fa-solid fa-people-line skill-icon life-style"></i>
          <div class="skill-title">
            <div class="skill-name">일상다반사</div>
            <div class="skill-usage">유머/감동</div>
          </div>
        </div>
      </div>
    </div>
  </section>

주석없는 style.css 일부 파트

.skill-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .skill {
    width: 25%;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-radius: 9px;
    padding: 0.5rem 1rem; 
    margin: 0 1rem;
    box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2);
  }
  
  .skill-icon {
    font-size: 2.5rem;
    margin: 0 10px;
  }
  
  .skill-title {
    display: flex;
    flex-direction: column;
    align-content: center;
  }
  
  .skill-name {
    font-weight: bold;
    color: #545e6f;
    margin-bottom: 0.2rem;
  }
  
  .skill-usage {
    font-size: 0.9rem;
    color: #545e6f;
  }
  
  .it-style {
    color: #2186c4;
  }
  
  .coffee-style { 
    color: #ff8066;
  }
  
  .music-style { 
    color: #f7df1e;
  }
  
  .life-style {
    color: #2e7d32;
  }

  @media only screen and (min-width: 1200px) {
    .inner {
      max-width: 1200px;
    }
  }
  
  @media only screen and (max-width: 980px) {
    .skill-container {
      display: none;
    }
  }