본문으로 건너뛰기

CSS를 깊게 배워봐야겠다고 느낀 계기

서론

프론트앤드 개발자임에도 화면 구현을 제대로 하지 못하고 있는 게 아닌가...?

취업 준비를 하고, 인턴 생활을 하면서 매일마다 뼈저리게 느끼게 되었다.

운이 좋게도, 인턴 생활을 하면서 주변에 잘하는 분들과 함께 일할 수 있었다.

그래서, 주변에 많이 여쭤보았다.

CSS를 잘한다는 것은 무엇인가요? 어떻게 공부해야할까요?

그렇게 추천받은 강의가 있다.

Joshua W. Comeau라는 분의 강의인데, 모두가 입을 모아서 추천을 해주었다.

다만, 강의가 무척이나 비싸, 엄두를 못내고 있던 찰나.. 사내에서 이 강의를 바탕으로 CSS 스터디를 진행하게 되었고, 이번 기회에 제대로 익혀보자는 생각으로 구매하게 되었다.

강의비가 260달러인데, 한화로 거의 40만원이다.. 인턴 월급의 상당 부분을 투자하였기에.. 이번 기회에 제대로 익혀서 후회없게 하고자 글을 적게 되었다.

CSS를 잘한다는 것은 무엇인가?

자바스크립트로 짤 것을 CSS로 해결하는 것.

동료들에게 여쭤봐도, 항해플러스의 코치님들에게 여쭤봐도 모두들 같은 대답이었다.

평소 가진 생각들을 비롯해서 여러가지를 종합해보았을 때, 내가 내린 결론은 다음과 같다.

CSS도 엄연한 코드임을 받아드리고, 이를 통해서 적재 적소에 맞는 속성으로 최대한 자바스크립트를 적게 쓰면서 화면을 구현하는 것.

왜 CSS를 깊게 배워야 하는가?

JS가 발전하고 있듯이, CSS도 날이 갈 수록 발전하고 있다.

그러나, 주니어 개발자를 기준으로 다들 JS는 팔로우 업을 하는데에 비해, CSS는 제대로 팔로잉을 하지 않고 있다.

또한, 다들 JS는 잘 작성하다보니, CSS로 짤 것을 JS로 짜는 경향이 있다.

프론트엔드 최적화의 기본은 리플로우, 리페인트를 비롯한 리렌더링 현상을 최대한 적게 유발하는 것이다.

프론트엔드와 관련된 연산에서 상당히 높은 비용을 차지하기 때문이다.

그리고, 적재 적소에 CSS를 사용한다는 것은 브라우저가 자체적으로 최적화된 로직에 따라서 이런 요소를 줄여준다는 의미가 되기도 한다.

나는 어떻게 학습할 계획인가?

단순하게 강의만 듣는 것은 의미가 없다.

웹 프론트엔드 개발자라면 모두들 한번씩은 CSS를 배워본 경험이 있을 것이다.

그러나, 이를 적재적소에 제대로 사용하지 못하는 이유는 평소에 CSS를 적극 활용해서 개발을 해본 경험이 드물기 때문이다.

나 역시도 마찬가지였다고 생각한다. 에전에 배운 경험이 있으나, 이를 제대로 활용하지 못하는 이유는 비슷하리라.

그래서, 이번에는 강의를 넘어서 CSS를 적극적으로 활용해보기로 했다.

위와 같은 사이트가 있다. CSS를 코테처럼 풀 수 있게 제공해주는 사이트들이다.

강의를 수강하고, 이렇게 문제를 풀면서 한번 제대로 진행해볼까 한다.

다행히 강의 자체도 적용 위주로 되어 있어서, 보다 쉽게 적용할 수 있을 것 같았다.

그러면 지금부터 제대로 학습을 시작해보자.