[1人 프로젝트] 포트폴리오 4회차

여기서 제일 시간 많이 썼다...

🎉 성과

완성한 부분

About 다음으로 Skill 단락을 만들어서 내가 보유한 기술과 자격증을 적었다.

완성한 이유

내가 열심히 공부하고있고, 어느정도 능력을 갖추고 있다라는 것을 보여주고 싶었기때문에 만들게 되었다.

---

✨ 느낀 점

💢 힘들었던 점

CSS 파일의 자체적인 에러

이번에 column을 이용했지만, column이 잘 작동하지 않아 flex, wrap-flex, table으로 배치를 변경해도 변화가 없었다. 또, 이유는 모르겠지만 body태그에 background-color도 적용되지않아 내가 만든 CSS에 큰 에러가 있다는 것을 깨달았고, 무엇이 문제인지 확인하려 했지만 도저히 못찾겠어서 새로 CSS 파일을 만들기로 했다. 다시 CSS를 재 작업하였고, 그 결과 column 배치가 제대로 적용되었다. 결국 무엇이 문제인지도 모른채 넘어갔다.

box가 사라진다?

또 문제점이 발견되었는데, box에 그림자 효과를 넣으면 box에 커서가 hover 되었을경우 box가 사라지는 문제점이 발견되었다. 인터넷의 검색결과는 column과 box-shadow가 충돌이되어서 작동되지 않는다는 영어권 커뮤니티의 글이 보였다. 그래서 flex-wrap으로 만들어 보았다. flex-wrap은 flex와 다르게 정해진 가로폭을 넘게되면 줄이동을 하여 몇줄로 만들 수 있다. colmn이 아니다보니 그림자효과를 넣어도 사라지지 않았다.

메뉴바가 사라진다?

그리고 상단의 메뉴바가 Skill 단란에서 사라지는 현상이 발견되어서, 메뉴바에 z-index를 999를 주어 무조건 맨 위로 위치하게 만들었다.

❗ 보완할 점

1. column을 이용한 구조 제작

결국 또 flex-wrap으로 사용하는것으로 돌아왔다. 다시한번 column을 이용해 제작해봐야겠다.