1. 이미지 삽입

assets 폴더 내에, 삽입을 원하는 그림을 저장해두고, base.html (즉 그림을 넣고 싶은 위치)에 다음과 같은 코드를 넣어주었다.

_layouts/base.html

  <body>
    <div class = "hero">
        <img class = "feature-img" src="/assets/hompict3.png" />
    </div>
    <div class="container">
      /{/%- include header.html -/%/}
      <main class="page-content" aria-label="Content">
        <div class="wrapper">
          /{/{ content /}/}
        </div>
      </main>
      /{/%- include footer.html -/%/}
    </div>
  </body>

feature-img 태그를 header의 위에 올려놓았다.

이후 hero 태그 (일종의 그림이 들어갈 박스)를 만들고, _layout.scss에 다음과 같이 코드를 추가했다.

.hero{
  position: fixed;
  left: 0;
  top: 0;
  width: 25%;
  height: 100%;
  z-index: 10;
  overflow-x: hidden;
}

=> z-index를 10으로 두어, header위에 그림이 보이도록 설정했고, => width 25%로 전체화면의 일정 비율을 덮게 했다.

.hero img{
  height: 100%;
  z-index: 10;
}

=> 이후 사진 자체의 높이를 100%로 하여, 그림이 전체 화면 만큼의 높이로 보이도록 했다.

그렇게 하고 나면 다음사진과 같은 결과를 만들 수 있다.

Imgur

@media (max-width: 1400px){
  .hero{
    position: fixed;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;
    z-index: 3;
    overflow-x: hidden;
  }
  
  
  .hero img{
    height: 100%;
  }
}

@media (max-width: 1200px){
  .hero{
    display: none;
  }
  .page-content {
    padding: $spacing-unit 0;
    flex: 1 0 auto;
    padding-left:0px;
  }
}

=> 여전히 엣지나 다른 큰 화면 컴퓨터에서 크기가 이상하게 잡혀서, 여러 화면 크기에서 보일 이미지의 크기를 설정했다. 가독성을 위해서, 특정 화면 크기 이하에서는 아예 그림이 안보이도록 했다.

이 프로젝트의 이전 글

Github 블로그 리모델링 2- 초기 세팅

이 프로젝트의 다음 글

Github 블로그 리모델링 4- 페이지 생성