처음에 HTML/CSS를 배울때는 내가 직접 작성한 코드가 실시간으로 웹 브라우저에서 동작하면서 정말 신기하다고 느꼈다. 그리고 웹사이트가 이런 식으로 만들어지는구나라는 생각도 하였다.
그렇지만 점점 배울수록 다양해지고 복잡해지는 개념들을 공부하면서 이렇게 다양한 개념들을 필요할때 꺼내서 쓸 수 있는 그런 개발자가 되려면 정말 많이 다뤄보고 어떻게 동작하는지 원리까지 파악을 해야 겠구나 라는 생각이 점차 밀려오기 시작했다.
그렇게 처음에는 만만할 줄 알았던 HTML/CSS, 그렇지만 지금 똑바로 해놓지 않으면 언젠가는 나의 발목을 잡을 날이 올 것이라고 생각이 들기 때문에 지금 내가 배울때 확실하게 익혀둘려고 생각한다.
내가 가장 어렵다고 느낀 개념은 바로 display:gri d이다.
grid를 편리하고 깔끔하게 잘 사용하기 위해서는 보통 grid-template-areas를 사용해야 하는데 이때 공간을 나눌때 1fr 또는 px단위로 나눌수 있다.
그런데 px단위로 나누게 될 경우 레이아웃의 넓이 만큼 정확히 할당 할 수 있지만 px로 할당을 하고 나면 나중에 margin값이 적용되지 않아 힘들었다.
그래서 px대신 fr로 공간을 분할하면 margin값은 적용이 되었지만 margin값이 적용된 만큼 fr의 영향을 받아 grid area내에 배치해둔 레이아웃 height들이 전체적으로 늘어나는 경향을 보였다.
그래서 레이아웃 배치가 망가지지 않는 선에서 레아이웃 사이에 공간을 줄려면 grid-gap을 사용해야만 했는데 그건 모든 부분에 일정 공간을 만드는 거기 때문에 한계가 존재하였다.
grid가 생겨나고 많은 사람들이 grid를 많이 애용한다고 들었는데 개인적으로 나는 display:flex가 가장 마음에 들었다...
내가 가장 도움이 되었다고 생각하는 강의는 기본부터 끝까지 러닝메이트 HTML/CSS강좌이다.
이 강의는 HTML과 CSS를 처음 배우는 사람들에게 매우 친절하다고 느껴졌고 또한 개념들을 가르치는 것으로 끝내는 것이 아닌 배운 개념들을 직접 적용해보고 어떻게 사용하는지 이해하기 쉽게 알려주었기 때문.
나는 HTML/CSS에 대한 개념을 배우면 그 개념을 배우는 것에 끝나는 것이 아니라 어떤 장치를 분해 해보고 다시 조립하는 과정 처럼
HTML/CSS을 실시간으로 테스트 해볼 수 있는 사이트에서 내가 직접 코드를 짜 다양한 상황을 연출해보고 사용해 볼려고 노력한다.
또한 실습강의는 완성본을 보면서 만드는 클론코딩식으로 강의를 진행하기 때문에 그냥 무작정 생각없이 따라하지말고 먼저 강사님이 코드를 치기전에 어떤 HTML/CSS를 어떻게 작성할까? 어떤 개념을 사용할까? 라는 생각을 먼저 해본다.
이렇게 해야 클론코딩을 하는게 의미가 있다고 생각하고 나와 강사님의 코드를 머릿속에서 비교해보면 훨씬 더 학습효과를 키울 수 있다고 생각하기 때문이다.