👋🏻

About 페이지에서는 딱히 코드 리뷰할 부분이 없어서 이번에는 Favorites 부분까지 글을 써봐야겠다.

반응형 웹이 아닌 것을 찾는 게 더 힘든 지금 우리에겐 너무나도 당연하고도 당연하기 때문에 처음부터 자기소개 페이지를 만들면서 '반응형으로 만들어봐야겠다!'라는 생각으로 만들었다.

About Page

일단, 크기를 여러 단계로 나눌 자신과 시간은 없었고, 기본만이라도 되면 좋겠기에 어설프지만, 이 About 페이지를 창의 크기에 따라 반응하게 해보았다.

위의 이미지가 창이 넓은 경우이고, 아래의 이미지는 창이 좁은 경우이다.

background-image

개인적으로 About 페이지에서 가장 마음에 들었던 부분.
아주 단순하지만 한 가지색으로 배경을 채우기보다 그라데이션 효과를 주어 다음 페이지인 Favorites의 흰 페이지와 자연스럽게 연결이 되도록 했다.

background-image: linear-gradient(180deg, #62757f , #ffffff);

이 한 줄로 이런 고급(?) 갬성을 느껴볼 수 있었다.🤭

구성

이 페이지는 두 구역으로 나누어진다.
☝🏻, 사진과 동영상이 있는 부분. "row"
✌🏻, 텍스트와 스킬 박스가 있는 부분. "column"

<section class="about">
  <div class="row">
    <about-image>
      <img>...</img>
      <video>...</video>
    <div class="column">
    </div>
  </div>
</section>

코딩하면서 느낀 건데 좋지 않은 네이밍이었다.. 나만 볼 거니까 뭐.. 상관없겠지🙃

Image🖼 & Video📹

이 부분은 사실 너무 기본적인 부분이라 리뷰할 게 없다..

border-radius

사진과 동영상 모두 border-radius: 10px;를 적용시켜서 모서리를 약간 다듬어주었고 단위를 px로 사용할 때와 %를 사용할 때 모서리의 모양이 약간 달랐다.

굴곡이 시작되는 지점과 각도가 좀 다른 것 같다.
MDN에 올라와 있는 설명에 따르면

<length>
원의 반지름(radius) 또는 타원의 장반경(semi-major), 단반경(semi-minor) 축의 크기를 나타낸다. CSS의 <length> 타입으로 허용가능한 어떤 단위로도 지정이 가능하다. 음수는 지정이 불가능하다.
<percentage>
원의 반지름(radius) 또는 타원의 장반경(semi-major), 단반경(semi-minor) 축의 크기를 %(percentage)값으로 나타낸다. 가로축의 %값은 영역의 넓이(width) 값에 대응되고 세로축의 %값은 영역의 높이(height) 값에 대응된다. 음수는 사용 불가능하다.

라고 한다. 자세한 건 링크를 타고 들어가서 보자 😉

video

HTML

<video controls muted autoplay loop>
  <source src="images/downsized.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos.
</video>

• control 동영상 재생 시, 컨트롤러가 보여지게 한다.
• muted 동영상이 음소거 상태로 재생된다.
• autoplay 동영상이 로드 되고 자동으로 재생된다.
• loop 동영상이 무한반복 움짤처럼 반복 재생된다.
  저 텍스트 부분은 임베디드 동영상을 지원하지 않는 브라우저에 뜨게 되는 부분인 것 같은데 이미지의 alt와 다르게 그냥 적어도 나오는 것 같다. (신기)

MDN에 나와 있는 예제를 보고 추가해보았다.

동영상을 넣은 특별한 이유는 없고 그냥, 새로워서, 안 해본 거라, 해보려고 이다..ㅋㅋ

동영상은 노르웨이에 가면서 찍었던 동영상인데 햇빛 차단 유리 때문에 보라색 vioelt 너낌 몽환적이고 힙하자나,,?😉

CSS

.about-image img {
  width: 100%;
  max-width: 700px;
  border-radius: 10px;
}
.about-image video{
  width: 100%;
  max-width: 700px;
  margin-top: 2em;
  border-radius: 10px;
}

브라우저의 width에 대응할 수 있도록 100%로 지정해주고 넓은 상태에서는 두 줄로 나올 수 있도록 최대 사이즈를 정해주었다.

Skills

이 부분은 Flexbox를 연습해볼 좋은 기회였다.
(지금 생각해보면 'grid를 이용했으면 더 간단하게 만들 수 있었을 텐데'라고 생각이 들지만..)

이 별은 Font Awesome에서 가져온 건데 이 부분을 만들면서 느낀 게 Html은 파이썬에서 스트링을 곱하는 '-'*30처럼 반복을 줄여주는 뭔가가 없을까 라고 생각했다.

Html

<div class="skillItems item1">
  <h4>HTML</h4>
  <p>
    <i class="fas fa-star"></i><i class="far fa-star"></i>
    <i class="far fa-star"></i><i class="far fa-star"></i>
    <i class="far fa-star"></i>
  </p>
</div>

이런 식으로 써야 했기 때문에 뭔가 마음이 편치 않았다. 😞
내가 모르는 무언가 있는 걸까..?🧐

CSS

.skillContainer {
  align-self: center;
  max-width: 23em;
  background: #cfd8dc;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  text-align: center;
  align-content: space-around;
}
.skillItems{
  width: 30%;
  text-align: center;
  font-size: .9em;
}

처음에 의도는 3x3 배열을 만들고 싶었고 grid란 존재 자체를 모를 때였다.😅

그래서 skillContainer의 최대 너비를 지정해주어 한 줄에 들어올 수 있는 크기를 정해주었다.
그리고 skillItems의 너비를 30%로 지정해주어 브라우저 창의 크기가 작아져도 3줄이 유지되도록 해보았다.

Favorites Page

사실 이 페이지는 문제가 있다.. 😫
깃허브에 올리기 전에 html 파일을 직접 열어서 확인해 보면 잘 뜨는데 왜때문인지 이 페이지만 로드가 안 되고 새로고침을 해야 뜨는 현상이 발생한다.

이게 뭐람.. 내 쇼듕한 사진들이,,😭

어차피 아무도 안 볼 거야,, 나만 보면 되지,, 라며 정신승리 중이기는 한데, 로드가 문제라면 Lazy Loading을 해야 할까? 싶어서 구글링해본 결과, 지금 내가 건드려서 시간을 들일 부분은 아닌 것 같다고 판단했다.

그리고 이 레이아웃을 만들 때도 grid의 존재를 몰랐기에.. flex를 여러 방법으로 써보면서 배치하는 연습이 된 것 같다.

정상적으로 로드가 된 모습이다.

초기에 원했던 방향은 다음과 같았다.

• 모든 부분이 정사각형일 것
• 가로 사이즈에 반응해서 이미지의 크기와 사진간 간격이 변할 것
• 이미지가 크롭 되었을 경우, 가운데로 배치될 것
• 마우스를 호버했을 때 이미지가 확대되면서 사진에 대한 설명이 보여질 것

하지만 여러 문제가 발생했다.😱

문제 🤬

가로 길이를 맞추면 세로 길이가 맞지 않았고 세로를 맞추면 가로가 맞지 않았다.

그리고 어쩌다 반응형 정사각형을 만들었을 경우, 이미지가 한쪽으로 치우쳐져 있었다.

• 첫 번째 줄은 이미지 3개 다 가로가 더 긴 비율의 사진이라 저렇게 적용이 된것 같다.
• 두 번째 줄은 의도한 것은 아니지만 이미지 3개 다 1:1 비율이라 정사각형이 되었다.
• 세 번째 줄은 오른쪽 이미지만 제외하고 모두 세로가 긴 비율의 사진이라 세로로 길어진 것 같다.

그리고 현재 발견한 발생 중인 문제는 로드가 되지 않는 점과 일부 브라우저에서는 가로 사이즈가 줄어들 경우 이미지 박스의 세로 길이가 줄어들지 않아서 이미지가 세로로 무지막지하게 길어 보인다... 😵

나중에 시간이 된다면 grid를 이용해서 다시 만들어보고 싶다.

문제를 해결하기 위해 한 삽질 시도

구글링을 했더니 반응형 박스를 만드는 예제가 많이 보였다.
하지만 그 예제들을 그대로 가져와서 써보려고 했더니 이미지 박스를 두 개 이상 넣으면 이상한 결과물이 나왔다. div를 더 나눠서 했어야 했는지 모르겠지만 이리저리 해보다 안 되는 것 같아서 grid를 시도해보았다.

3행 3열을 만드는 것 까진 쉬웠으나 가로와 세로 길이를 갖게 맞추는 부분에서 잘 되지 않았다. 더군다나 서로 사이즈가 다른 이미지를 넣으면 서로 모양이 더 뒤죽박죽이었다. 😰 나중에 이 웹페이지를 실전용 포트폴리오 웹으로 사용하게 된다면 다시 해봐야겠다.
나중에 인스타그램 클론 코딩을 해보아도 재미있을 것 같다.

고난과 역경의 결과

로드만 잘 되고 세로 사이즈도 함께 잘 변하는 브라우저라면 다음과 같이 보이게 된다.
웹페이지 중 가장 많은 시간을 들였지만 가장 아쉬운 부분이다.

HTML

<section id="favorites">
  <h1 id="favHead">Favorites</h1>
  <div class="gallery">
    <div class="glaeery-item>
      <img src="" alt=""></img>
      <div class="gallery-item-info">
      <p></p>
      </div>
    </div>
    ...
  </div>

대략적인 구조는 다음과 같다.

CSS

.gallery {
  align-self: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  padding-top: 4em;
  padding-bottom: 6em;
  padding-right: 1em;
  padding-left: 1em;
  max-width: 1100px;
}
.gallery-item {
  position: relative;
  margin: 1.5%;
  cursor: pointer;
  flex-basis: 28%;
  overflow: hidden;
  display: flex;
  align-content: center;
  text-align: center;
}

• flex-basis: 28%;한 줄에 이미지가 3개까지 들어가도록 지정해주었다.
• overflow: hidden; 크롭이 된 이미지의 나머지 부분이 보이지 않도록 했다.

.gallery-item img{
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

• object-fit: cover; 이미지를 담고 있는 부분의 크기에 반응할 수 있도록 추가해주었다.

.gallery-item:hover .gallery-item-info{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

• 호버했을 경우 어두워지며 텍스트가 나오는 부분이다.

.gallery-item-info {
  display: none;
}

• 호버 상태가 아닐 경우 보이지 않도록 하는 부분

.gallery-item-info p{
  padding: 3em;
  color: var(--text-color);
}
.gallery-item:hover img{
  transform: scale(1.2);
  transition: transform 0.8s;
}

• 호버한 경우 이미지가 확대되는 효과

시간을 많이 들인 만큼 아쉬운 부분도 많이 느껴진 파트였다.
나중에 시간이 지나고 실력이 늘어서 이 글을 다시 봤을 때 한 방에 해결해 줄 수 있는 그런 개발자가 되어있었으면 좋겠다.