-

MapSCSS 데이터 타입 중 하나로 키(key)와 값(value) 쌍으로 이루어진 데이터 구조자바스크립트의 객체({key: value})와 비슷한 개념반복문과 결합하면 반복적인 CSS 생성에 매우 편리리스트와 달리 값을 키로 접근할 수 있고 데이터 접근이 명확하고 실무에서 재사용성이 높음기본 문법키와 값은 콜론(:)으로 구분각 쌍은 쉼표(,)로 구분$map-name : 맵 변수 이름key : 문자열처럼 쓰지만, 따옴표 없어도 됨value : 숫자, 색상, 문자열 등 SCSS에서 가능한 값괄호 ()로 묶고, 각 쌍은 쉼표 ,로 구분/* [문법] */$map: ( 키1: 값1, 키2: 값2, 키3: 값3);$colors: ( primary: #3498db, secondary: #2ecc71, d..

리스트(List)SCSS 고유의 데이터 타입 중 하나로 여러 값을 하나로 묶어놓은 컬렉션 데이터 타입CSS 속성값 중 여러 값이 들어가는 경우(margin: 10px 20px 30px;)와 비슷한 개념배열과 비슷하지만 SCSS 문법에서는 쉼표(,) 또는 공백( )로 값을 구분할 수 있음순서가 중요하며, 인덱스를 통해 특정 값을 참조할 수 있음 리스트 타입리스트 타입구분자특징쉼표 리스트,- 값들을 명확히 구분- 함수 인자로 주로 사용- CSS에서 그대로 쓰면 쉼표가 유지됨(예: box-shadow: 1px 1px red, 2px 2px blue;)공백 리스트공백- 공백으로 구분 - 주로 CSS 속성 값처럼 사용 가능- CSS에서 쓰면 공백으로 이어진 값처럼 나옴(예: margin: 1px 2px 3px;)..

SCSS 데이터 타입타입예시특징Number16px, 2rem, 45deg단위 가능, 수학 연산 가능String"Hello", 'Noto Sans'연결 가능, CSS 속성에 사용 가능Color#fff, rgba(0,0,0,0.5)색상 함수 사용 가능, 연산 가능Booleantrue, false조건문에 사용Listred, green, blue, 5px 10pxnth() 접근, 리스트 합치기 가능Map(primary: #fff, secondary: #000)map-get(), 반복문과 사용 가능Nullnull값 없음, 조건문에서 유용1. 숫자(Number)수치 값으로, 단위가 있을 수도 있고 없을 수도 있음.예시 단위: px, em, rem, %, deg 등SCSS에서는 숫자끼리 연산 가능 (+, -, *, ..

SCSS란?SCSS(Sassy CSS)는 CSS Preprocessor(전처리기) 중 하나인 Sass의 문법 형식기본 CSS보다 더 강력한 기능(변수, 중첩, 함수, 믹스인, 모듈화 등)을 제공해서 코드 재사용성과 유지보수성을 높여줌작성된 SCSS는 브라우저가 직접 읽을 수 없고, CSS로 컴파일해야 브라우저에서 사용 가능함 CSS PreprocessorCSS Preprocessor(전처리기)는 CSS를 확장하는 언어CSS 단점: 코드 중복이 많고, 큰 프로젝트에서 유지보수가 힘듦전처리기 역할: 변수, 조건문, 반복문, 함수 같은 프로그래밍 개념을 CSS에 도입해서 효율적으로 작성할 수 있게 해 줌전처리기 종류 : Sass(SCSS), LESS, Stylus SCSS → CSS 변환 (컴파일) 과정SCS..