제로베이스 1차 mission - html/css 제출 후기

1. HTML/CSS를 공부하면서 느낀점

⭐️⭐️ 기본기 진짜 중요하다.

사실 5개 미션 중 3개쯤 하고 나니 '헐 나 html / css 좀 치는 듯?' 싶었다.
그러고 미션4를 여는 순간, 설레발의 죗값을 치뤄야 한다는 것을 알았다.
겨우 울면서 미션4를 마쳤더니 순탄할 거라 생각했던 마지막 미션5 한테도 된통 당했다.

미션을 진행하면서 html 구조를 짜는 것부터 난관인 경우도 있었고 css는 늘 어려웠다.
가장 기본인 html/css인데 수월하게 처리하지 못하는 순간들이 오면 답답하고 앞날이 걱정됐다.
그래도 끝냈다. 어떻게든 마무리 했다.
지난 7월 처음으로 공부를 시작하고 많은 일들이 있었지만 온전히 나 혼자 과제를 완성한 건 처음이다.
이전에 다른 곳에서 공부할 때는 아무것도 몰랐다. 내가 뭘 모르는지도 몰라서 어디서 부터 공부해야 할 지도 몰랐던 때도 있었는데,
이제는 무려 미션 과제를 완성했다니 기쁨이 이루 말할 수 없다.

처음 과제 할 때는 미션 설명도 이해하기 어렵고 '이걸 언제 다 하나' 막막했는데 미션을 전부 끝내고 나니 오히려 다양한 방식으로 코드를 만져보고 고민해 볼 수 있어서 좋았다. 현업에서 디자인이 넘어오면 그걸 보고 어떻게 구현해야 하는지 단편적인 사례를 경험한 것 같다.
미션이 5개 모두 전반적인 html/css를 대부분 사용해보게 만들어준 부분이 좋았다.
아무래도 내가 알고있는, 자주쓰는 것만 쓰게되는 경향이 있는데 구현 조건을 걸어서 다양한 요소들을 써보게 만들어 놔서 좋았다.
덕분에 grid를 공부했고 또 재밌게 사용할 수 있게 됐다.

현업에서 내가 html/css를 처음부터 마크업하는 일이 얼마나 많을지는 알 수 없지만
이번 과제를 통해 원하는 뷰를 만들기 위해 html은 어떤 부분을 고려해야하고 css 적용에 어떤 방식을 취할 수 있는지 생각하는 방법을 배울 수 있어서 재미있었다.

2. HTML/CSS 공부하면서 어려웠던 개념과 이유

• 태그나 요소의 정확한 사용법과 속성 및 기능들의 효과와 범위를 대충 알고 있을 때 항상 문제가 생기는 것 같다.
  가장 어려웠던 건 inline 요소와 block 요소의 차이로 인해 css 적용이 다르게 들어가는 것이였다.
  과제를 진행하면서 발생한 어떤 문제 때문에 해결법을 찾다가 원인이 inline 요소와 block 요소의 차이로 인한 것이였다는 것 알게 된 것은 이미 4시간은 훌쩍 버린 후 였다. (문제가 생기면 빠르게 검색해보자. 이거저거 고쳐보겠다고 헛짓하지 말고 ㅠ)
  이 문제를 해결하면서 생각한 건, html/css는 확실히 알고 넘어가야 한다는 것. 그리고 강의로 배운 것은 실제로 적용하는 것과 다를 수 있다는 것이다.

• css 깎는 노인이라는 말이 괜히 있는게 아니다. 대충 할 수 있을 것 같아도 띠용 스러울 때가 있다.
  제대로 이해 못해서 그런건데 나는 대표적으로 position:absolute 를 쓰려면 상위 태그에 position:rlative가 있어야 하는 걸 몰라서 엄한 것만 잡고 보다가 6시간을 날린 적이 있다. position 사용에 대한 이해가 있었다면 발생하지 않았을 일이다. 그래도 과제를 진행하면서 position을 꽤 써볼 수 있어서 재밌었다.

• flex랑 grid를 각잡고 배울 수 있어서 좋았다.

• tranform을 배울수 있어서 좋았다. x,y 가 헷갈리고 어려웠는데 강의를 보니 금방 이해할 수 있었다.

• form 태그에 대해 이해할 수 있던 점이 굉장히 좋았다. 특히 form과 같이 쓰게 되는 input이 사용방식이 다양해서 어디부터 공부해야 하나 막막했는데 강의를 통해서 전반적으로 훝어볼 수 있었고 과제에서 조금은 사용해 볼 수 있어서 즐거웠다.

• 사실 mdn 자주 보라고 다들 말하지만 mdn 봐도 잘 모르겠다고요...그래서 강의로 보는게 더 좋았던 것 같다.

3. 나만의 공부팁

공부팁은 아니고 과제할 때 효과를 본 방법인데
완성예시를 이미지로 만들어서 그 위에 어느 요소에 어떤 조건이 있는지를 적고, 이를 바탕으로 손코딩을 먼저 진행했다.
나는 태블릿이 있어서 앱을 사용해 작성했는데 복잡하게 작성된 미션 조건들을 직접 정리하면서 적으니 머릿속에서 정리도 잘됐고
각 부분에 어떤 조건이 있는지 이미지 위에 작성하니 시각적으로 보기 좋았다.
또 손코딩이 시간이 조금 걸리긴 하지만 한번 손으로 적어봄으로써 기억에 더 남았고 코드를 칠때 실수도 적었다.
html과 css를 색을 다르게 구분해서 적으면 이미지 하나에 모든 조건들을 한번에 담을 수 있어서 꽤 효과를 본 방법이다.

4. 향후 목표

이제 걱정이 한가득인 자바스크립트이다. 진짜 알고리즘이 제일 귀찮은데 그래도 자바스크립트를 해야 재밌는 걸 많이 만들 수 있으니 중간중간 사이드로 만들고 싶은 것들을 생각해보면서 힘을 내야겠다. 요즘 늘어진 면이 있는데 다시 빠르게 공부해서 얼른 리액트로 넘어가고싶다.