CSS 공부 방법 정리

 

대학교 학부때 C언어, C++, Java 등의 언어를 사용한 backend 개발을 하던 내가 첫 회사에 취업하고 web(html, css, javascript)등의 front-end을 배우고 Spring boot를 이용해서 back-end로 RestAPI를 개발하면서 계속 뭔가 부족함을 느꼈다.

 

첫 회사에서 계속되는 무리한 일정 요구, 더 잘해야 한다는 내 자신에 대한 채찍질, 나를 이끌어줄 사수의 부재 등등 이런 생활이 반복되면서 번아웃이 심하게 왔고 퇴사를 하고 몇 일 ~ 몇 주간 개발자(프로그래머)라는 직업에 대해 생각하고 내가 싫었던건 그 회사의 시스템이였지 개발이 아니라는걸 느끼고 또 몇몇 멘토링의 결과 더욱 성장하는 한명의 개발자가 되고 싶은 욕심이 강해졌다.

 

퇴사 하기 전의 회사에서는 SI회사라 풀스택으로 front-end, back-end 심지어 DB 작업까지 다양하게 건들여야 했는데 넓게 이것저것 하는게 아닌 하나의 영역을 더욱 잘하고 싶었다. 그래서 내가 하고싶은 거에 대해 끊임없이 혼자 질문하고 내려진 결론은 front-end쪽 특히 잠깐 맛본 React, Angular에 대한 인상이 깊게 남았고 바로바로 확인해보면서 UI적으로 만들수 있는 front-end에 대해 관심을 갖고 이쪽으로 깊게 공부해서 발전을 하기로 마음을 먹었다. 

 

하지만 제일 큰 난관은 CSS였다. 디자인 쪽에 관심도 없고 이제 CSS를 제대로 반응형이니 뭐니 적용하려고 하니 너무 어렵잖아?

CSS 그래서 어떻게 공부했는데?

사설이 되게 길었는데 CSS 공부 방법을 공유한다. 이 방법이 유용한 사람들도 있을거고 아닌 사람들도 있을 거다. 그냥 참고만 하면 좋을거 같다.

 

첫 번째) 그래도 개념은 알아야지

첫 번째는 그래도 개념은 알아야 한다는 거다. CSS에 대한 강좌도 많고 정리 문서도 많고 W3School같은 곳에 가면 차근차근 step by step으로 볼 수도 있다. 이정도 기본 개념은 한번 쓱 흝어 보는게 좋지! 물론 여기서 너무 세세하게 안봐도 된다. 나같은 실전형의 사람들은 세세하게 본다고 다 기억하지도 못하고 지루하고 관심도 안간다.

그냥 선택자는 뭐가 있는지, 어떻게 class 명이나 id를 선언해주는지 등등 진짜 기본적인 것만 알아두면 된다. 

 

 

두 번째) 이제 박스 모델에 대해서 조금 공부를 해보자!

이것도 너무 어렵게 생각할 것 없다. padding이 어느 부분을 말하는 건지, margin은 어떤 부분을 말하는건지, border를 설정하면 어떤 부분에 border가 생기는지 등등 진짜 간단한 내용들만 알면된다.

이것도 자세한 내용은 google에 CSS 박스 모델이라고 검색하면 엄청나게 방대한 자료가 검색된다. 

 

 

세 번째) flexbox, grid가 뭔데?

flexbox, grid에 대한 공부가 이제 필요하다. 개인적으로 flex, grid를 알았을 때와 몰랐을 때 CSS난이도 차이가 심했다. 물론 아직도 어렵고 아직도 공부 중이지만 이건 반드시 배워야 할 것이라고 생각이 된다.

이 내용에 관해서는 youtube 유노코딩님의 CSS 레이아웃 - flex & grid 강좌를 보는걸 추천한다, 물론 다른 좋은 강좌가 있으면 그걸 봐도 되는데 개인적으로 제일 편하게 본 강좌여서 추천한다.

 

 

