바이벌러리
메뉴
외관 및 언어
주제별 용어 · 51 안내서

레이아웃 및 CSS

콘텐츠가 각 화면에서 크기, 위치, 간격, 레이어 및 형태를 얻는 방법을 배우십시오.

01 / Atlas

모든 레이아웃 및 CSS 용어

간단한 의미, 예시, 사용 시점, 공식성, 코드명을 포함한 용어 열기

  1. 01 · 핵심

    간격 Spacing

    간격은 의도적으로 배치된 빈 공간입니다. 관련 항목을 그룹화하고, 아이디어를 구분하며, 페이지 리듬을 제공합니다.

  2. 02 · 핵심

    간격 Gap

    간격은 컨테이너가 Flexbox나 Grid 자식 요소 사이에 두는 공간입니다. 동일한 규칙이 모든 쌍에 적용됩니다.

  4. 04 · 더 많은 세부 정보

    고유 크기 조정 Intrinsic Sizing

    고유 크기 조정은 요소의 콘텐츠가 외부에서 정해진 고정 크기만 사용하는 대신 크기를 결정하는 데 도움을 주도록 합니다.

  5. 05 · 핵심

    고정 위치 Sticky Position

    CSS 스티키 위치는 일반 상대 위치처럼 시작합니다. 페이지가 스크롤되면 박스가 설정된 가장자리에 머물 수 있지만, 그 컨테이닝 블록 안에서만 가능합니다.

  6. 06 · 더 많은 세부 정보

    과스크롤 동작 overscroll-behavior

    `overscroll-behavior`는 스크롤 영역이 가장자리에 도달했을 때 발생하는 동작을 제어합니다. 이것은 스크롤이 상위 영역으로 계속되지 않도록 막거나 가장자리 효과를 변경할 수 있습니다.

  7. 07 · 핵심

    넘침 Overflow

    넘침은 콘텐츠가 상자보다 클 때 발생합니다. CSS는 이를 표시하거나 잘라내거나 사용자가 스크롤하도록 허용할 수 있습니다.

  9. 09 · 더 많은 세부 정보

    메이슨리 레이아웃 Masonry Layout

    Masonry 레이아웃은 높이가 다른 항목들을 기둥에 빈틈없이 채워 넣어요. 줄을 맞추지 않고 세워지는 빈 공간을 채우죠.

  11. 11 · 핵심

    박스 모델 Box Model

    CSS 박스 모델은 요소의 크기를 설명합니다. 각 박스는 콘텐츠, 패딩, 테두리 및 여백을 포함합니다.

  12. 12 · 더 많은 세부 정보

    배경 흐림 Backdrop Blur

    배경 흐림은 투명한 표면 뒤에 있는 것을 부드럽게 해줘요. 표면 자체의 내용물은 흐려지지 않아요.

  13. 13 · 더 많은 세부 정보

    벤토 그리드 Bento Grid

    벤토 그리드는 크기가 다른 타일들을 하나의 레이아웃으로 쏙쏙 묶어요. 더 넓은 공간을 차지하는 타일이 가장 중요한 내용이라는 걸 보여주죠.

  14. 14 · 핵심

    불투명도 Opacity

    불투명도는 요소와 그 자식이 얼마나 단단하게 보이는지를 나타냅니다. 투명에서 불투명까지 범위가 가능합니다.

  15. 15 · 핵심

    뷰포트 단위 Viewport Units

    뷰포트 단위는 브라우저의 표시 영역을 기준으로 하는 CSS 길이입니다. 작은 버전, 큰 버전, 동적 버전은 나타나거나 사라지는 브라우저 바를 처리합니다.

  17. 17 · 더 많은 세부 정보

    블록 포매팅 컨텍스트 Block Formatting Context

    블록 포맷팅 컨텍스트(Block Formatting Context, BFC)는 블록 레이아웃을 위한 별도의 영역입니다. 이것은 내부의 플로트를 유지하고 일부 마진과 플로트가 외부 콘텐츠에 영향을 미치는 것을 막습니다.

  18. 18 · 더 많은 세부 정보

    서브그리드 Subgrid

    서브그리드는 부모의 행 또는 열 크기를 공유하는 다른 그리드 안의 그리드입니다. 한 방향 또는 양쪽 방향을 공유할 수 있습니다.

  19. 19 · 더 많은 세부 정보

    스크롤 스냅 Scroll Snap

    CSS 스크롤 스냅은 사람들이 스크롤한 후 선택된 정렬 지점에서 스크롤 영역이 멈추도록 합니다.

  20. 20 · 더 많은 세부 정보

    스태킹 컨텍스트 Stacking Context

    스태킹 컨텍스트는 CSS 레이어의 로컬 그룹입니다. 항목들은 먼저 그룹 내부에서 순서가 정해지고, 그 다음 전체 그룹이 다른 그룹 중에서 배치됩니다.

  22. 22 · 핵심

    앱 셸 App Shell

    앱 셸은 페이지 내용이 바뀌는 동안 유지되는 작은 프레임입니다. 일반적으로 탐색, 신원, 상태를 보관합니다.

  23. 23 · 핵심

    여백 Margin

    여백은 요소 경계 밖의 공간입니다. 이 공간은 요소가 주변 레이아웃 항목과 떨어지도록 합니다.

  24. 24 · 핵심

    여백 Padding

    여백은 요소의 테두리 안쪽, 내용과 테두리 사이의 공간입니다.

  25. 25 · 핵심

    위치 수정 Fixed Position

    CSS 고정 위치는 상자를 고정된 컨테이너, 보통은 브라우저 창을 기준으로 배치합니다. 상자는 문서가 스크롤될 때 일반적으로 제자리에 유지됩니다.

  26. 26 · 핵심

    의사 요소 Pseudo-element

    의사 요소(pseudo-element)는 CSS가 소스 HTML에 일반 요소가 없는 부분이나 상자를 스타일링할 수 있게 합니다. 예로 첫 글자(first letter)와 생성된 장식이 있습니다.

  27. 27 · 핵심

    의사 클래스 Pseudo-class

    의사 클래스(pseudo-class)는 CSS 선택자의 일부입니다. 상태, 위치, 언어, 사용자 동작 등의 조건으로 요소를 찾습니다.

  29. 29 · 핵심

    중앙 열 Centered Column

    가운데 정렬된 단은 읽기 편한 최대 너비와 양옆에 비슷한 비율의 공간을 가져요.

  30. 30 · 더 많은 세부 정보

    최대 콘텐츠 max-content

    `max-content`는 일반적인 줄 바꿈 지점에서 줄 바꿈하지 않는다면 콘텐츠가 원하는 크기입니다.

  31. 31 · 더 많은 세부 정보

    최소 콘텐츠 min-content

    `min-content`는 허용된 모든 줄 바꿈 후에 콘텐츠가 사용할 수 있는 가장 작은 크기입니다.

  32. 32 · 핵심

    카드 그리드 Card Grid

    카드 그리드는 비교할 수 있는 카드들을 반복해서 보여줘요. 열의 개수는 남은 공간에 따라 변해요.

  33. 33 · 더 많은 세부 정보

    캐스케이드 레이어 Cascade Layers

    캐스케이드 레이어는 CSS 규칙의 순서를 설정하는 이름이 붙은 그룹입니다. 브라우저는 선택자 특이성을 비교하기 전에 이 순서를 확인합니다.

  34. 34 · 더 많은 세부 정보

    컨테이너 조회 Container Query

    컨테이너 쿼리는 CSS가 컴포넌트를 자기 컨테이너에 맞추게 해줘요. 화면 크기만 보는 게 아니라 컨테이너의 크기나 스타일을 확인해요.

  35. 35 · 핵심

    텍스트 잘림 Text Truncation

    텍스트 잘림은 공간을 절약하기 위해 텍스트를 잘라냅니다. 말줄임표는 한 줄 이상이 빠졌음을 보여줍니다.

  36. 36 · 더 많은 세부 정보

    포함 블록 Containing Block

    포함 블록은 요소가 자신의 위치와 백분율 크기를 계산할 때 사용하는 직사각형입니다.

  37. 37 · 핵심

    플렉스박스 Flexbox

    Flexbox는 한 번에 한 방향으로 동작하는 CSS 레이아웃 시스템입니다. 항목들을 행이나 열로 정렬하고 배치합니다.

  39. 39 · 핵심

    clamp() clamp()

    `clamp()`는 선호하는 CSS 값을 선택하지만 최소값과 최대값 사이로 유지합니다.

  40. 40 · 핵심

    CSS 그리드 CSS Grid

    CSS 그리드는 행과 열을 함께 배치하는 레이아웃 시스템입니다. 고정된 영역을 설정하거나 공간이 변경될 때 영역을 변경할 수 있습니다.

  41. 41 · 핵심

    CSS 논리적 속성 CSS Logical Properties

    CSS 논리적 속성은 블록 및 인라인과 같은 쓰기 흐름에 따라 면을 설명합니다. 이는 상, 우, 하, 좌와 같은 고정 방향을 대체합니다. 이는 레이아웃이 언어의 쓰기 방향을 따르도록 돕습니다.

  42. 42 · 더 많은 세부 정보

    CSS 사용자 정의 속성 CSS Custom Property

    CSS 사용자 지정 속성은 다시 쓸 수 있는 CSS 값이에요. 보통 CSS 변수라고 불리죠. 캐스케이드를 따르고, 범위나 테마에 따라 변할 수 있어요.

  43. 43 · 핵심

    CSS 상속 CSS Inheritance

    CSS 상속은 일부 속성이 부모 요소로부터 값을 복사할 수 있게 합니다. 이는 자식 요소가 자체 값을 가지지 않을 때 발생합니다.

  44. 44 · 핵심

    CSS 선택자 CSS Selector

    CSS 선택자는 페이지에서 요소를 찾아 스타일을 적용할 수 있도록 하는 패턴입니다.

  46. 46 · 핵심

    CSS 위치 지정 CSS Positioning

    CSS 위치 지정은 요소가 어떤 기준에 대해 배치되는지를 말합니다. 일반 흐름, 자신, 조상, 또는 뷰포트를 참조로 사용할 수 있습니다.

  47. 47 · 더 많은 세부 정보

    CSS 중첩 CSS Nesting

    CSS 중첩은 하나의 스타일 규칙을 다른 규칙 안에 쓰기 위한 내장 구문입니다. 브라우저는 여전히 선택자와 그 우선 순위를 읽을 때 CSS 규칙을 따릅니다.

  48. 48 · 핵심

    CSS 캐스케이드 CSS Cascade

    CSS 캐스케이드는 여러 스타일이 동일한 대상을 지정할 때 브라우저가 사용하는 규칙 집합입니다. 각 규칙의 출처, 중요성, 컨텍스트, 레이어, 셀렉터 가중치, 범위, 순서를 확인합니다.

  49. 49 · 핵심

    CSS 특수성 CSS Specificity

    CSS 특이성은 선택자의 가중치입니다. 다른 캐스케이드 규칙이 같을 때 브라우저는 이 가중치를 사용하여 어떤 스타일이 적용될지 선택합니다.

  50. 50 · 핵심

    minmax() minmax()

    `minmax()`는 행이나 열에 최소 크기와 최대 크기를 모두 지정할 수 있는 CSS Grid 함수입니다.

  51. 51 · 핵심

    z-인덱스 z-index

    z-인덱스는 위치가 지정된 박스의 앞에서 뒤로 레벨을 설정하는 CSS 속성입니다. 경우에 따라 새 로컬 스태킹 컨텍스트를 생성하기도 합니다.