-

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% 에 가까울 수록 ..

aspect-ratio요소의 가로 세로 비율을 지정하는 속성상위 컨테이너나 뷰포트의 크기가 변경되더라도 브라우저는 지정된 종횡비를 유지하며 크기를 조정속성은 : auto, n, width / height 형태로 설정반응형 작업 시 PC에서 고정으로 사용하던 이미지를 Mobile 100%로 가변 비율을 변경 시 이미지의 비율을 유지하기 aspect-ratio: auto aspect-ratio: 1 / 1;aspect-ratio: 1;/* 콘텐츠 비율 우선, 없으면 설정값 사용 다만, 현재 브라우저 지원 낮아 잘 사용되지 않음*/aspect-ratio: auto 3/4;aspect-ratio: inherit;aspect-ratio: initial;aspect-ratio: revert;aspect-rati..

transitioncss 속성을 변경할 때 애니메이션 속도를 조정하는 방법을 제공transition : 속성 지속시간 시간함수 지연시간;transition-property트랜지션을 적용할 css 속성의 이름transition-duration트랜지션이 일어나는 지속시간 설정transition-timing-function트랜지션 시간함수 설정속성값 : ease, linear, ease-out, step-end 등 cubic bezier() 함수를 이용하여 설정 가능transition-delay트랜지션 시작 지연시간 설정

transform주변 요소에 영향을 끼치지 않으면서 원하는 요소의 모습을 변경하는 속성scale요소의 배율을 지정하는 함수두 개의 요소를 지정해서 x, y를 다르게 설정 가능transform : scale(n)transform : scale(x, y)rotate요소의 회전을 지정하는 함수속성 단위 : deg, tum1 tum = 360도, 0.5 tum = 180도transform : rotate(45deg)transform : rotate(1tum)translate요소의 위치를 지정하는 함수속성 단위 : top, left, bottom, right, 숫자 단위 (px, % 등)%는 부모가 아닌 해당 요소의 너비와 높이를 기준으로 함transform : translate(1px, 24px)transfor..

Grid 행(row)과 열(column)을 동시에 다루는 2차원 레이아웃 시스템 콘텐츠를 행과 열에 배치할 수 있으며 float나 flexbox보다 레이아웃 구조를 직관적이고 정밀하게 만들 수 있음특징부모 요소(그리드 컨테이너) 안에서 자식 요소(그리드 아이템)의 위치와 크기를 행·열 기준으로 지정 가능격자(grid) 형태의 셀(cell) 기반 배치수평·수직 정렬 모두 자유로움레이아웃을 HTML 구조 변경 없이도 CSS만으로 재배치 가능Grid vs Flex항목GridFlex레이아웃 방향2차원 (행 + 열 동시 제어)1차원 (행 또는 열 중 하나만 제어)주 사용 목적- 전체 페이지- 대규모 레이아웃 설계- 작은 단위의 UI 정렬- 한 줄 배치배치 기준부모에서 행·열 구조를 먼저 정의 후 배치자식 요소 콘..

CSS 상속 CSS 상속 속성colorletter-spacingvisibilityline-heightfont 속성letter-spacinglist-style 관련 속성text-aligntext-decorationtext-shadow inherit어떤 요소의 속성값이 지정되어 있는 상태에서, 부모의 값을 상속받고자 할 때 사용상속 적용이 해당되는 css 속성에 한함initial요소의 기본 속성 초기값 사용display:initial은 display:inline으로 설정되므로, display:block 명시 필요unset상속된 값이 있을 경우 inherit와 같이 사용, 없는 경우 initial과 같이 사용상속 적용이 해당되는 css 속성에 한함.container { color:red}.container>d..