프론트엔드/CSS 심화6 Tailwind CSS 최종 수정 : 2024-04-18 Tailwind CSS Utilirt-first 라는 방법론으로 디자인을 적용하는 라이브러리 중에서 가장 널리 쓰이는 CSS 라이브러리이다. 장점 CSS 클래스를 나누는 기준을 컴포넌트나 디자인이 아닌 작은 단위의 CSS 속성으로 두기 때문에, CSS 클래스 이름 충돌에 대한 걱정이 없다. 보편적으로 사용하는 CSS 클래스를 여러 컴포넌트에서 공유하기 때문에, 규모가 큰 프로젝트더라도 CSS 코드의 양이 굉장히 적다. CSS-in-JS와 마찬가지로 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어 관리하기 좋다. 단점 및 한계 복잡한 디자인을 적용할 때에는 CSS 클래스가 한없이 길어져 가독성이 떨어지고 관리하기 어렵다. -> 이를 해결하기 위해 @apply .. 2024. 4. 18. CSS-in-JS 최종 수정 : 2024-04-18CSS-in-JS자바스크립트 코드로 CSS를 작성하는 방식이다. Styled Components가 이에 해당한다.장점컴포넌트 단위로 나누어서 스타일링을 할 수 있어서 CSS 클래스 이름이 충돌하지 않는다.클래스네임을 짓지 않아도 된다.자바스크립트와 JSX로 된 컴포넌트 코드와 스타일링 코드가 한 파일에 있어서 관리하기 좋다. 단점 및 한계자바스크립트를 통해 CSS를 만들기 때문에 CSS나 Sass에 비해서 추가적인 연산이 발생하며, 렌더링 속도도 훨씬 느려지는 부작용이 있다.import styled from 'styled-components';const Button = styled.button` background-color: #ededed;.. 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. CSS 클래스 이름 설정 : BEM(Block Element Modifier) 최종 수정 : 2024-04-18 BEM(Block Element Modifier) BEM은 CSS 클래스 이름을 짓는 규칙이다. 블록(Block), 요소(Element), 변경자(Modifier) 형태로 작성한다. 블록은 같은 영역을 의미하고, 요소는 , 같은 요소를 의미한다. 마지막으로 변경자는 요소의 변형을 표시한다. 장점 CSS 클래스의 이름을 짓는 고민을 덜 수 있다. 단점 및 한계 여전히 규모가 큰 코드를 관리하기는 어렵다 Email Password Sign In .signin-form { /* 로그인 폼 */ } .signin-form__input { /* 로그인 폼의 인풋 */ } .signin-form__input.signin-form__input--password { /* 로그인 폼의 .. 2024. 4. 18. 이전 1 2 다음
