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

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

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

Section 內 상단 이미지 영역 만들기

[index.html]

  <section class="main">
    <div class="main-container">
      <div class="inner">
        <div class="title-container">
          <div class="title">작은 움직임</div>
          <div class="message">
            더 멀리 바라보기 위해 차분하게<br />
            그리고 천천히 걸어봅니다.
          </div>
        </div>
      </div>
    </div>
  </section>

[style.css]

  section {
    width: 100%;
    background-color: #fff;
    /*이 섹션안에 혹여라도 absolute 포지션을 쓰는 경우를 대비하여 포지션을 relative로 구성한다.
     * absolute 포지션은 relative 포지션을 기준으로 위치값을 구하는 관계로 relative 포지션이 없는 경우
     * 사용이 불가하기 때문이다.
     */
    position: relative;
  }
  
  .main {
    height: 360px; /* 이미지 사이즈 */
    background-image: url("https://github.com/Gibson1211/Gibson1211.github.io/blob/master/assets/images/90452.jpg?raw=true");
    background-size: cover; /* 이부분 cover인 경우 화면 사이즈가 변경되더라도 대응이 가능함.*/
    background-position: center 20%; /* 이미지 위치를 가운데를 기준으로 하고 이미지를 위로 올리기 위한 position 설정 */
    background-repeat: no-repeat; /*default값은 이미지가 반복적으로 나오기에 이를 방지(주로 cover와 같이 사용)*/
    z-index: 1;
  }
  
  /* 배경 이미지의 색상을 어둡게 처리하기 위해, 어두운 색상으로 이미지 상위에 투명도를 주어 덮어씌움 */
  .main-container {
    width: 100%;
    height: 100%;
    background-color: rgb(47, 48, 89);
    opacity: 0.8; /*불투명도로 최대값은 1이다.*/
    z-index: 2; /*z-index값으로 그림보다 위에 위치하게 된다.*/
    margin-top: 60px; 
    /* header 영역의 포지션이 fixed로 설정되어 있으면 문서영역에 포함되어 계산되지 않는다.
       따라서 Section 영역은 header 영역을 무시하고 최상단부터 section 영역으로 인지한다.
       하지만 이미지는 header영역에서 일정거리만큼 떨어져서 시작되어야 하기에 main-container의 
       margin-top을 60px를 줘서 섹션의 이미지영역이 시작되게 한다. */
  }
  
  .title-container {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  
  .title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.8rem; /* 다음 문장과의 간격을 확보 */
  }
  
  .message {
    font-size: 1.4rem;
    font-weight: normal;
    color: #fff;
    line-height: 2rem;
  }

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