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

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

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

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

[style.css]

  .roadmap-container {
    width: 100%;
    display: flex;
    justify-content: space-between; /*양끝단으로 배분*/
    align-items: stretch;
    margin-top: 2rem; 
  }
  
  .roadmap-title-container {
    width: 100%;
    display: flex;  /* 수평 정렬 */
    justify-content: space-between; /*양끝단으로 배분*/
    align-items: center;
    margin: 0;
  }

  .roadmap-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #545e6f;
  }
  
  .arrow-container {
    display: flex;  /* 두개의 아이콘을 수평정렬 */
  }
  
  .slide-prev {
    font-size: 2em;  /* 아이콘 사이즈 키우기 */
    cursor: pointer;
    color: rgb(47, 48, 89);
    margin: 0;
  }
  
  .slide-next {
    font-size: 2em;  /* 아이콘 사이즈 키우기 */
    cursor: pointer;
    color: #cfd8dc;
    margin: 0;
  }

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

주석없는 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>
        <i class="slide-next fas fa-chevron-circle-right" id="0"></i>
      </div>
    </div>
  </div>
</section>

주석없는 style.css 일부 파트

  .roadmap-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 2rem;
  }
  
  .roadmap-title-container {
    width: 100%;
    display: flex;  
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  
  .roadmap-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #545e6f;
  }
  
  .arrow-container {
    display: flex;  
  }
  
  .slide-prev {
    font-size: 2em;  
    cursor: pointer;
    color: rgb(47, 48, 89);
    margin: 0;
  }
  
  .slide-next {
    font-size: 2em; 
    cursor: pointer;
    color: #cfd8dc;
    margin: 0;
  }