[CSS]

CSS(Cascading Style Sheets)는 웹 페이지의 스타일(디자인)을 정의하기 위한 언어로, HTML이나 XML같은 마크업 언어로 작성된 문서의 시각적 표현(색상, 레이아웃, 글꼴 등)을 담당한다.

 

*CSS 전처리기

전처리기는 CSS 확장 언어로 작성된 코드를 컴파일하여 일반적인 CSS로 변환한다.  Sass 등이 있다.

장점

1. 코드 재사용성 증가

변수를 통해 색상, 글꼴 크기 등 반복적으로 사용하는 값을 한 곳에 정의하고 재사용할 수 있다.

// 변수 정의
$primary-color: #3498db;

// 재사용
body {
  background-color: $primary-color;
}
h1 {
  color: $primary-color;
}

2. 코드 가독성 및 유지보수성 향상

중첩을 지원하여, HTML의 구조를 반영한 직관적인 스타일 작성이 가능하다.

nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

3. 확장성과 커스터마이징

Sass와 같은 전처리기는 함수와 조건문, 반복문 등 프로그래밍 개념을 활용할 수 있어 더욱 동적인 스타일링이 가능하다.

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

 

 

📌참고

https://velog.io/@aideneverywhere/CSS-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC

CSS 프레임워크

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Organizing

CSS 구성 - Web 개발 학습하기 | MDN