디자인 레퍼런스 전체 색인 · 8/27

2,153개 정의·활용·주의사항·출처를 개별 문서로 제공합니다. 이 색인은 JavaScript 없이 탐색할 수 있습니다.

직접 조작 가능한 레퍼런스 291개 보기

• 스타일라이즈드 리얼리즘

  Stylized Realism

  사실적 구조를 유지하면서 비율·색·형태를 의도적으로 과장하는 표현.

• 아이소메트릭 일러스트

  Isometric Illustration

  평행 투영 계열의 일정한 축 관계로 공간을 표현하는 일러스트.

• 페이퍼컷 스타일

  Paper-cut Style

  겹친 종이·오린 단면·층별 그림자를 시각 언어로 사용하는 표현.

• 콜라주

  Collage

  서로 다른 사진·텍스처·문자 조각을 조합해 새로운 이미지를 만드는 기법.

• 디더링 스타일

  Dithered Style

  제한된 색의 점 패턴을 이용해 중간 명암이나 질감을 표현하는 기법.

• CRT 미학

  CRT Aesthetic

  주사선·곡면·색 번짐 등 브라운관 표시 특성을 모사하는 표현.

• 랜딩 페이지

  Landing Page

  특정 캠페인이나 유입 목적에 맞춰 하나의 주요 전환 행동을 중심으로 만든 페이지.

• 첫 화면 영역

  Above the Fold

  초기 화면에서 스크롤하지 않고 보이는 콘텐츠 영역. 기기마다 범위가 달라진다.

• 기능 소개 섹션

  Feature Section

  제품 기능과 사용 가치를 묶어 설명하는 콘텐츠 블록.

• 사회적 증거

  Social Proof

  후기·고객 사례·사용 실적 등으로 판단에 참고할 근거를 제공하는 콘텐츠.

• 추천 후기

  Testimonial

  고객이나 사용자의 경험을 인용하여 제시하는 콘텐츠.

• 가격 비교표

  Pricing Table

  요금제별 가격·기능·제약을 비교해 선택을 돕는 표.

• 비교표

  Comparison Table

  제품이나 선택지 간 차이를 동일 기준으로 정렬해 보여주는 구조.

• FAQ 영역

  FAQ Section

  자주 발생하는 질문과 답변을 모아 제공하는 구조.

• 기능 그리드

  Feature Grid

  여러 기능의 이름·설명·아이콘을 반복되는 셀로 배열한 구성.

• 고정 내비게이션

  Sticky Navigation

  스크롤 중에도 특정 위치에 남도록 만든 탐색 영역.

• 스크롤텔링

  Scrollytelling

  스크롤 위치에 맞춰 이미지·텍스트·시각화를 전개하는 이야기 전달 방식.

• 스크롤 구동 애니메이션

  Scroll-driven Animation

  스크롤 진행량 자체가 애니메이션 진행률을 결정하는 방식.

• 메가 푸터

  Mega Footer

  페이지 하단에 사이트의 주요 분류·정책·보조 탐색을 넓게 제공하는 구조.

• 유틸리티 내비게이션

  Utility Navigation

  언어·계정·고객지원 등 핵심 콘텐츠 외 공통 기능을 모은 탐색 영역.

• 앱 셸

  Application Shell

  내비게이션·헤더·작업 공간 등 여러 화면에 공통인 애플리케이션 골격.

• 마스터·디테일 레이아웃

  Master–Detail Layout

  항목 목록과 선택 항목의 상세 정보를 함께 제공하는 구조.

• 대시보드 레이아웃

  Dashboard Layout

  지표·추세·세부 표를 우선순위에 따라 배치한 분석 화면 구조입니다.

• 포털 레이아웃

  Portal Layout

  여러 서비스와 콘텐츠로 진입하는 시작점을 집중시킨 구조.

