css vs scss(sass) vs styled-componets

 

 

css 그린거 ㅋㅋㅋ

잡담

css와 scss와 styled-componets의 차이점을 정리해 봤습니다!!

순서

1.css?

2.scss?

3.styled-components?

1. css가 정확하게 뭐더라??

css의 뜻은

Cascading Style Sheet로

 

우리말로는 "계단식 스타일 시트?"라고 할 수 있겠다.

왜 만들어짐??

html이 만들어지고 난 뒤에 html에 디자인 요소를 포함시키기 위해 온갖 짓을 다한 결과 html 본연의 목적과 전혀 동떨어진 결과가 나왔고 그와 동시에 html 파일을 이해하는 데 어려움이 생겼다.

 

※도대체 어떻게 html 만으로 style을 구현했지??라는 궁금증을 가진 분들에게 한 가지 예시를 보여 드리겠다.

See the Pen dyYRaVq by famous(유명환) (@famous0811) on CodePen.

 

그래서  "html에서 디자인 요소를 분리 시켜서 구조화된 html을 구성하자"라는 생각을 바탕으로 css가 만들어지게 되었다.

 

그 결과 CSS는 마크업 언어(Markup Language)의 표현 방법을 기술하는 언어로, 미리 정해진 요소를 조합하여 마크업 언어가 전달하고자 하는 내용을 꾸미는 역활을 한다.

장단점??

장점:

 

기능의 확장성:

• 추가적인 플러그인 필요 없이 html 기능의 확장 가능
• 설정하기 쉽고 단순한 규칙으로 이루어진 텍스트
• 웹 표준 정의

간편성

• 이해하기 쉽다
• 코드 절양
• 문서 형식을 손쉽고 다양하게 구성이 가능

일관성

• 사용 환경에 영향을 안 받음
• 웹의 한 가지 요소만 변경해도 전체 페이지의 내용을 한 번에 변경할 수 있다.

단점

브라우저간의 호환성 문제

 

2.scss(sass)는 뭐지??

scss의 뜻

Syntactically Awesome Style Sheets

번역기를 돌리니"문법적으로 멋진 스타일 시트"라고 한다.

왜 만들어짐??

css는 초보자가 시작하는 데 그렇게 어렵지 않다.

그러나!! css로 작업을 하다 보면 여러 가지 불편한 점이 있다.

 

엄청난 양의 선택자를 사용하고, 연산 기능의 부제 등등으로 불편하다.

 

그래서 이러한 문제들을 해결하고자 Less, Sass(SCSS), Stylus가 등장했지만

 

scss가 가장 많이 사용된다.

 

왜 scss라고 했다가 sass라고 했다가 둘이 똑같은 건가요??

scss와 sass는 일다는 css의 상위 개념이라고 생각하면 된다.

 

css의 모든 문법이 호환이 되며 scss만의 문법도 있다.

 

둘의 차이는 중괄호와 ;(세미콜론)이다

//sass
.div
  background-color:red
  margin:10px
//scss
.div{
  background-color:red;
  margin:10px;
}

간단히 정리하면 

 

SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합(Superset)입니다.

장단점??

코드 중복 방지

변수사용 가능

등등

 

사용하기위해서 

sass-loder
node-sass

을 설치를 해주어야 사용이 가능합니다.

3.styled-components? 넌 또 뭐야!!

styled-components란?

CSS-in-JS 관련 라이브러리 중 하나입니다.

react에서 컴포넌트를 랜더링 하는 여러 가지 방법 중 하나입니다.

왜 만들어짐??(모르겠다 안나옴..)

컴포넌트에 직접 스타일을 지정하기가 힘듭니다.

 

하는 방법은 인라인스타일링을 제외하고는 없었습니다.

 

그래서 아마 어떻게 하면 컴포넌트에 다가 직관적으로 스타일을 적용할 수 있을까를 고민해서 만들지 않았을까요???

장단점??

장점

• className을 사용하지 않아 외부에 css파일로 빼서 작업했을때 className 중복돼서 생기는 문제를 해결함
• scss 설치 없이 scss 문법을 사용 가능
• 자바스크립트식 CSS 문법이 아닌 기존 CSS 문법(단축, 가운데 - 사용) 모두 사용 가능
• 자바스크립트로 처리하기 때문에 상태처리 하는 css 역할로 매우 우수
• react-native에서도 적용되기에 웹과 앱을 둘 다 만들어야 한다면 css를 거의 그대로 사용 가능

단점

• 작성할때 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점이 가독성을 떨어뜨린다고 생각
• css 수정할 때마다 해당하는 컴포넌트 파일 위치 찾아야 하는 번거로움 존재

출처:

https://webdir.tistory.com/338

CSS 기초(정의, 링크, 문법, 우선순위)

https://idchowto.com/?p=18855

idchowto.com - 스마일서브(Cloudv.kr)

https://namu.wiki/w/CSS

CSS - 나무위키

https://codedragon.tistory.com/4237

CSS의 장점/단점

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

https://ideveloper2.tistory.com/35

CSS - Sass란 ?

https://velog.io/@velopert/react-component-styling#styled-components

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

https://likejirak.tistory.com/71

[Styled Components]syntex