사람마다 CSS 스타일링 방법이 다르겠지만, 개발 경험이 있는 개발자들에게 공통 되어지는 스타일링 방법은 있는것 같다. 예를들어, 어떠한 elements들의 구조의 계층을 어떻게 할것인지에 대한 고민 이라던지, 어떤 스타일을 어떻게 적용하는지, 어떤 계열의 컬러 또는 명암 정도를 선택 하는지에 대한 것들을 유심히 관찰 하고 기록하기 위한 페이지가 될것이다. 물론, 이 페이지는 Tailwind styling에 관한 내용이다.
이전 페이지에 언급하였듯이, Tailwind는 지정되어 있는 클래스 이름을 className 속성에 가져다 쓰면 되는 CSS framework 이다.
아래 사진에서 빨간 동그라미는 div 태그 또는 각 역할에 대한 태그를 의미 하며, Nico 선생님의 div 구조를 파악할수 있다. 이구조를 자세히 보면 위에서 아래부터 y축을 기준으로 층을 나눈것을 볼수 있다.
주요 Tailwind 또는 CSS 스타일 속성들.
-
space-x-(수치) 또는 gap-(수치) : 강의 내용에선 위 사진에 있는 4.9점의 별점 요소와 하트 요소의 간격을 띄우기 위해 사용 되었다. 이제 따로 margin left 또는 right 으로 번거로운 작업을 안해도 된다
-
aspect-square : 실제로 aspect-ratio:1/1; 이며, 정사각형을 만들때 유용하며 주의할점으로는 추가적으로 w(width)를 꼭 주어야 한다.
-
각종 modifier : 기존 CSS 스타일링에서는 hover 스타일 속성을 주기위해 조금은 긴 코드를 작성해야 했지만, Tailwind 에서는 className에 바로 적용할수있는 hover,active,focus 등과 같은 긴코드를 아주 간결하게 만들어주는 modifier 가 제공된다.
modifier 을 중복으로도 사용이 가능하다(The power of just in time compiler) ex) file:hover:~
-
group : 특정 자식 element 의 스타일 속성이 부모 element의 이벤트가 적용 되고 싶을때 쓰면 유용하다. ex) 부모 element에서는 group 속성 추가 자식 element에서는 group-(modifier): 추가
-
peer : peer 은 group 과 같은 개념이지만 부모와 자식이 아닌 서로 다른 element의 관계성을 주어 특정 이벤트에 반응하게 해준다. 주의해야될 점은 peer은 peer selector 보다 앞에 위치 해야만 적용 가능하다.
이외 알아두어야 할것들.
- 강의 내용에서 JSX에서의 리스트 만들기 내용이 있는데, 주요 point는 아래와 같다.
map function 은 arr.map(callbackFunction(currentValue, index, array), thisArg); 으로 이루워 져있으며, index 인자값을 key 값으로 사용 되어 졌다.
자세한 내용은 아래의 링크 (React 공식 홈페이지)를 참고하면 좋을것 같다.
React (리스트와 Key) Link
-
화면 크기를 디자인할때에는 아주작은 모바일 사이즈가 default 로 되어있으니 작은 사이즈부터 큰사이즈 순으로 생각하고 개발해야한다.
-
반응형 modifier 의 경우 아래의 링크를 통해 grid 컬럼을 다루는 강의를 다시 다시보기를 추천한다.
https://nomadcoders.co/carrot-market/lectures/3472
