1. HTML/CSS를 공부하면서 느낀점
제로베이스를 통해 공부하기 이전에 혼자서 HTML/CSS/JavaScript를 공부해왔다. 주로 온라인 강의를 듣고 강의에 나오는 코드를 단순히 따라서 써보고, 코드가 동작하는 것만 확인했다. 이러한 방식의 공부는 배운 내용을 응용해서 사용하기 어렵게 만들었고, 이는 공부한 내용의 이해도에 많은 영향을 끼쳤다. 특히, 빈 Visual Studio Code를 보고 있으면 막막하다는 기분까지 들었다. 무엇을 어디서부터 손을 대야할지도 모르는 그런 막막함이었다.
하지만 제로베이스 강의를 듣고, 주어진 과제를 하면서 이것 저것 응용해보고 실제로 구현해보면서, 막막함 보다는 일단 해보자라는 마음이 들었다. 구현하고 싶은 요소를 마크업하고, 원하는 위치에 삽입하기 위해서 다양한 CSS 속성들을 사용한 것. position, display, grid, float 등 기존에 알고는 있었지만 실제로 사용해보라고 한다면 막막했던 것들이 이제는 조금씩 코드를 작성하기도 전에 대략적으로 머리에 그려졌다. 상당한 발전이었다. 지금은 어떤 과제가 주어져도 할 수 있다는 자신감이 생겼다.(주지마세요)
그럼 내가 공부한 것을 잠깐 기록해본다.
2. HTML/CSS를 공부할 때 어려웠던 개념과 이유
어려웠던 점
사실 HTML/CSS 공부를 할 때 느꼈던 가장 어려웠던 점은 정답이 없었다는 점이다. 실제 실습 강의를 들어보면, 강사분들 각자가 다 다른 스타일로 마크업을 하고 스타일을 입히고 있다. 그리고 강의 중간중간 '정답이 없다'라는 이야기를 하며, 개발자마다 스타일이 다 다르다고 이야기를 했다. 사실이었다.
Mission-1의 과제를 확인하고 시작할 때, 정말 어떻게 만들어야하는지 감도 잘 오지 않았다. 이렇게도 할 수 있고, 저렇게도 할 수 있고, 이렇게 하면 되는 것인지, 저렇게 해도 되는 것인지. 정말 많은 선택지가 있었다. 아무도 조언이나 평가해 줄 사람이 없는 상태에서 다양한 선택지가 있었다는 것. 이게 가장 어려웠다.
다만, 첫 발을 떼는 것이 어려워서 였던지, 그 다음 과제들은 다양한 선택지 중에서도 구현할 때 가장 적합할 것 같은 방식으로 진행하였다. 물론 스스로 판단한 것이고, 처음 구현해 본 것이기 때문에 잘못된 부분이 있을 수 있다.(강사님의 쓴 소리 기다리고 있습니다!!) 하지만 과제대로 구현하고 동작하는 모습을 보니 일단은 뿌듯하다.
어려웠던 개념
가장 어려웠던 개념은 vertical-align이다. 지금도 헷갈린다. 과제 중에 vertical-align을 써야하는 경우가 있었는데, 원하는 대로 요소들이 세로로 정렬되지 않았다. 뭔가 중앙에서 살짝 벗어난 느낌이었다. 그래서 vertical-align관련 내용을 찾아보니, 꽤나 복잡했다. 간단히 말하면 vertical-align의 기준이 되는 위치가 복잡하다. baseline, linebox 등이 있고 이것들은 가변적이다.(폰트에 따라 baseline이 바뀔 수 있음.)
여전히 vertical-align을 사용하라고 하면, 이것저것 테스트 해보고 적용할 것이다. 하지만 지금 우리에겐 훨씬 간단하고 직관적으로 사용할 수 있는 스타일이 있다. 바로 flexbox이다. 사실 그래서 vertical-align을 100% 이해하고 넘어가진 않았다. 아직 실무를 경험해보지 못한 나는 현장에서 얼마나 vertical-align이 사용될지는 모르겠다. 하지만 간단히 요소들을 정렬할 수 있는 방법이 있는 한 flexbox를 쓸 것 같다.(flex만쉐이~)
3. 제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유
HTML/CSS 장인의 핵심정리 & 프로젝트가 가장 많은 도움이 된 강의이다. 앞서 이야기한 막막함이라는 감정을 많이 덜어내준 강의로, 웹 클론 코딩을 진행하는데 0부터 10까지 전부 하나하나 만들며 필요한 부분을 설명을 해주었다. 특히 클론 코딩을 진행할 웹페이지와 90% 이상 유사하게 코딩하여서, 내가 어디를 어떻게 수정을 하면 원하는 위치에 요소를 구축할 수 있는지 알려주었다. 그리고 실제 웹 페이지의 구현 방식을 비교하며 본인이라면 어떻게 마크업을 하고 스타일을 입힐 것인지에 대해서도 설명해 주며,(정답이 없다는 말로 인해 어려워지긴 했지만...) 다양하게 구현하는 방법을 알려주었다. HTML/CSS 스타일 공부를 한다면 해당 강의는 꼭 다 듣기를 추천한다. 다만, 진행하는 속도가 빨라서 여러 번 강의를 멈춰가며 코딩하고, 왜 이렇게 스타일링을 했는지 고민하는 시간이 꼭 필요하다. 이해가 되지 않는다면 코드를 바꿔서 어떻게 스타일링되는지 보고, 다시 강사님이 작성한 코드로 돌아가서 다시 확인해 보는 것이 매우 중요하다고 생각한다.
4. 나만의 공부팁
강의 듣기 순서
① 기본부터 끝까지 러닝메이트 HTML/CSS (소개가 자세하기 때문에 먼저 듣기)
- HTML 강의 개요
- HTML 소개
- CSS 개요
② 처음부터 따라해보는 HTML/CSS 실습
- 전체 강의 (길지 않으니 빠르게)
③ HTML/CSS 장인의 핵심정리 & 프로젝트
- 전체 강의 (실제로 전체 페이지를 다 작성해보기)
먼저 HTML과 CSS에 대한 자세한 소개를 먼저 수강한 뒤, 바로 간단한 실습을 듣는 것이 좋다고 생각한다. 다른 두 강의는 매우 간단하게 HTML과 CSS를 소개하기 때문에, 처음 강의를 듣는 사람들에게 좋을 것으로 예상한다.
처음부터 따라해보는 HTML/CSS 실습은 간단한 웹페이지들을 러프하게 만들어 보는 강의라 HTML과 CSS에 익숙하지 않은 사람들에게 좋을 것으로 보인다. 또한 간단하게 나마 자주 사용하는 HTML태그와 CSS 속성들을 알려주기 때문에 간단한 기초를 쌓기에 좋다고 생각한다.
그 다음 HTML/CSS 장인의 핵심정리 & 프로젝트는 좀 더 심화 과정으로 특히 CSS가 아닌 SCSS로 작성하기 때문에 먼저 CSS에 익숙해진 다음에 수강하는 것이 좋다. 이 강의에도 마찬가지로 기본적이고 필수적인 HTML 태그와 CSS 속성들에 대해서 알려주기 때문에 그 부분도 다 듣고 실습으로 넘어가는 것이 좋다고 생각한다.
실습 강의를 모두 들었다면 이제 과제로 넘어가서 실제로 혼자서 웹페이지를 만드는 연습을 하자. 과제를 하다보면, 실습 때 배우지 못한 속성이나 태그를 사용하라는 요구사항이 있다. 이럴 때 기본부터 끝까지 러닝메이트 HTML/CSS강의를 보면 MDN을 기반으로 설명하는 강의가 있다.(없는 경우에는 구글로...) 그 강의를 수강하면 된다. 이 강의는 딱, 사전과 같이 사용하면 된다. 추가로 본인이 기본이 부족하다거나, 잘 모르겠다고 하는 부분을 찾아서 들으면 된다. 나의 경우에는 필요에 의해 구조를 나타내는 요소 강의를 들었고, flexbox, 레이아웃는 구체적으로 더 알기 위해서 강의를 들었다.
공부팁
공부 방법은 별 다른 것이 없다. 알아두어야 할 것은 필기를 하면서 들었고, 궁금한게 있으면 직접 코드를 작성해서 동작하는 원리나 방법에 대해서 알아냈다. 정말로 모르겠다면 구글링을 하고 다른 사람들의 코드를 보았다. 정말 중요한 것은 코드 동작에 의문을 가지는 것이고, 그 의문을 해소하기 위해서 고민하고 노력하는 것이라고 생각한다. 이렇게 적용하면 저렇게 동작하고, 저렇게 적용하면 이렇게 동작하는구나라는 것을 스스로 알면 그 다음에 동일하게 적용하는 경우에는 좀 더 쉽게 스타일링을 적용할 수 있었다. 이 글을 읽는 여러분도 스스로 해보길 바란다.
(vertical-align은 논외로...)
마무리
나는 공부할 때 실습이 중요하다고 생각하는 입장이다. 수학 문제를 풀 때도, 외국어를 공부할 때도, 스포츠를 배울 때도 동일하다. 프로그래밍도 마찬가지라고 생각한다. 연습, 실습을 하다가 모르는 부분이 있으면 그 부분을 공부하고 다시 실습하고, 이렇게 반복을 하다보면 언젠가 개발자로 일하고 있는 내가 있지 않을까 생각한다. JavaScript, React, Vue 등등 아직 갈 길이 멀지만 일단 과제 1개 끝냈다는 자축을 하며, 이만 글을 마친다.