• 풀블리드 레이아웃

  Full-bleed Layout

  이미지나 배경을 컨테이너 여백 없이 화면 가장자리까지 확장한 구성.

• 분할 화면 레이아웃

  Split-screen Layout

  화면을 둘 이상의 대비되는 영역으로 나누는 구성.

• 콘텐츠 우선 설계

  Content-first Design

  실제 정보의 양과 구조를 먼저 정한 뒤 레이아웃을 만드는 접근.

• 우아한 성능 저하

  Graceful Degradation

  고급 기능을 지원하지 않는 환경에서도 핵심 작업은 가능하게 하는 전략.

• 종속형 스타일 시트

  CSS

  HTML·SVG 등의 표시·배치·시각 스타일을 기술하는 스타일시트 언어.

• 선택자

  Selector

  스타일 규칙을 적용할 요소를 선택하는 표현식.

• 캐스케이드

  Cascade

  출처·중요도·계층·우선순위·순서 등에 따라 적용할 CSS 선언을 결정하는 규칙.

• 명시도

  Specificity

  경쟁하는 선택자 사이에서 선언 우선순위를 판단하는 가중치 체계.

• 상속

  Inheritance

  일부 속성 값이 부모 요소에서 자식 요소로 전달되는 동작.

• 박스 모델

  Box Model

  콘텐츠·패딩·테두리·마진으로 요소의 차지하는 공간을 계산하는 모델.

• 박스 크기 산정

  box-sizing

  width·height가 콘텐츠만 또는 테두리까지 포함하는지 정하는 속성.

• 일반 흐름

  Normal Flow

  별도의 배치 변경 없이 문서 순서에 따라 요소가 배치되는 기본 규칙.

• 블록 서식 문맥

  Block Formatting Context

  블록 배치와 부동 요소 상호작용 등을 독립적으로 처리하는 레이아웃 영역.

• 플렉스박스

  Flexbox

  주축과 교차축을 기준으로 항목을 배열하는 1차원 중심 레이아웃 모델.

• CSS 그리드

  CSS Grid

  행과 열을 함께 정의하여 항목을 배치하는 2차원 레이아웃 모델.

• 서브그리드

  Subgrid

  자식 그리드가 부모 그리드의 트랙 정의를 공유하는 기능.

• 그리드 트랙

  Grid Track

  인접한 두 그리드 선 사이의 행 또는 열 공간.

• 그리드 영역

  Grid Area

  하나 이상의 그리드 셀로 이루어진 배치 영역.

• 요소 간 간격

  gap

  그리드·플렉스 등 지원 레이아웃의 항목 사이 간격을 지정하는 속성.

• 내재적 크기

  Intrinsic Sizing

  명시적 고정값 대신 콘텐츠 자체의 특성에 따라 크기를 결정하는 방식.

• 최소·최대 콘텐츠 크기

  min-content / max-content

  콘텐츠 줄바꿈 제약에 따라 가능한 최소 또는 최대 내재 크기를 나타내는 키워드.

• 범위 제한 함수

  clamp()

  최솟값·선호값·최댓값으로 유연하게 변하는 CSS 값을 제한하는 함수.

• 최소·최대 선택 함수

  min() / max()

  여러 CSS 계산 값 중 가장 작거나 큰 값을 선택하는 함수.

• CSS 계산 함수

  calc()

  호환되는 수치와 단위에 산술식을 적용하는 함수.

• 위치 지정

  Positioning

  static·relative·absolute·fixed·sticky 등으로 요소의 배치 기준을 정하는 방식.

• 포함 블록

  Containing Block

  백분율 크기와 위치 계산의 기준이 되는 사각 영역.

• 쌓임 맥락

  Stacking Context

  z축 방향의 표시 순서를 독립적으로 계산하는 요소 집합.

• 쌓임 순서 값

  z-index

  적용 가능한 배치 맥락 안에서 요소의 앞뒤 순서를 지정하는 속성.

