프론트엔드라면 어느정도 css도 사용할 줄 알아야 한다고 생각한다.
일을 하면 어느정도 css를 만들거나 수정을 해야 할 일이 생기기 때문이다.^^....
css(Cascading Style Sheets) 는 무엇인가 ?
- html이 문서 파일이며, css는 style sheet 파일이다.
- html 문서 파일을 이쁘게 꾸며주는 파일이라고 생각하면 쉽다.
- 사용자들에게 시각적으로 디자인 및 색깔의 효과를 주는 부분을 css라고 한다.
css 기술방식
- html 파일 외에 style 파일을 만들어서 link 및 import 해서 불러와서 사용하는 외부 방식
- html 파일에 style 태그에 style을 입히는 내부 방식
css 사용 방법
- html 파일에 h1이라는 파일에 style을 입힐 예정이다.
- h1태그에 color는 파란색, 글자 크기는 12px 사이즈로 지정을 해줄 것이다.
- Selector(요소)가 있으며, 그 안에 부여하고자 하는 속성과 속성 값이 들어있어야 하며, 하나의 속성 부여에는 ;으로 나타낸다.
sass를 쓰는 이유
- 코드 중복(Nesting)을 줄일 수 있다.
- 변수를 사용 할 수 있기 때문에 자주 쓰는 색상이나 포지션을 설정하면 된다.
- 조건문과 반복문
- Import (모듈)
- Mixin
- Extend/Inheritance 상속 및 확장도 할 수 있다.
sass 라이브 라이브러리 명령어
npm add node_sass sass-loader
npm add include-media open-color
Scss & Sass
-
css를 좀더 고급스럽게 사용하는 문법
=> 변수를 사용해서 그 값을 저장해서
사용하는 방법.
Sass : { } 괄호가 없고 ; 을 안 쓴다.
Scss : { } 괄호를 쓰고 ; 을 사용하여 코드를 마무리한다. -
css값 변수 선언
ex ) $sample : red
한줄한줄.