1주일 포트폴리오 후기 및 리뷰

안녕하세요 개발적금입니다.

요근래에 포스팅을 못했었습니다...

배운것을 토대로 교수님께서 두가지중 택1을 하여

만들어보라고 하셔서 저는 

 

1. 포트폴리오

2. 클론코딩

중에 포트폴리오를 만들었습니다.

 

앞으로 Node.js 및 다른것을 배울때 JavaScript를 많이

사용할것같아서 이참에 포트폴리오를 하면서

HTML/CSS를 확실하게 해두고싶어서 포트폴리오를 

하였고 결론부터 말하자면 HTML/CSS는

안되는게 없어보였습니다..ㅎㅎ

결과물은 별게 없지만 그래도 리뷰는 하는게 좋으니 한번

해보겠습니다.

---

 

1. To Do List 작성!

 

-> 교수님께서 작업 들어가기전부터 강조하셨던

사항입니다 하루하루 To Do List를 작성하여서

해야할일과 완료된일 못한일을 나누어 작성하라고 하셨습니다.

 

따로 Github의 wiki같은곳에 작성하여도 좋고

Trello 같은곳에 메모로 나누어 관리하여도 좋다 하셨습니다.

그런데 교수님의 말을 귀담아 듣지 않은 저는..

따로 블로그에 비공개로 하여 

1일차 데일리 로그 ~ 5일차 데일리 로그 까지 매일매일

업데이트를 하여서 작성하였습니다.

 

 

 

 

이렇게 올리는게 맞나요..? 맥북 처음써봐서

남들처럼 하고싶었는데..ㅠ

이런식으로 작성하였습니다!!

다음번에는

Github의 wiki나 Trello 를 사용하면 좀더 고급지게 할수있을거같아요!

 

---

 

2. 포트폴리오

 

포트폴리오를 들어가기전에 교수님께서는 미션을 주셨다.

 

1. 반응형 웹으로 만들것

 

2. 애니메이션 효과를 하나이상 꼭 넣을것

 

3. 메뉴항목에 " 프로젝트 "칸을 꼭 넣을것

 

저는 또 교수님의 말을 귀담아 듣지않고 실수를 범했습니다...

 

1. 반응형 웹으로 만들것

-> 이부분이 조금 난해했습니다... 사실 추후에야 깨달은점은

 

-> 초기에 레이아웃을 잡아두고 , 반응형 웹으로 만들 공간의

Display flex를 한 후에 , flex-direction을 조건문을 걸듯이

Media query를 통해서 설정해야 한다는 점입니다.

 

사실 이전부터 교수님이 당부하며 말해주었지만.. 직접 맞기전까지는

깨닫지 못했기에.. Header부분쪽 작업완료 후 반응형으로 만들어놓고

그 밑에 Content부분이나 footer부분은 신경을 못썻습니다..

 

교수님은 이런 저희의 미래를 볼수있었던것일까요?

Trello나 wiki같은곳에 해야할일들을 제가 정확하게 이행하고 넘겼다면

이런 불상사는 일어나지 않았을것입니다..

 

완성된 후에 까짓거 한번해봐야지! 하고 건드렸다가 피를봤습니다..

 

2. 애니메이션 효과를 하나이상 넣을것 

 

저는 animation 속성과 @keyframes 속성을 이용하여 구현하였습니다!!

typing하는 방식으로 처음 메인화면을 표현하였고 그 typing은

" BlockChain Developer "라는 글자였습니다.

 

교수님은 포트폴리오 디자인에 시간을 너무 두지말라고 하셨지만

그래도..마음에 걸려서 조금 많이 참조하였습니다.

typing 형식으로 나오는게 멋있어서 따라했죠..

 

@keyframes typing{
    0%{
        width: 0%;
    }
    50%{
        width: 100%;
    }
    100%{
        width: 0%;
    }
}

 

keyframes는 이렇게 작성하였고 , typing은 span으로 작성하였으며 , 가상선택자 ::before를 사용하여

[ animation : typing 10s ease-in-out infinite; ] 를 작성하여 애니메이션 효과를 주었습니다.

점점빨라지게 무한반복하며 typing은 작성되는데 10초가 걸린다 라는 말입니다.

 

---

 

그 외에 기능구현에 어려웠던점은 화면이 내려갈때 fixed되어있는 header부분때문에 , 

메뉴를 눌러 해당항목에 스크롤이 이동하면 , 위치가 header부분만큼 가려져서 나오는것 이었고.

 

구현을 못한기능은 project 메뉴에서 클릭하였을시 project 했던 새로운 창이 뜨게되며 , 

그 안에서 레이아웃 구성을 못하였습니다.

 

실수한점이 또 있는데, Github에서 repository를 만들어서 작업을 하면 될줄알았는데,

Github Pages에 적용을 안시키고 작업을 하였습니다 ㅠ.ㅠ

이부분도 다음부터는 유의해서 작업을 해야겠습니다..

 

 

 

 

---

 

마치며.. 재밌는 한주였습니다..

제가 공부하였던것으로 무언가를 만들고

모르는부분에 있어서 검색하여 찾아내 문제를 해결하는과정이

머리는 아프지만 희열이 있었습니다

앞으로도 계속 재미있었으면 좋겠습니다

감사합니다.