HTML/CSS 미션을 끝마쳤다!

Reina·2023년 11월 27일
0


할 일이 너무 많아서 일단 미션부터 해보면서 강의 내용을 복기해보자라는 마음에서 남들보다 빨리 진행하게 되었고, 빨리 마치게 되었다. (마감은 12월 13일이다)


결론부터 말하자면 이정도면 괜찮다! 라고 느꼈다.

사실 부트캠프를 시작하고 강의만 들을 땐 개념 위주의 수업이기도 하고, 테스트용으로 간단하게 코딩해서 꽤나 쉽다고 느껴졌다.

그러나 미션을 진행하면서 HTML 문서를 작성해 나갈 때 <div> 의 범위는 어디서부터 어디인 걸까, 여기엔 <p><span> 중 무엇을 적지? 하는 점과 클래스 이름은 어떻게 설정하는 것이 좋을까, ... (그 외에도 너무 많은 고민이 존재하지만) 하는 고민이 여럿 있었다. 미션은 강의와 달리 실무에서 실제로 사용되는 기능들을 요구했기 때문에 지식 + a 가 필요했기에 이 과정에서 굉장히 다양한 걸 배우고, 몸에 익히게 되었다. 확실히 무언갈 직접 찾아보고 깨닫는 것만큼 몸에 익히기 좋은 공부 방법은 없다고 생각한다.

다양한 파비콘의 설정 방법, aria-hidden, role, ... 웹 페이지 하나를 만들 때 사용자의 접근성을 위해 다양한 기능들이 필요하다는 것도 알게 되었다. 이는 사실 강의로만 들어서는 접근성에 대해 잘 와 닿지 않아서 못 느꼈던 점들인데 미션을 통해 가장 크게 느끼고, 중요성을 깨달을 수 있게 된 점이라 좋은 경험으로 느껴졌다.

미션을 진행할 때 전체적인 문서를 아무런 도움없이 만드는 게 처음이다보니 정말 오랜 시간들이 걸렸다. MDN 문서의 사용도 익숙치 않았고, 그 외의 추가적인 사용 방법이 궁금할 땐 구글링을 해 보면서 다양한 예시를 참고해야 했기 때문이다. 그러나 미션을 진행할수록 코딩에 익숙해지며 반복되는 기능들을 입력하는 데는 점점 시간이 줄어들면서 실력과 지식이 늘어나는 게 느껴져 기분이 좋았다.

나는 제로베이스 강의 중에선 HTML/CSS 장인의 핵심정리 & 프로젝트가 가장 도움된다고 느꼈다. 나머지 강의도 물론 좋지만, 이론을 진행하고 간단한 실습 느낌이기 때문에 실질적으로 사용할 때 많이 까먹기도 하고, 다른 것들과 같이 사용할 때는 코드가 마음처럼 동작하지 않을 때도 많았다. 그러나 이 강의는 클론 코딩임에도 불구하고 다른 사이트의 코드를 읽는 법이나 코드들을 엮어서 어떻게 구현하는지 등의 감을 익히기에 굉장히 좋은 강의였다. 강의가 추가된다면 이런 실습 형식의 강의가 추가된다면 더 좋을 것 같다고 느꼈다.



HTML/CSS를 공부하면서 무엇이 어려웠을까?

앞서 말했다 싶이 HTML 문서를 작성할 때는 <div> 의 범위나, <p><span> 의 구분이 살짝 헷갈렸고, 그 외에 <figure> 의 사용 등 강의로는 다 배운 개념이지만 실제로 적용하려니 막상 <div> 지옥 을 나도 모르게 만들고 있는 모습을 발견했다. 또한 레이아웃을 구성하는 것만큼 시간을 오래 소모한 부분은 클래스 이름 을 설정하는 것이었다.

