![]()
문제 정의 CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다. 따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다. CSS 컨벤션 CSS는 축약형으로 작성합니다. // Good padding: 0 20px; // Bad padding-left: 20px; padding-right: 20px; CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면..
![]()
문법 문자보간 선택자나 속성은 일반 변수로 처리가 불가능합니다. 이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다. // SCSS $font-family: "Roboto"; @import url("/fonts/#{$font-family}"); .header { font-family: #{$font-family}; } === Compile === // CSS @import url("/fonts/Roboto"); .header { font-family: Roboto; } 위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다...
![]()
🤔 SCSS의 핵심...이라고 생각하는 것 3 중첩은 개인적인 기준입니다. 저는 SCSS의 핵심은 중첩이라고 생각합니다. 보통 3 중첩 기준으로, MAX 4중첩으로 작성합니다. 3중첩을3 중첩을 기준으로 하는 이유는 3 중첩을 지키지 않고 작성하다 보면 코드 길이가 엄청 늘어나고, 컴파일된 CSS에도 엄청나게 많이 중첩된 클래스를 볼 수 있습니다. 4 중첩 이상 필요할 경우 아래와 같이 작성합니다. #wrap { .A .B { color: red; } } 📄 SCSS 문법 이번 글에서는 SCSS를 작성할 때, 기본적으로 많이 사용되는 문법을 위주로 써보겠습니다. UTF-8 설정 코드 내에서 한글을 사용하려면 설정해야 합니다. @charset "UTF-8"; 상위 선택자 &을 사용하면 부모 선택자를 참조(..
![]()
🤔 Sass(SCSS)란? "Sass"는 문서의 구조를 깔끔하고 효율적으로 코드를 작성할 수 있게 해주는 CSS 상위에 있는 메타언어입니다. 🔎 Sass / SCSS 차이 Sass와 SCSS의 핵심은 같지만 가장 큰 차이점은 {}(중괄호)와 ;(세미콜론)를 쓰고 안 쓰고 차이입니다. 이 글에서는 SCSS로 작성될 예정입니다. // Sass #wrap color: red // SCSS #wrap { color: red; } 📝 설치하기 SCSS를 설치하는 방법으로는 2가지가 있습니다. SCSS 컴파일 형식 nested : 뎁스별로 구분해서 컴파일 compact : 요소에 스타일이 속성을 한 줄씩 정렬해서 컴파일 expanded : 요소에 모든 스타일을 한 줄에 컴파일 compressed : 모든 요소를 공..