• 넘침 처리

  Overflow

  내용이 요소의 영역을 넘을 때 표시·숨김·스크롤 방식 등을 정하는 기능.

• 종횡비

  Aspect Ratio

  가로와 세로 크기의 비율을 표현하거나 유지하는 제약.

• 대체 콘텐츠 맞춤

  Object Fit

  이미지·비디오가 컨테이너에 맞도록 채움·잘림·비율 유지 방식을 정하는 속성.

• 미디어 쿼리

  Media Query

  뷰포트·입력 방식·사용자 설정 등에 따라 스타일을 조건부 적용하는 규칙.

• 컨테이너 쿼리

  Container Query

  상위 컨테이너의 크기나 지원되는 상태에 따라 스타일을 바꾸는 규칙.

• 논리 속성

  Logical Properties

  left·right 대신 inline·block 축을 이용해 쓰기 방향에 대응하는 속성.

• 뷰포트 단위

  Viewport Units

  vw·vh·svh·lvh·dvh 등 화면 기준 크기를 표현하는 단위 계열.

• 상대 단위

  Relative Units

  em·rem·ch·% 등 다른 값이나 기준 크기에 상대적인 CSS 단위.

• CSS 사용자 정의 속성

  Custom Properties

  --name 형식으로 선언하고 var()로 참조하는 캐스케이드 가능한 값.

• 캐스케이드 레이어

  CSS Cascade Layers

  @layer로 스타일 우선순위의 큰 층위를 명시하는 기능.

• CSS 중첩

  CSS Nesting

  선택자 규칙 안에 관련 선택자를 중첩해 기술하는 기능.

• 의사 클래스

  Pseudo-class

  hover·focus·checked 등 요소 상태나 구조적 조건을 선택하는 문법.

• 의사 요소

  Pseudo-element

  요소의 특정 부분이나 생성된 표현 영역을 스타일링하는 문법.

• 관계형 선택자

  :has()

  상대 선택자와 일치하는 요소를 포함하는지 등 관계 조건으로 대상을 선택하는 의사 클래스.

• 포커스 표시 필요 상태

  Focus-visible

  브라우저 판단 등에 따라 포커스 표시를 보여주는 상태를 다루는 개념.

• CSS 트랜지션

  CSS Transitions

  스타일 값 변화 사이를 지정 시간·이징으로 연결하는 기능.

• 키프레임 규칙

  CSS Keyframes

  애니메이션 진행 구간별 속성값을 지정하는 @keyframes 규칙.

• 변환

  Transform

  이동·회전·크기·기울임 등을 적용하는 시각적 좌표 변환.

• 변환 기준점

  Transform Origin

  회전·스케일 등의 변환이 기준으로 삼는 위치.

• 필터 효과

  Filter

  블러·대비·채도 등의 처리로 요소의 렌더링 결과를 바꾸는 기능.

• 배경 필터

  Backdrop Filter

  요소 뒤에 비치는 영역에 블러 등의 시각 처리를 적용하는 기능.

• 혼합 모드

  Blend Mode

  앞뒤 색을 결합하는 계산 방식을 지정하는 기능.

• 클리핑 경로

  Clip Path

  요소에서 보이는 영역을 경로나 기본 도형으로 제한하는 기능.

• CSS 마스크

  CSS Mask

  다른 이미지의 알파·명도 등을 이용해 요소의 보이는 정도를 조절하는 기능.

• 박스 그림자

  Box Shadow

  요소의 박스 주위에 그림자를 그리는 속성.

• 텍스트 그림자

  Text Shadow

  글리프 모양에 그림자를 더하는 속성.

• 스크롤 스냅

  Scroll Snap

  스크롤이 특정 항목이나 위치에 정렬되도록 유도하는 기능.

• 스크롤 여유 영역

  Scroll Margin

  스크롤 이동 목표 주변에 추가 정렬 여유를 지정하는 속성.