CSS

·CSS
사실 tailwind는 문서화가 너무 잘 되어있어서, css만 좀 알면 어떻게 사용하는지 찾기가 편리하다. tailwind 자체의 사이트에서 실제로 작업을 할 때 사용하는 문서는 조금 찾기가 어려운 감이 있어서 링크를 첨부한다. https://tailwindcss.com/docs/display Display - Tailwind CSS Utilities for controlling the display box type of an element. tailwindcss.com 이거는 그냥 임의로 불러온 것인데, display를 tailwind에서 이렇게 사용한다는 뜻이다. tailwind는 html 태그에서 class 에 쉽게 사용할 수 있다. 간단하게 사용하는 것을 예시로 든다면, 이런식으로 class 이름..
·CSS
PostCss의 가장 큰 장점은 CSS가 모듈화 되는 것이다. 모듈화의 장점은, 일단 css의 코드들이 꼬일 확률이 적어지고, 네이밍을 굳이 하지 않아도 되고 헷갈리지 않게 사용할 수 있다는 것이다. 이제부터 모듈화를 어떻게 하는 것인지에 대해 알아보도록 한다. 간단하게 app에 button1, button2을 만든다. button1, button2 동일한 클래스 이름을 이용해서 만들어 준다. jsx 파일도 같은 클래스 이름을 이용해서 만들어준다. 그냥 이렇게만 할 때에는, 이렇게 덮어쓰기가 되는 것을 알 수 있다. 같은 클래스 이름을 사용하면, 마지막 button2에 있는게 뒤늦게 실행이 되므로 button1의 style은 적용이 되지 않고 덮어써진다. 그래서 그것을 방지하기 위해 이렇게 button2..
·CSS
PostCSS 관련 공식 문서들 더보기 PostCSS: https://postcss.org/ PostCSS Plugins: https://www.postcss.parts/ Plugins Github 페이지: https://github.com/postcss/postcss/blob/master/docs/plugins.md PostCSS - css 전처리기 라고 부른다. 기본적인 css 만으로는 중복적으로 작성해야하고, 다른 브라우저의 호환성을 위해서 반복적으로 해주어야 하는 것이 많은데, 이제 이런 반복적이고 중복적인 것을 해결하고자 전처리기가 나왔다. - less, sass 같은 것이다. - 제공하는 문법을 맞춰서 css를 작성하고 최종적으로는 컴퓨터가 알 수 있는 css로 변환해준다. -PostCSS는 ..
갓생코딩
'CSS' 카테고리의 글 목록