본문 바로가기

CSS

(3)
Sass(SCSS) - 사용법 정리 Sass(SCSS)는 CSS 전처리기로써, sass 또는 scss 파일을 컴파일(전처리)해서 일반적인 css로 변환해 주는 node 모듈입니다. Sass(SCSS)를 사용하면, nesting, inherit 등의 기능을 활용해 유지보수성을 높이는 데 도움이 될 수 있습니다. Sass(SCSS)에 대한 간략한 설명과 설치 방법은 아래 글을 참조해 주세요. https://sty110357.tistory.com/61 Sass(SCSS)란? - 설치해보기 CSS는 배우기 쉽고 재밌을 수 있습니다. 하지만, 스타일 시트의 규모가 점점 커지고 있으며, 그로 인해 복잡해지고, 유지보수를 더 어렵게 만들고 있습니다. 여기에 CSS 전처리기(preprocessor)가 도움 sty110357.tistory.com 이제, ..
Sass(SCSS)란? CSS는 배우기 쉽고 재밌을 수 있습니다. 하지만, 스타일 시트의 규모가 점점 커지고 있으며, 그로 인해 복잡해지고, 유지보수를 더 어렵게 만들고 있습니다. 여기에 CSS 전처리기(preprocessor)가 도움을 줄 수 있습니다. 1. Sass(SCSS)? Sass(SCSS)는 아직 CSS에 없는 기능들을 가지고 있는데, 예를 들어 nesting, mixins, inheritance, 강력하고 유지보수가 가능한 CSS를 작성하는 데 도움이 되는 기능들이 있습니다. Sass를 사용하면 Sass 파일을 전처리하고, 웹 사이트에서 사용할 수 있는 일반적인 CSS 파일로 저장됩니다. 가장 직접적인 방법은 터미널을 사용하는 것입니다. Sass가 설치되어 있으면, sass 명령어를 통해 Sass 파일을 CSS로 ..
CSS - 선택자 우선순위 CSS 선택자는 ID, Class, 태그 등 여러 종류가 있습니다. 실제 개발할 때, 상위 CSS 요소가 적용되어 있는 상태에서 새로운 CSS 요소를 적용하려 하면 적용이 적절히 안 되는 경우가 있는데, 이는 CSS의 적용 우선순위 때문입니다. CSS에는 어떤 선택자가 있는지, 그리고 우선순위에 대한 점수가 어떻게 측정되는지 알아보려 합니다. 목차 1. !important 2. 인라인 스타일 3. ID 선택자 4. 클래스 선택자 5. 속성 선택자 6. 가상 선택자 7. 태그 선택자 8. 전체 선택자 9. 우선순위 비교 1. !important !important는 선택자가 아니지만, CSS 속성에 이를 지정하면 가장 우선적으로 스타일을 적용합니다. 따라서, 어떤 선택자가 있든 !important 속성이 ..