제로베이스 프론트엔드 스쿨 - HTML/CSS프로젝트를 수행하면서

프론트엔드 스쿨을 신청한 뒤 수행한 첫번째 과제입니다.

총 5개의 미션이 있었고, 강의를 들은 것들을 다시한번 활용하면서 부족한 부분을 채울 수 있던 것 같습니다.

 

이번 미션을 하면서 가장 많이 든 생각은 react나 vue를 사용하고 싶다는 것이었습니다.

반복되는 태그를 하나하나 수정해야 했고, div 지옥에서 벗어나고 싶은 생각이 많이 들었습니다.

미션을 수행하면서 이부분을 컴포넌트로 만들면 더 깔끔하게 작성될 수 있을텐데 라는 생각이 자주 들었습니다.

 

그러면서도, HTML과 CSS 만으로 구현할 수 있는 범위가 꽤 넓다는 생각 또한 들었습니다.

이번 미션을 진행하면서 이전에 고민했던 부분을 이렇게 해결할 수 있었구나 라는 생각이 자주 들었습니다.

제가 가장 부족하다고 생각한 부분이 마크업 디자인 부분이었는데,

미션을 수행하면서 다양한 방법을 공부할 수 있었습니다.

 

미션 중에 가장 고민했던 부분은 요구조건에 맞춰 디자인을 하는것이었습니다.

이전에는 flexbox로 대부분의 모양을 만들고 디자인 하였지만,

이번 미션에서는 float 와 inline, flex, grid까지 다양한 조건에 맞춰 디자인을 하였고,

div만 사용하는 것이 아니라, ul 과 li, a 태그 등 다양한 태그 또한 활용해야 했습니다.

 

거기에 스크린 리더 사용자를 고려하는 등 사용자 경험에 맞춘 디자인을 만드는 것 또한 고민해야 했습니다.

그런 부분을 고민하면서 다양한 시도를 해볼 수 있던 것 같습니다.

 

개인적으로 가장 도움이 되었던 강의는 position관련 강의였던 것 같습니다.

이전에는 absolute와 relative 를 사용하면서도 왜 이렇게 되는지 막히는 부분이 있었지만, 

normal-flow의 개념과 각 position간의 차이 등을 배웠고, 어떻게 사용해야 되는지 배울 수 있었습니다.

 

마지막으로, 저는 공부를 할 때, 여러번 반복해서 공부를 합니다.

처음에는 10% 정도 이해하면, 다음에는 20%정도 이해하게 되고, 다음에는 50%, 그다음엔 90%... 이런 식으로

반복할 수록 이해하는 부분이 더 커지게 됩니다.

하지만 이러한 방법의 단점은, 처음 완주하기가 매우 힘들다는 점입니다.

따라서 처음에는 빠르게 완주를 도와주는 멘토가 필요합니다.

 

따라서 다시 공부를 하게 된다면 같이 공부를 할 사람을 찾아서 공부를 하게 될 것 같습니다.

공부 순서는 html 태그를 중심으로, 태그와 관련된 css를 공부하면서

html 태그 간 공통된 css, 사용법의 차이점 등 여러가지를 비교하며 공부해나갈 것 같습니다.