자기소개 페이지를 만들면서 어려웠던 부분이나 많이 헷갈렸던 부분에 대해 정리해보려한다.

시작

처음엔 Html과 Css를 처음 사용해봐서 유튜브 생활코딩님의 강좌들을 보면서 공부를 했다. Css를 배우고 난 후 디자인 쪽으로 많이 활용할 수 있다는 것을 깨닫고 검색을 하며 다양하게 찾아보았다.

초기

처음엔 간단하게 만들까 했지만 css에 관하여 여러가지를 찾아본 후 링크를 통해 페이지를 이동하는 것보다 팝업을 활용하여 현재 페이지내에서 이동 없이 출력하는 것이 어떨까 생각했다.

디자인

웹의 배경을 이미지를 넣지 않고 css를 통해 만들었다.

_.back
{
  position: relative;
  background: #0e1538;
  display:flex;
  justify-content: center;
  align-items: center;
  min-height:100vh;
}
.box
{
  position: absolute;
  width: 300px;
  height: 400px;
  background: #0e1538;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box::before
{
  content: '';
  position: absolute;
  top:-4px;
  bottom:-4px;
  left:-4px;
  right: -4px;
  transform: skewX(2deg) skewY(4deg);
  background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
}
.box::after
{
  content: '';
  position: absolute;
  top:-4px;
  bottom:-4px;
  left:-4px;
  right_:_ -4px;
  transform: skewX(2deg) skewY(4deg);
  background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
  filter: blur(50px);
}

이 디자인은 유튜브를 보면서 많은 것들을 참조했지만 이 다음부터 문제들이 계속 발생했다.

문제1

위 디자인에서 웹 중앙에 박스를 생성해 놓았는데 그 박스를 클릭하여 팝업을 띄우고 싶었다. 하지만 기존에 배웠던 방법들로는 이를 구현할 방법을 알 수 없었고 그에 관하여 찾던 중 "cheakbox"를 알게 되었다.

<input type="checkbox" id="popup">
<label for="popup" title="Click!">Start</label>

문제2

cheakbox를 통해 팝업 문제도 해결하였지만 팝업창 위에 내 정보를 출력하는 부분에서 팝업창을 넘어서 출력되는 문제가 발생했다. 이러한 문제들은 grid컨테이너로 해결을 하였다.

  display: grid;
  grid-template-columns: 300px 1fr;

아쉬운 점

1. 팝업창 내의 아이콘들을 클릭 시 학습 level에 관한 막대 그래프가 출력되는데 이를 클릭 시 왼쪽에서부터 슬라이드 되는 것으로 구현하고 싶었으나 실패하였다.
2. 메인 화면 좌측 상단에 메뉴 아이콘을 만들어 이를 클릭 했을시 메뉴창이 나타나게 구현하고 싶었으나 이 것 또한 실패했다.

Link : 자기소개 페이지 / github