네 번째) 반응형을 위한 준비

@media (미디어 쿼리)를 알면 반응형의 준비도 어느정도 되는데, meta태그의 뷰 포트같은 내용도 같이 봐주자 그렇게 어려운 내용은 아니니 금방 볼수 있을 것이다. 적용하는게 어려운거지...

 

다섯 번째) 이제 실전 연습이다

CSS에서 가장 중요한 것은 많이 해보고 몸이 익숙해지고, 하다 보면 이상함을 감지 하고 뭔가 잘못된걸 느낄수 있는데 그때까지 반복훈련이 제일 좋다는걸 깨달았다. 하지만 흔히 말하는 어떤 웹사이트 클론코딩하기, 직접 디자인 만들어서 적용하기 전부 나한테는 너무 어려웠다. 웹사이트 클론코딩을 하자니 범위를 어느정도로 설정을 해야 겠는지도 모르겠고, 직접 디자인을 만들어서 적용하는건 당연히 나는 모르오 상태다.

 

그럼 어떻게 실전 연습을 하라는거냐고? 그건 이제 부터 공유를 시작한다!

 

실전 연습 1. figma를 이용하자!

여기서 피그마 사용법을 조금 알고 있으면 좋다. 나는 몰라서 하나하나 찾아가면서 작업했다. 

 

피그마를 가입하고 community를 가면 몇몇 개인이 올려주신 소중한 자료들이 있는데 예시를 보여주면 Responsive Login이라고 검색을 했을 때 나오는 자료가 있다. 

https://www.figma.com/community/file/1189145248196817953

Login UI Responsive Template Mobile + Web | Figma Community

예를 들면 이런 것이다. 이런 내용을 링크 남기고 사용을 하면 무료 라이센스여서 마음껏 사용할 수 있다. (물론 라이센스 확인은 습관적으로 하는게 좋다)

 

이런 figma를 통해서 작은 것부터 만들면 몇 가지 이점이 있다. 

 

1. figma로 작업하는 디자이너와 협업할 때 어떻게 하는게 좋은지 혼자 경험해 볼 수 있다.

2. 어떻게 디자인 해야겠다 만들거나 어떤 페이지를 클론코딩할지 계속 찾아보면서 시간을 낭비할 필요 없고 클론코딩을 할 때 디자인 샘플이 없어서 이미 만들어진 div 태그나 그 태그에 적용된 속성값들을 ctrl+c, ctrl+v 하지 않고 직접 div 태그를 구성하고 적용되어 있는 디자인을 적용해 볼수 있다.

=> 이렇게 말하면 클론코딩이 안좋은거 같은데 절대 그렇지 않다. 클론 코딩을 아무 생각 없이 그냥 막하는게 문제인 거지 div를 어떻게 사용했는지 공부하고, 왜 css를 이렇게 적용했는지 공부하고 하나하나 뜯어가면서 공부하면 클론 코딩만한 공부가 없다.

 

이 밖에도 많은 이점이 있지만 정리하기 힘드니깐 직접 경험해 보는걸로 하자!

 

실전 연습 2. webflow를 이용

webflow의 Marketplace -> Templates에 들어가면 무료로 사용가능한 Template들이 있다. 내용을 보면 Preview in browser를 통해서 브라우저 상에서 직접 구현되어 있는 내용을 볼수도 있고, Preview in Designer를 통해서 디자인 파일을 브라우저상에서 볼 수도 있다. 

 

Preview in browser를 통해서 클론코딩을 하던가, Preview in Designer를 통해서 디자인파일을 보면서 만들어 볼수도 있다. 물론 webflow는 figma처럼 특정 component만이 아니라 한 웹사이트를 다 디자인하고 보여줘서 해야할게 많지만 하나만 제대로 만들어도 반응형웹, flex or grid 등등 많은걸 공부할 수 있다. 

 

이 밖에도 공부 방법이 여러개 있는데 기억나는대로 추가해보려고 한다.