React/CSS (6) 썸네일형 리스트형 CSS #6 - CSS-in-JS (2) Styled-Component with Storybook CSS-in-JS !== Inline Styles styled-component를 작성하기 위해서 TTL로 작성하다 보면 종종 inline style로 작성하는 것처럼 느껴질 때가 있습니다. 그러나 만약 inline style과 같다면 CSS-in-JS를 대신하지 않았을까요? inline style에서 할 수 없는 부분들에 대해서 CSS-in-JS가 더 많은 기능을 제공합니다. inline-style과 styled-component는 서로 비슷해 보입니다. // styled-component export const StyledButton: React.FC = ({ content, handleClick, margin }) => { return ( handleClick()} margin={margin}> {.. CSS #5 - CSS-in-JS (1) Pros and Cons 시작하며 npm trends (https://www.npmtrends.com/emotion-vs-sass-loader-vs-styled-components)라는 사이트에서 SASS와 CSS-in-JS들의 다운로드 수를 비교해서 제공하는 곳이 있습니다. emotion, styled-components, JSS, aphrodite, radium, glamorous, styletron, ... 등 많은 선택지가 존재하는 CSS-in-JS는 다운로드 수가 계속 증가하는 추세에 있습니다. 각각의 사용 방식에 대해서 모두를 설명드릴 수는 없겠지만 공통적으로 담겨 있는 의도와 원리에 대해서 말씀드리고자 합니다. 많이 알려진 styled-components에 대해서 먼저 다뤄 보고, 차후에 Emotion을 정리해 보도.. CSS #4 - SASS (3) with CSS Module classnames classnames(https://www.npmjs.com/package/classnames)는 각 태그에 대해서, 혹은 컴포넌트에 대해서 클래스 명칭을 적용하기 위해서 사용하는 className을 더욱더 가독성 있고, 쉽게 작성할 수 있게 도와줍니다. classnames function은 string일수도 있고, object일수도 있는 여러 개의 아규먼트를 받아서 해당 부분을 여러 개의 클래스 명칭을 적용하도록 돕습니다. 또한 bind version을 사용하는 것을 통해서 CSS-Module의 스타일 적용을 돕습니다. 클래스 명칭을 dynamic allocation 하고 싶다면 다음과 같이 작성될 수 있습니다. const [isRed, setIsRed] = useState(false.. CSS #3 - SASS (2) with CSS Module CSS potential danger 저번 시간에 SASS의 장점에 대해서 소개했습니다. SASS를 통해서 CSS를 더 쉽게, 그리고 가독성 있게 작성할 수 있습니다. 또한 번들러 / 전처리기의 결과물이 결국은 CSS파일과 같기 때문에 컴파일(build / deploy)을 하는 시간을 제외하면 같은 성능을 제공할 수 있습니다. 그러나 다음과 같은 CSS파일을 작성할 때 개발자가 신경을 써야 하는 부분은 해소되지 못했습니다. CSS override ansrlm.tistory.com/19 글의 1 - 6)을 보시면, CSS파일에서 마지막 선언이 가장 높은 우선순위를 가집니다. 자바스크립트 파일들과 CSS 파일들은 성능을 위해서 하나의 자바스크립트 파일과 하나의 CSS파일, 혹은 특정 비즈니스 요건에 따라서 .. CSS #2 - SASS (1) 시작하며 CSS를 조금 더 편리하게 사용할 수 있는 방법에 대해서 소개하고자 합니다. 어떻게 글을 작성하면 방문해 주시는 분들이 이해를 더 잘하실 수 있을까 고민해 보았습니다. CRA(create-react-app)을 통해서 만든 프로젝트의 기본 파일을 각각의 방식으로 바꿔서 함께 설명을 드리면 쉽게 프로젝트를 따라 만드시고 고치는 시간을 가질 수 있을 것이라 생각합니다. App.jsx를 SASS / CSS Module / CSS in JS로 작성하지만 같은 화면을 보여주도록 해보겠습니다. 각 프로젝트는 CSS를 달리 표현하는 것은 import를 하는 방식부터 차이를 보입니다. 1. import './App.scss'; - (SASS) 2. import styles from './App.module.sc.. CSS #1 - CSS priority CSS CSS(Cascade Style Sheet)는 종속형 시트라 고도 불리며, 마크업 언어가 실제 표시되는 방법을 기술하는 언어입니다. 마크업 언어라는 것은 태그를 사용하여 문서의 내용과 구조를 나타내는 언어를 말하는데, HTML도 그 이름(HyperText Mark-up Language)에서 알 수 있듯이 마크업 언어의 일종입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때 자유도가 높습니다. (www.w3schools.com/css) CSS 우선순위 CSS정보는 다양한 원천으로부터 제공받을 수 있고 이러한 원천으로는 제작자, 사용자, 웹 브라우저가 될 수 있습니다. 다음과 같은 우선순위를 가집니다. 1. Author Style (제작자) 개발자가 source code를 작성하는 것에 대한 .. 이전 1 다음
