-

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에서는 숫자끼리 연산 가능 (+, -, *, ..

변수 (Variables)변수명 앞에 $를 붙임변수의 장점: 일괄 변경 용이, 코드 일관성 유지.단, 변수는 선언 후 사용 가능. 선언 전 사용하면 오류.$primary-color: #3498db; // 변수 선언$font-size-base: 16px;body { color: $primary-color; font-size: $font-size-base;} 중첩 (Nesting)CSS 선택자를 중첩해서 가독성을 높이고 코드량을 줄일 수 있음. 또는 # 선택자를 중첩해서 부모-자식 관계를 표현.중첩은 가급적 3~4단계 이하로 제한하는 것이 유지보수에 좋음.nav { background: #fff; ul { list-style: none; }} & 연산자 (Parent Selector Refer..

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

gap정의 : Grid나 Flexbox 컨테이너 안에서 자식 요소들 사이의 간격을 지정하는 CSS 속성행(Row)과 열(Column) 사이 간격을 동시에 또는 개별적으로 조절할 수 있음gap의 외곽 여백은 padding이 담당flex의 gap과 grid의 gap 모두 IE에서 미지원실무에서 반응형 작업 시 모바일은 세로 간격만 넓히고, 가로 간격은 줄이는 패턴이 많음.일부 CSS 프레임워크(예: Bootstrap 4 이하)나 컴포넌트 라이브러리에서는 margin 기반 spacing 유틸리티를 많이 씀.gap을 쓰면 해당 spacing과 중복되거나 불필요한 여백이 생길 수 있으니, 스타일 가이드 정리 필요.gap: 20px; /* 행과 열 모두 20px */gap: 10px 30px; ..

backgroundbackground-image요소의 배경으로 사용할 이미지 URL을 지정기본값: none (배경 이미지 없음)background-repeat배경 이미지를 반복할지 여부와 방향을 설정기본값: repeat (가로, 세로 모두 반복)속성값설명repeat가로, 세로 모두 반복- 이미지를 원래 크기로 반복, 여분 공간이 남으면 그냥 빈 공간 남음 (간격 없음)repeat-x가로 방향으로만 반복repeat-y세로 방향으로만 반복no-repeat반복하지 않음round- 이미지 크기 조절해서 반복 (간격 없이 꽉 채움) - 이미지 크기 : 원래 크기와 달라질 수 있음 (늘어나거나 줄어듦) - 이미지 사이 간격 : 없음- 이미지 반복 개수 : 반복 횟수 맞춤 - 여분 공간 처리 : 이미지 크기를 반복 ..

object-fit정의 : 이미지, 비디오 등 박스(container) 안에 들어가는 콘텐츠의 크기 조절 및 배치 방식을 정의하는 속성주로 , , 같은 요소에 적용해서, 콘텐츠가 컨테이너 크기에 맞게 어떻게 맞춰질지 결정사용 상황반응형 이미지, 비디오 등에서 비율 유지하며 크기 맞출 때.썸네일이나 카드 내 이미지가 깨지지 않고 보기 좋게 보이도록 할 때.배경처럼 이미지가 영역을 꽉 채우게 하거나, 잘리지 않고 모두 보이도록 조절할 때.참고 사항object-fit은 block 요소에는 적용되지 않고, replaced 요소(img, video 등)에 적용됨배경 이미지처럼 background-size 속성과 비슷한 역할을 함 (하지만 object-fit은 요소 자체의 크기 조절)IE는 지원하지 않으니 필요..

clamp() 최소값과 최대값 사이에서, 주어진 선호값을 제한하여 반환하는 함수주어진 값이 최소값 이상, 최대값 이하가 되도록 자동으로 제한유동성과 안정성을 동시에 주는 함수반응형 디자인에서 폰트, 여백, 요소 크기 조절에 자주 사용됨구성/* [문법] */css속성명:clamp(최소값, 선호값, 최대값);최소값(min) → 절대 넘지 말아야 할 하한선선호값(preferred) → 브라우저가 먼저 시도하는 값 (대개 뷰포트 기반 단위 사용)최대값(max) → 절대 넘지 말아야 할 상한선동작 방식브라우저가 선호값을 계산그 값이 최소값보다 작으면 → 최소값 사용그 값이 최대값보다 크면 → 최대값 사용아니면 → 선호값 그대로 사용html {font-size:62.5%}/*최소값(1.6rem)이 16px (예: ..

backdrop-filter적용된 요소의 영역만큼 원하는 필터를 적용하는 속성으로, 벤더 프리픽스와 사용 (* 사용 시 브라우저 지원 확인)backdrop-filter : 속성(속성단위)속성설명blur- 이미지를 흐리게 함- 예) blur(10px)- 픽셀 값이 높아질 수록 더 흐려brightness- 밝기 조정contrast- 색 대비 조정- 원래 상태 100%을 기준으로 낮으면 흐려지고, 높으면 뚜렷해짐- 대비가 높을 수록 밝은 색은 더 밝아지고, 어두운 색은 더 어둡게 표현됨saturate- 채도 조정, 색을 얼마나 다채롭게 표현하는지 정함- 0% : 완전히 뺀 흑백 상태- 높을수록 더 많은 색을 사용해 진해짐grayscale- 채도 조정- saturate 와 반대 설정- 100% 에 가까울 수록 ..