프론트엔드/CSS 심화7 Stylelint 최종 수정 : 2024-05-25StylelintCSS를 위한 린터https://stylelint.io/ Home | Stylelintnpm versionstylelint.io 일반적인 CSS문법이 아니라 SCSS 같은 프리프로세서 문법, Styled-Components 같은 CSS-in-JS 라이브러리에서도 Stylelint를 위한 플러그인을 만들어서 제공하기도 한다. https://www.npmjs.com/package/stylelint-config-standard-scss stylelint-config-standard-scssThe standard shareable SCSS config for Stylelint. Latest version: 13.1.0, last published: 2 months.. 2024. 5. 25. Tailwind CSS 최종 수정 : 2024-06-01Tailwind CSSUtility-first 라는 방법론으로 디자인을 적용하는 라이브러리 중에서 가장 널리 쓰이는 CSS 라이브러리이다. class name을 컴포넌트가 아니라 기능에 붙임으로써 CSS의 문제를 해결하려 했다. Bootstrap과 유사하게 미리 정의된 스타일 구성 요소를 가져와 사용하는 방식으로 동작한다. 대신 utility CSS이므로 필요에 따라 확장성 있게 CSS를 작성할 수 있고, 빌드 시에 사용하지 않는 클래스는 제거되어 번들 크기에 주는 영향도 줄일 수 있다. 또한, atomic한 특성으로 인해 프로젝트의 크기가 거대해져도 스타일시트의 크기가 비례해서 늘어나지 않는 이점도 있다. SSR 관점에서 중요한 건 런타임에 스타일시트를 생성하지 않고 빌.. 2024. 4. 18. CSS-in-JS 최종 수정 : 2024-05-30CSS-in-JS자바스크립트 코드로 CSS를 작성하는 방식이다. Styled Components가 이에 해당한다.장점컴포넌트 단위로 나누어서 스타일링을 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다.클래스네임을 짓지 않아도 된다.자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋다. 단점 및 한계자바스크립트를 통해 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 발생하며, 렌더링 속도도 훨씬 느려지는 부작용이 있다.import styled from 'styled-components';const Button = styled.button` background-color: #ededed; border: none; .. 2024. 4. 18. CSS Modules 최종 수정 : 2024-04-18 CSS Modules 리액트 컴포넌트를 CSS로 개발하다보면 CSS 이름이 겹치는 문제가 발생할 수 있다. 이런 문제를 CSS Modules로 해결할 수 있다. 마치 자바스크립트 모듈을 사용하듯이 CSS 파일을 각각 독립적으로 사용할 수 있도록 해준다. 만약 같은 클래스 이름을 사용하더라도 CSS Moduels에서는 서로 다른 클래스 이름으로 인식한다. 장점 컴포넌트 단위로 나누어서 스타일링 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다. 필요하다면 Scss로 CSS Modules를 사용할 수 있다. 단점 및 한계 참고 자료 https://github.com/css-modules/css-modules GitHub - css-modules/css-modules: Do.. 2024. 4. 18. Sass(SCSS) 최종 수정 : 2024-04-18 Sass(SCSS) css는 웹 표준이기 때문에 문법이 빠르게 바뀌지 않는다. 그래서 개발자들이 사용하기 편한 여러가지 문법을 추가한 새로운 언어를 만들기 시작했다. 그 중에 가장 많이 쓰이는 것이 바로 Sass이다. 변수, 네스팅(Nesting) 문법, 믹스인(Mixin) 등등 다양한 기능을 제공한다. 이 중에서 변수와 네스팅 등은 웹 표준으로 흡수되기도 했다. Sass는 프리프로세서(Preprocessor) 스크립트 언어라고 하는데, 프로그램을 통해서 Sass 코드를 CSS로 변환한다. Sass에는 기존 Sass와 SCSS 두 가지 문법이 있는데, 최근에는 CSS의 모든 문법 위에서 확장된 문법을 사용하는 SCSS를 많이 사용한다. 장점 파일을 분리하고 부럴 올 수 .. 2024. 4. 18. 이전 1 2 다음
