TIL - Day 31~32 CSS (SCSS, autoprefixer)

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - CSS (SCSS, autoprefixer)

---

🗓 CSS 강의를 마치며

생각보다 똑똑한 CSS (:root, @support, @media)

 

이전 강의에 이어 CSS 변수와 @support, @media 기능 쿼리에 대해 학습하였다. 변수를 선언하는 것은 이전에 사용해본 적이 있다.

• 변수 선언
  • :root 선택자 안에 --color-muted와 같은 형태로 변수를 선언하여 사용할 때에는 var(--color-muted)로 사용 가능하다.
  • 문서의 루트 트리에 변수를 지정하는 것으로 html의 루트 요소는 html로 root 선택자와 같지만 명시도가 더 높기에 root를 사용하여 변수를 지정한다.
• @support 기능 쿼리
  • 사용자의 브라우저가 어떠한 조건을 지원하는지에 따라 유동적인 css를 선언하기 위해 사용된다.
  • @supports (display: grid) {}와 같은 형태로 괄호의 조건을 지원한다면 중괄호 안의 css를 사용하게 된다.
  • and, not 등 다양한 연산자를 사용 가능하고 괄호로 묶어줘야지만 원하는 대로 동작되므로 주의해야 한다.
• @media 미디어 쿼리
  • @media 타입 and (조건 ex: max-width: 1200px) {}와 같은 형태
  • 미디어 타입 종류
    • screen
    • print
    • tv
    • all (기본값)
  • 반응형 디자인의 경우 max-width 이하, min-width 이상로 구분
  • not (조건) 사용 가능 (chrome)
  • html 태그에서 media 쿼리 작성이 가능하다.

써보고 싶었던 SCSS, postcss-autoprefixer

 

언제 사용해야 할지 알지 못해서 그동안 미뤄왔던 scss에 대해 학습하게 되었고 과제를 진행하며 autoprefixer를 적용해보았다.

• SCSS
  • CSS와 많이 다른 점은 없지만 전처리기로써 특별한 문법으로 작성에 편의성을 올려준다.
  • 들여 쓰기를 잘 작성해줘야 하고 주석은 컴파일하면 사라진다.
  • mixin과 nesting, 다른 방법의 변수 사용법, & 문법, 속성 중첩, 플래그(! global,! default), 보간, 산술, 논리, 연산 논리 자등 다양한 기능을 제공한다.
  • 그대로 브라우저가 해독하지 못하기 때문에 컴파일을 거쳐 css형태로 변환한다.
• autoprefixer
  • 후처리기로 실험적인 기능을 vender prefix를 추가하여 호환성을 높인다.
  • 실험적인 기능은 can i use 같은 곳에서 검색을 통해 확인할 수 있다.

새롭게 배운 것

• :root, @support, @media 사용법
• scss 문법, 사용법
• 미디어 쿼리의 prefers-color-scheme로 사용자 설정에 따른 다크 모드 구현이 가능하다.
• scss로 함수도 작성하여 사용이 가능하다.
• node-sass는 deprecated 되어 dart-sass를 사용하는 것이 권장된다.
• webpack으로 번들링 하여 배포하는 방법

오늘 깨달은 점

• BEM 방식의 네이밍과 scss 문법을 같이 사용할 때 편리하다
• @use를 사용하여 css 모듈화가 가능하다.
• webpack 사용 시 각종 loader들을 순서에 맞게 작성해야 한다. 아래부터 순서대로 진행된다.
  1. style-loader (html안에 style 태그로 밀어 넣어준다.)
  2. css-loader (@import, import 같은 모듈로 css를 부르기 위해 사용된다.)
  3. postcss-loader (후처리 작업 진행)
  4. sass-loader (scss 문법의 내용을 css로 컴파일)

참고했던 자료

autoprefixer

autoprefixer

sassmeister

SassMeister | The Sass Playground!