News Grid (4) - Header Showcase

기본 마크업

    <header id="showcase">
      <div class="container">
        <div class="showcase-container">
          <div class="showcase-content">
            <div class="category category-sports">Sports</div>
            <h1>Some Sports Article</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
              facilis quasi sapiente dolorum sed dolor laudantium eligendi nihil
              rem cum?
            </p>
            <a href="article.html" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
    </header>

 

 

 

#showcase {
  background-color: var(--dark-color);
  color: #fff;
  padding: 2rem;
  position: relative;
}

showcase의 기본 배경색, 글자색, 패딩.

position:relative를 사용한 이유는

showcase:before이라는 pseudo selector를 이용해서 showcase에 배경 이미지를 넣어주려고 하는 데,

그때 이 showcase:before가 position:absolute를 가질 것이기 때문.

 

 

#showcase:before {
  content: "";
  background: url("../img/featured.jpg") no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

showcase 배경 이미지를 주려고 하는 것.

content는 비어있다.

배경이미지를 가져온다.

position은 아까 #showcase를 relative로, 이 pseudo selector를 absolute로

위치는 top:0, left:0에서 시작하고 너비 높이를 다 꽉 채울 거라서 100%

transparancy를 주기 위해 opacity를 0.4로 설정.

(opacity를 0으로 하면 아예 그림이 안보이고 showcase의 기본 색인 #333만

opacity를 1로하면 아무 글자도 안보이고 이미지만 선명하게 그대로 나온다.

이 배경 이미지가 showcase의 before로 있으니까, 이미지 opacity가 1이 되어버리면 뒤에 content를 다 가리게 된다.)

 

 

opacity:0.4;

 

 

위의 상태에서

 

#showcase .showcase-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

 

이렇게 display:grid;를 주고 (display:flex;가 더 간단하겠지만, 그냥 연습삼아..)

grid-template-columns: repeat(2, 1fr);을 하면

 

 

이렇게 두 개의 칼럼이 생기고, 왼쪽 칼럼에 content가 들어가고 

마크업에 다른 element가 없었기 때문에 그냥 공백

 

 

#showcase .showcase-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 50vh;
  justify-content: center;
  align-items: center;
}

높이는 viewport height의 50%

수직, 수평 중앙 정렬

 

 

 

 

 

#showcase .showcase-content {
  z-index: 1;
}

배경 이미지 때문에 글자가 제대로 안보이니

z-index를 줘서 글자가 top of the image에 올 수 있게

 

z-index 덕분에 글자가 선명하게 보인다.