요즘 어쩌다보니 CSS를 공부하고 있다
TypeScript와 Angular도 공부하기 넘 바쁜와중에 CSS이놈이 Java Base인 백엔드 개발자인 나를 너무 고통스럽게 한다
하루에도 자괴감과 성취감을 매 순간마다 주는 녀석이 CSS(Cascading Style Sheets)이다
말 그대로 폭포처럼 흐르다 란 의미를 갖고있기때문에
이 친구들도 몇몇 속성은 상속이 되고, 안되고 등등을 갖고 있다
그리고 기본적으로는 순차적 구조라서 1번째 라인에서 color: black; 이었더라도 500번째 줄에서 color: red;가 들어가면 red가 된다( 아 물론 !important 가 걸려있는 경우 제외)
기본적으로 배워야 할 순서는
1. 선택자
2. display & border
3. box model
4. position
5. 선택자(특성선택자, 결합자)
6. 의사클래스, 의사요소
7. inherit/initial/unset
8. z-index
라고 생각한다 그리고 이것을 끝냈다면
flexbox / gridbox에 대해서 공부한 후,
Responsive CSS(media/max,min), Animation, 3D, Cross Browsing, Meta-, UI Skills(스켈레톤 UI 등등), SVG, text ellipsis 등
SASS(SCSS), Styled-component CSS에 대해서 공부하면 좋다. 요즘 뜨고 있는 Tailwind CSS는 개인적으로 불호이다.. 왜냐하면 개발속도는 빠를지언정 유지보수에 대한 걱정때문이다
추가로 BootStrap UI, Material UI에 대해서 공부하면 좋다 대부분의 기업들이 이 라이브러리 두개중 하나를 택해서 프론트를 개발한다
개발 초기나, 중기, 혹은 마지막쯤에 모바일까지 생각해서 구현하기도 한다
보통은 수익의 다양화를 위해 여러 플랫폼으로(IOS, Android) 나누거나, React Native/Flutter 등으로 개발하고 다운로드 할수있는 페이지로 리다이렉트 시키기도 한다
그럼 내가 주말 카페에 나와서 심심풀이(?)로 해봤던 CSS 사이트에 대해서 소개하고 마무리를 해볼까 한다
첫번째로는 선택자와 CSS 기본( > ~ & : nth ) 에 대해서 공부한 것을 활용해볼 수 있는 CSS Diner 사이트이다
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
저기 체크된 부분을 보면 내가 움직여야 할 요소(element)가 움직이는 모습을 볼 수 있다
왼쪽의 CSS부분만 건드려서 문제가 요구하는 것을 해결하면 된다
32단계까지 다 끝내면 이런 화면을 볼 수 있다! 하핫
살짝 헷갈리던게 4개정도 있던 것 같다
나름 재밌다!! 글 다 읽고 가도 되고 중간에 가서 해봐도 된다
한 다음 글쯤에 이 CSS 문제들에 대한 답 포스팅을 하려고 한다
두번째로는 flexbox froggy이다
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
이름에서 알 수 있다시피 Flexbox를 공부한 후 와서 해보길 추천한다
CSS로 색깔에 맞는 개구리를 각각 연못 위에 올리는 사이트이다 넘 귀엽
가장 최신으로는 girdbox까지 나왔는데 너무 최근에 나왔기도 하고, 러닝커브가 조금 있는편이라 내가 다녔던 회사들중에서는 쓰는것을 아직까진 못 봤다
이것도 클리어!! 하면 이렇게 화면이 나온다 쿠쿡
마지막 1문제 빼고는 어려운 게 없었던거같다
마크업 언어라도 주먹구구식으로 하지 말고 책이든 강의로든 한번정도는 지식을 쌓아놓고 하면 좋은 것 같다
예전에는 어려웠는데 이번에 쉬운것을 보니 나도 조금은(?) 성장했다는 생각이 든다
이 친구도 다음 포스팅쯤에 답을 올려보려고 한다
flex는 사실 배워보면 쉽다 justify-content는 주축, align-items는 교차축, align-content는 2줄 이상일때 효과라고 보면 된다
사실 이 3개만 알면 끝이라고 보면 된다 내 생각은..!
그럼 CSS 첫번째 포스팅 끝!
댓글