Project | 자기소개 페이지 만들기 #3

자기소개 페이지를 작성하면서 배운 것들, 부족한 것들, 미흡한 것에 대해 짚고 넘어가자.

Favorite Page

Favorite Page에는 내가 관심있어하는 주제 3가지를 정해 마우스오버하면 관련 코멘트가 나올수 있도록 페이지를 구성해보았다.

이런 사진 3개를 올리고 Hover시 아래처럼 확대되면서 숨겨진 문구가 보일 수 있도록 했다.

<div class="fav-section">
    <ul class="favorite">
      <li class="favorite-item"></li>
      <li class="favorite-item"></li>
      <li class="favorite-item"></li>
    </ul>
<div>

<li> 를 이용해 3개의 아이템을 만들고, <div class="fav-section">으로 전체 컨테이너를 담아보았다. 각각의 리스트는 다음과 같이 구성했다.

<li class="favorite-item">
   <div class="item item-beige">
      <img src="travel.jpeg">
      <div class="item-content">
         <h2>Travel</h2>
         <p>3주간 다녀온 유럽여행은 아직도 잊을 수 없는 기억입니다. 코로나 바이러스로 상황이 여의치 않지만 기회가 된다면 언젠가 다시 한 번 유럽을 다녀오고 싶네요!</p>
      </div>     
   </div>
</li>

역시 <ul>에 display:flex를 적용하고 align-items와 justify-content는 모두 center로 잡아 가운데 정렬을 했다.

Flex-basis, Flex-shrink

.favorite-item{
  flex-basis: 240px;
  flex-shrink: 0;
  margin: 0 40px;
  transition: all .4s;
}

.favorite-item:hover{
  flex-basis: 360px;
}

.favorite-item에 flex 속성을 적용했기 때문에 Direct Childeren인 <div class="item item-beige">는 가지고 있는 내용물의 크기만큼 공간을 차지하게 된다. 이 <div>는 기본적으로 <img src="travel.jpeg">의 크기를 가지고 있으므로 크기를 지정해줄 필요가 있으므로 flex-basis: 240px;을 통해 기본 사이즈를 240px로 지정해줬다.

또한 이는 기본 사이즈를 지정해준 것 뿐이고, Hover시 아이템의 사이즈가 360px로 늘어나도록 지정해주면 나머지 아이템들의 사이즈가 줄어들게 된다. 이를 방지하기 위해 flex-shink: 0;값을 주어 아이템들이 축소되지 않고 살짝 밀리기만 하도록 하였다.

Position:Relative, Position:absolute

<div class="item">안에 이미지를 담은<img>와 문구를 담은<div class="item-content"> 2개의 아이템이 존재한다. 문구를 .item 컨테이너의 아래쪽으로 고정하기 위해 다음과 같이 지정했다.

.item-content{
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
}

그러나 단순히 position:absoulte;만 사용하면 부모 요소인 .item 컨테이너를 기준으로 위치가 고정되는 것이 아니라 전체 레이아웃을 기준으로 되어버린다. 따라서 다음과 같이 부모 요소에 position: relative를 주어 상대적인 절대 위치를 지정해주었다.

.item{
  background-color: #222;
  position: relative;
  overflow: hidden;
}

*** position 속성을 사용해 헤더부분 고정시켜보자.

Gradation

.item:before{
  content: ' ';
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.95+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f2000000',GradientType=0 ); /* IE6-9 */

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
}

이미지의 아래로 갈수록 어둡게 하는 그라데이션을 추가하여 그림의 아래쪽에 배치된 문구가 좀 더 잘 보일 수 있도록 했다. :before 가상선택자를 이용해 position:absoulte로 아이템의 위치를 아래로 고정시키고 일정 height를 부여했다. 위의 그라데이션 코드는 Ultimate CSS Gradient Generator를 참고하였다.

Hover시 문구 나오게 하기

평소에 문구(item-content안의 <p>)를 보이지 않게 하다가 hover시 문구가 나오도록 하기 위해 다음과 같은 CSS 코드를 사용하였다.

.item-content p{
  color: white;
  font-size: 20px;
  font-style: oblique;
  min-width: 160px;
  max-height: 0;
  overflow: hidden;
  line-height: 1.2;
  transition: all .4s;
  opacity: 0;
  transition-delay: .2s;
}

.favorite-item:hover .item-content p{
  max-height: 4.8em;
  opacity: 1;
  margin-top: 0.2em;

}

• max-height: 0;와 overflow: hidden;을 통해 문구를 보이지 않도록 한다.
• hover시 문구를 보이게 하기 위해 :hover일때 max-height: 4.8em;을 지정했다. 미리 <p>에 line-heigt: 1.2;으로 지정하여 문구 4줄까지 보일 수 있게 하였다.
• transition과 transition-delay를 통해 애니메이션 효과를 넣고, 전 후 투명도를 opacity로 조정햇다.

자기소개 페이지를 만들며 느낀 점

• 직접 자료를 찾아보고 하나하나 코드를 짜가며 만들다보니 배우는 것도 많고, 와닿는 게 많았다. 처음에 내가 생각한대로 결과가 나오지 않고, 어째서 이상한 결과가 나오는가에 대해 고민하고 하나하나 해결해나가다 보니 시간도 많이 소요되었다. 한 요소를 고쳤다 싶으면 다른데서 오류가 발생하는 상황이 자주 벌어졌다.

• 클래스 명을 잘 생각해야 된다는 것을 깨달았다. 같은 태그에 대해 클래스 명을 잘 정한다면 반복해서 정의해줄 필요 없이 쉽게 코딩을 할 수 있을것 같고, 미리미리 틀을 잘 짜놓는 게 중요한 것 같다.

• 비록 수 많은 자기소개 페이지 리뷰와 강의들을 보면서 했지만.. 어째서 이런 코드를 넣는가? 이 코드는 어떤 요소에 영향을 주고 무슨 효과가 있는가?에 대해 생각을 깊게 하면서 만들다보니 HTML과 CSS에 대한 전반적인 이해에 도움이 된 것 같다.