이는 아무래도 HTML 구조를 작성하는 것 자체가 어색해서인 것 같은 게 <div> 의 범위나 클래스 이름 등은 미션의 마지막에 다다를수록 점점 익숙해지는 게 느껴졌기 때문이다. 다른 HTML 요소들도 사용하다보면 점점 익숙해질 테니 많이 연습해보기로 다시 한 번 다짐했다!

CSS는 사실 HTML 구조만 잘 잡아놓는다면 생각보다 어렵게 동작하는 건 아니라고 느꼈다. 그만큼 CSS는 의외로 금방 완성했기 때문이다. 원체 꾸미는 걸 좋아해서 그런지 CSS를 진행할 때는 오히려 힐링된다 느꼈다. (?) 구조가 맞아지고 점점 예쁘게 변해가는 문서들이 좋았다.

아 이외에 미션을 진행하면서 신기했던 점과 어려웠던 점도 몇 가지 있다.

신기했던 점은 현재 학교에서 '컴퓨터 그래픽스 디자인'이라는 과목을 수강하는데 이 수업에서 모바일 앱을 디자인해야 해서 피그마를 사용하고 있는데 이 덕분에 미션할 때 익숙하게 다룰 수 있었고, 정말 실무에서 많이 사용하고 있다는 것을 느꼈다.

어려웠던 점은 미션 4와 5는 미리 작성된 JavaScript와 HTML 문서가 연결되어 있어 이에 맞게 HTML 구조를 작성해야 했던 점이 조금 어려웠다. 미션 4는 그래도 JavaScript 코드가 짧아서 어떻게 동작하는지 파악하고 이에 맞게 해결을 금방했는데, 미션 5는 JavaScript 파일들이 많고 길어서 HTML 구조를 하나씩 수정해가며 스크립트를 파악해 나가는 게 오래 걸렸다. 이를 통해 중첩되는 <ul> 의 작성 방법을 평생 잊지 않을 수 있게 되었다 ㅎㅎ......



이들은 어떻게 공부하는 것이 좋을까

일단 HTML의 전체적인 요소와 CSS의 속성을 알기 위해 유튜브나 부트캠프 등의 이론 강의를 한 번 돌려 보면서 감을 익히는 게 좋다고 느꼈다. MDN 사용은 이후인 것 같다. 이번 미션을 통해 MDN 문서를 정말 많이 열어봤지만, 무슨 요소가 있는지도 없는 상태에서 문서를 찾아보기엔 쉽지 않다고 생각하기 때문이다.

강의를 통해 요소들에 대해 익혔다면 이 다음은 클론 코딩을 바로 시작하는 게 좋을 것 같다. 아무래도 이론만 들을 때는 정말 뭐든 쉽고 뭐든 익숙해지는 것 같지만 실제로 하나의 클론 코딩만 진행해봐도 이렇게 멘붕이 올 수가 없다. 클론 코딩도 우선적으로 코드를 어느 정도 작성한 후 막히는 부분이 생겼을 때 사이트의 코드를 보는 것을 추천한다. 나와는 아예 다르게 작성된 코드를 구경할 수도 있고, 나와 완전 비슷하게 작성된 코드도 구경할 수 있어 정말 색다른 경험이 될 것이다.

미션을 진행할 때 이렇게 하는 게 맞을까? 하는 확신이 없어 굉장히 망설여지는 점들이 많았다. 그러나 한 강의에서 '모든 사람의 코드가 정답은 아니며, 내가 작성한 코드도 정답이 될 수 있다.' 라는 말에 굉장히 힘을 얻고, 자신감을 얻을 수 있었고 코딩을 일단은 할 수 있게 되었다. 이 점은 내 실력을 늘리기에 충분한 발단이 되었고, 코딩을 익히고 싶다면 일단 해 보는 것이 가장 중요하다고 느꼈다.

잊지 말자 코딩에 정답은 없다. 실력을 늘리고 싶다면 일단 시작하자!

profile
호기심 많은 프론트엔드 개발자

0개의 댓글