프로그래밍
헤더, 버튼, 간격, 호버 상태, 반응형 동작처럼 페이지 수정을 요청할 때 필요한 CSS와 UI 용어를 검색해서 확인하는 참고 자료입니다.
63 개 항목
페이지 구조
Header
페이지의 가장 위쪽 영역입니다. 보통 사이트 제목, 네비게이션, 테마/언어 버튼, 메뉴 버튼이 들어갑니다.
헤더의 패딩, 높이, 테두리, 위치를 바꾸면 상단 영역의 높이와 고정 방식이 달라집니다.
헤더가 높아지면 모바일에서 본문이 보이는 공간이 줄어들 수 있습니다.
headerpaddingheightpositionborder-bottom모바일 헤더 제목을 작게 만들고 헤더 높이는 그대로 유지해줘.
페이지 구조
Footer
페이지 맨 아래 영역입니다. 링크, 법적 안내, 연락처, 보조 네비게이션이 들어가는 경우가 많습니다.
푸터의 패딩과 테두리를 바꾸면 아래쪽 여백과 본문과의 구분감이 달라집니다.
footerpaddingborder-topmargin-top푸터가 본문에 붙어 보이지 않게 위쪽 패딩을 늘려줘.
페이지 구조
Section
히어로, 도구 목록, 참고 카드, 설명 블록처럼 관련된 내용을 묶는 큰 페이지 영역입니다.
섹션 패딩은 페이지의 위아래 리듬을 바꿉니다. 배경색을 바꾸면 섹션이 더 분리되어 보입니다.
sectionpadding-blockborder-topbackground모바일에서 도구 목록 섹션의 위아래 패딩을 줄여줘.
페이지 구조
Container
큰 화면에서 본문이 너무 넓게 퍼지지 않도록 잡아주는 내부 감싸기 영역입니다.
max-width를 키우면 콘텐츠 폭이 넓어집니다. 좌우 패딩을 늘리면 화면 가장자리와 거리가 생깁니다.
max-widthmargin-inlinepadding-inline데스크탑에서 메인 컨테이너 폭을 조금 좁혀줘.
페이지 구조
Card
도구, 참고 항목, 결과처럼 반복되는 하나의 항목을 담는 박스형 요소입니다.
카드의 패딩, 테두리, 둥근 정도, 그림자는 항목이 촘촘한지 또는 강조되는지를 결정합니다.
borderborder-radiuspaddingbackgroundbox-shadow참고 카드의 패딩을 줄여서 더 촘촘하게 만들어줘.
페이지 구조
Panel
입력, 설정, 출력처럼 실제 작업에 쓰이는 컨트롤을 담는 영역입니다.
패널의 간격과 배치를 바꾸면 도구를 반복해서 사용할 때의 편의성이 달라집니다.
borderbackgroundpaddingdisplay데스크탑에서는 패널 컨트롤을 한 줄로 배치하고 모바일에서는 세로로 쌓아줘.
페이지 구조
Navigation
주요 페이지나 카테고리로 이동하기 위한 링크 또는 버튼 묶음입니다.
gap, 정렬, 표시 조건을 바꾸면 데스크탑/모바일에서 네비게이션이 보이는 방식이 달라집니다.
navdisplaygapalign-items작은 화면에서는 네비게이션 링크를 숨기고 메뉴 버튼만 보이게 해줘.
페이지 구조
Menu
버튼을 눌렀을 때 열리는 링크 또는 동작 목록입니다.
위치, 가로 길이, z-index는 메뉴가 어디에 열리고 다른 콘텐츠 위에 보이는지를 결정합니다.
메뉴가 일반 문서 흐름 안에 있으면 페이지 전체를 아래로 밀 수 있습니다.
positionrighttopz-indexwidth메뉴가 페이지를 밀지 않고 오른쪽에 정렬된 떠 있는 패널로 열리게 해줘.
페이지 구조
Sidebar
페이지의 왼쪽이나 오른쪽에 있는 세로 영역입니다. 네비게이션이나 필터에 자주 쓰입니다.
사이드바의 폭과 반응형 규칙은 계속 보일지, 접힐지, 본문 아래로 내려갈지를 결정합니다.
asidewidthpositiongrid-template-columns모바일에서는 필터 사이드바를 본문 아래로 내려줘.
페이지 구조
Hero
페이지 첫 화면에서 핵심 목적이나 주요 행동을 보여주는 큰 소개 영역입니다.
히어로의 패딩, 제목 크기, 배치는 첫인상과 첫 화면에 들어오는 정보량을 바꿉니다.
paddingbackgroundmin-heightgrid모바일에서 버튼이 보이도록 히어로 제목 크기를 줄여줘.
간격과 크기
Padding
요소의 테두리와 내용 사이에 있는 안쪽 여백입니다.
padding-top을 늘리면 요소 안에서 내용 위쪽 공간이 커집니다.
패딩을 늘리면 보통 요소 자체의 높이나 폭도 커집니다.
paddingpadding-toppadding-rightpadding-bottompadding-left헤더의 위쪽 패딩을 조금 늘려줘.
간격과 크기
Margin
요소 바깥쪽에 생기는 여백입니다. 다른 요소와의 거리를 만듭니다.
margin-bottom을 늘리면 다음 요소가 더 아래로 밀려 간격이 넓어집니다.
marginmargin-topmargin-rightmargin-bottommargin-left히어로 영역과 도구 목록 사이의 마진을 더 늘려줘.
간격과 크기
Gap
flex나 grid 안에서 항목 사이에 생기는 간격입니다.
gap을 늘리면 그룹 전체 바깥이 아니라 항목 사이 간격만 넓어집니다.
gaprow-gapcolumn-gap테마 버튼, 언어 버튼, 메뉴 버튼 사이의 gap을 줄여줘.
간격과 크기
Width
요소의 가로 방향 크기입니다.
고정 width는 크기를 일정하게 유지합니다. max-width는 작은 화면에서 줄어들 수 있게 합니다.
widthmin-widthmax-width메뉴 패널 가로 길이를 가장 긴 항목에 맞춰줘.
간격과 크기
Height
요소의 세로 방향 크기입니다.
고정 height는 헤더를 안정적으로 유지할 수 있습니다. max-height와 overflow를 쓰면 드롭다운이 너무 길어지는 것을 막을 수 있습니다.
heightmin-heightmax-height제목은 작게 만들되 헤더 높이는 안정적으로 유지해줘.
간격과 크기
Max width
요소가 커질 수 있는 최대 가로 폭입니다.
max-width를 줄이면 큰 화면에서 텍스트 줄과 패널 폭이 더 짧아집니다.
max-widthwidth드롭다운에 max-width를 넣어서 페이지를 너무 많이 덮지 않게 해줘.
간격과 크기
Top / Right / Bottom / Left
position이 적용된 요소를 기준점에서 얼마나 떨어뜨릴지 정하는 값입니다.
right: 0은 떠 있는 패널을 기준 부모의 오른쪽 끝에 맞춥니다.
toprightbottomleftinset열린 메뉴 패널을 헤더 컨트롤의 오른쪽에 맞춰줘.
글자
Font size
글자의 크기입니다.
font-size를 줄이면 모바일 헤더처럼 좁은 공간에 긴 문구가 들어가기 쉬워집니다.
font-sizetext-smtext-lg모바일 사이트 제목 글자 크기를 줄이고 한 줄로 유지해줘.
글자
Font weight
글자가 얼마나 두껍거나 굵게 보이는지를 정합니다.
font-weight를 올리면 글자 크기를 바꾸지 않고도 더 강조되어 보입니다.
font-weightfont-boldfont-semibold카테고리 라벨을 조금 더 굵게 만들어줘.
글자
Line height
텍스트 한 줄이 차지하는 세로 공간입니다.
line-height를 늘리면 문단이 읽기 쉬워집니다. 줄이면 작은 UI 라벨이 더 촘촘해집니다.
line-heightleading히어로 설명 문단의 줄 높이를 조금 늘려줘.
글자
Letter spacing
글자 하나하나 사이의 간격입니다.
영문 대문자 라벨은 약간의 자간이 선명해 보일 수 있습니다. 한국어에는 과한 자간이 어색할 수 있습니다.
letter-spacingtracking작은 버튼의 음수 자간을 없애줘.
글자
Text align
컨테이너 안에서 글자가 가로로 정렬되는 방식입니다.
메뉴 글자를 오른쪽 정렬하면 오른쪽에 붙은 패널처럼 보이기 쉽습니다.
text-align메뉴 패널 안의 항목 글자를 오른쪽 정렬해줘.
글자
Wrap / No wrap
긴 텍스트가 다음 줄로 내려갈 수 있는지, 한 줄에 머물러야 하는지를 정합니다.
한 줄 유지는 헤더 높이를 안정적으로 만들고, 줄바꿈은 더 많은 글자를 보여주지만 보통 높이가 늘어납니다.
white-spaceword-breakoverflow-wrap모바일 제목은 한 줄로 유지하고 넘치는 부분은 잘리게 해줘.
글자
Truncate / Ellipsis
한 줄 텍스트가 공간을 넘칠 때 뒤쪽을 자르고 점으로 표시하는 방식입니다.
말줄임은 라벨이 예상보다 길어도 레이아웃이 깨지지 않게 합니다.
overflowtext-overflowwhite-space아주 작은 화면에서는 사이트 제목을 말줄임 처리해줘.
색상과 배경
Color
글자나 아이콘의 색상입니다.
color를 바꾸면 가독성과 시각적 우선순위가 달라집니다.
color다크모드에서 선택된 언어 글자가 잘 보이게 색상을 수정해줘.
색상과 배경
Background
요소 내용 뒤에 깔리는 색상이나 이미지입니다.
배경을 바꾸면 패널 구분, 활성 상태 강조, 대비 개선이 가능합니다.
backgroundbackground-color다크모드에서 선택된 언어 항목의 배경을 어둡게 바꿔줘.
색상과 배경
Opacity
요소가 얼마나 투명하게 보이는지를 정합니다.
opacity를 낮추면 요소가 덜 튀지만, 가독성이 떨어질 수 있습니다.
opacityrgbacolor-mix비활성 컨트롤을 흐리게 보이게 하되 글자가 읽히지 않을 정도로 낮추지는 말아줘.
색상과 배경
Gradient
두 가지 이상의 색상이 부드럽게 이어지는 배경 표현입니다.
약한 그라데이션은 깊이를 줄 수 있지만, 강한 그라데이션은 도구 화면을 산만하게 만들 수 있습니다.
linear-gradientradial-gradientbackground-image히어로 배경은 강한 그라데이션 없이 은은하게 유지해줘.
색상과 배경
Accent color
라벨, 활성 상태, 중요한 버튼 등에 반복해서 쓰는 포인트 색상입니다.
강조 색상을 바꾸면 페이지의 인상과 강조 지점이 달라집니다.
colorbackgroundborder-coloraccent-color카테고리 라벨과 활성 칩에 같은 초록색 강조 색상을 사용해줘.
색상과 배경
Contrast
글자/아이콘 색과 배경색 사이의 차이입니다.
대비가 높으면 특히 다크모드와 모바일 화면에서 더 읽기 쉽습니다.
colorbackground-color다크모드에서 드롭다운 항목의 대비를 높여줘.
테두리와 형태
Border
요소 둘레에 그려지는 선입니다.
테두리 두께와 색상은 박스나 버튼이 배경에서 얼마나 분리되어 보이는지를 결정합니다.
borderborder-colorborder-widthborder-style다크모드에서 메뉴 패널 테두리를 조금 더 진하게 해줘.
테두리와 형태
Border radius
박스나 버튼 모서리가 얼마나 둥근지를 정합니다.
작은 radius는 실용적이고 단정해 보입니다. 큰 radius는 더 부드럽고 장식적으로 보입니다.
border-radius카드 모서리 둥글기는 8px 정도로 유지해줘.
테두리와 형태
Box shadow
요소 주변의 그림자입니다. 요소가 페이지 위로 떠 있는 느낌을 줍니다.
강한 그림자는 메뉴나 모달이 떠 있는 느낌을 줍니다. 과하면 화면이 무거워 보일 수 있습니다.
box-shadow떠 있는 메뉴 패널에 은은한 그림자를 추가해줘.
테두리와 형태
Outline
요소가 키보드로 선택되었을 때 주로 보이는 외곽선입니다.
명확한 outline은 키보드 사용자가 현재 선택된 컨트롤을 알 수 있게 합니다.
outlineoutline-offset:focus-visible아이콘 버튼에는 보이는 포커스 외곽선을 유지해줘.
테두리와 형태
Divider
섹션이나 그룹을 나누는 데 쓰는 선입니다.
구분선은 시각적으로 과하지 않게 카테고리 경계를 명확하게 합니다.
border-topborder-bottomhr메뉴 카테고리 사이에 은은한 구분선을 넣어줘.
배치와 위치
Display
요소가 화면에서 어떤 방식으로 배치될지를 정하는 기본 속성입니다.
display: none은 요소를 숨깁니다. flex와 grid는 자식 항목을 배치합니다.
displaydisplay: nonedisplay: flexdisplay: grid모바일 화면에서는 데스크탑 네비게이션을 숨겨줘.
배치와 위치
Flex
항목을 가로 또는 세로 방향으로 배치하는 방식입니다.
flex-direction: column은 항목을 세로로 쌓습니다. flex-wrap은 항목이 다음 줄로 내려가게 합니다.
display: flexflex-directionflex-wrapgap헤더 컨트롤을 flex 한 줄 배치로 유지해줘.
배치와 위치
Grid
콘텐츠를 행과 열로 배치하는 방식입니다.
grid 열 수를 바꾸면 한 줄에 보이는 카드 개수가 달라집니다.
display: gridgrid-template-columnsgrid-columngap넓은 데스크탑 화면에서는 도구 카드를 한 줄에 네 개씩 보여줘.
배치와 위치
Align items
flex나 grid 안에서 항목을 교차축 방향으로 어떻게 정렬할지 정합니다.
align-items: center는 헤더 한 줄 안에서 컨트롤을 세로 가운데에 맞춥니다.
align-itemsplace-items제목과 헤더 버튼을 세로 가운데 정렬해줘.
배치와 위치
Justify content
flex나 grid 안에서 항목을 주축 방향으로 어떻게 배치할지 정합니다.
justify-content: space-between은 그룹을 양쪽 끝으로 벌립니다.
justify-contentjustify-itemsmargin-left: auto제목은 왼쪽에, 컨트롤은 오른쪽에 유지해줘.
배치와 위치
Position
요소가 페이지나 다른 요소를 기준으로 어디에 놓일지를 정하는 방식입니다.
position: absolute를 쓰면 드롭다운이 페이지 레이아웃을 아래로 밀지 않고 떠 있게 만들 수 있습니다.
positionrelativeabsolutefixedsticky메뉴 패널이 페이지를 밀지 않도록 absolute로 배치해줘.
배치와 위치
Z-index
position이 적용된 요소들이 서로 겹칠 때 어떤 것이 위에 보일지를 정합니다.
z-index를 높이면 드롭다운을 본문보다 위에 보이게 할 수 있습니다.
z-index는 position과 stacking context가 함께 맞아야 예상대로 동작합니다.
z-indexposition언어 드롭다운이 메뉴 패널보다 위에 보이게 z-index를 조정해줘.
배치와 위치
Overflow
내용이 컨테이너보다 클 때 어떻게 처리할지를 정합니다.
overflow-y: auto를 쓰면 긴 메뉴가 화면 밖으로 나가지 않고 내부에서 스크롤됩니다.
overflowoverflow-xoverflow-ymax-height긴 드롭다운 메뉴는 max-height 안에서 스크롤되게 해줘.
반응형
Breakpoint
화면 폭에 따라 레이아웃이 바뀌는 기준점입니다.
브레이크포인트를 바꾸면 태블릿이 모바일처럼 동작할지 데스크탑처럼 동작할지가 달라집니다.
@mediasmmdlgxl상단 네비게이션은 태블릿을 데스크탑 기준으로 처리해줘.
반응형
Mobile
스마트폰처럼 작은 화면을 위한 스타일입니다.
모바일 스타일은 보통 글자 크기를 줄이고, 여러 열을 세로로 쌓고, 터치하기 쉬운 버튼 크기를 유지합니다.
@mediamax-widthsm모바일에서는 카드를 한 열로 세로 배치해줘.
반응형
Desktop
노트북이나 데스크탑처럼 넓은 화면을 위한 스타일입니다.
데스크탑 스타일은 더 많은 열, 가로 네비게이션, 넓은 컨테이너를 사용할 수 있습니다.
@mediamin-widthlgxl데스크탑에서는 헤더에 카테고리 네비게이션이 보이게 해줘.
반응형
Viewport
브라우저나 기기에서 실제로 보이는 화면 영역입니다.
뷰포트 단위를 쓰면 현재 보이는 화면 크기를 기준으로 크기를 정할 수 있습니다.
vwvh100vw100vh모바일에서 메뉴가 화면 밖으로 나가지 않도록 뷰포트 기준으로 폭을 제한해줘.
반응형
Responsive
화면 크기에 따라 배치와 크기가 달라지는 디자인 방식입니다.
반응형 규칙을 쓰면 같은 컴포넌트가 데스크탑에서는 가로, 모바일에서는 세로로 보일 수 있습니다.
@mediaclampmin()max()컨트롤 순서는 유지하면서 화면 크기에 맞게 반응형으로 만들어줘.
상호작용 상태
Hover
마우스 포인터가 요소 위에 올라간 상태입니다.
호버 스타일은 배경, 글자색, 테두리, 그림자를 바꿔 항목이 상호작용 가능하다는 것을 보여줍니다.
터치 기기에서는 호버가 안정적이지 않으므로 중요한 동작은 클릭/탭으로도 가능해야 합니다.
:hoverbackgroundcolortransition메뉴 항목에 마우스를 올리면 배경색이 바뀌게 해줘.
상호작용 상태
Active
버튼이나 링크를 누르는 순간의 짧은 상태입니다.
active 스타일은 작은 색상 변화나 위치 변화로 버튼을 실제로 누르는 느낌을 줍니다.
:activetransformbackground툴바 버튼에 살짝 눌리는 효과를 추가해줘.
상호작용 상태
Focus
입력창, 버튼, 링크가 키보드 조작이나 입력 대상으로 선택된 상태입니다.
포커스 스타일은 키보드 이동 위치를 보이게 만들어 접근성을 높입니다.
:focus:focus-visibleoutline검색창 포커스 링을 강조 색상과 맞춰줘.
상호작용 상태
Disabled
컨트롤이 보이지만 사용할 수 없는 상태입니다.
비활성 스타일은 보통 대비를 낮추고 클릭 상호작용을 막습니다.
:disabledopacitycursorpointer-events비활성 버튼이 사용 불가처럼 보이되 글자는 읽을 수 있게 해줘.
상호작용 상태
Selected
목록, 탭, 메뉴에서 현재 선택된 항목의 상태입니다.
선택된 항목은 일반 항목보다 더 강한 배경이나 글자색이 필요합니다.
aria-currentdata-statebackgroundcolor선택된 카테고리 칩이 다른 칩과 확실히 구분되게 해줘.
상호작용 상태
Open / Closed
드롭다운, 메뉴, 아코디언 패널이 현재 보이는지 숨겨져 있는지를 뜻합니다.
열림/닫힘 상태는 플러스/마이너스 아이콘이나 화살표 회전처럼 명확한 표시가 필요합니다.
aria-expandeddisplayheightvisibility메뉴 카테고리는 기본적으로 모두 닫힌 상태로 시작하게 해줘.
UI 컴포넌트
Button
클릭하거나 탭했을 때 어떤 동작을 실행하는 컨트롤입니다.
버튼의 패딩, 테두리, 색상, 상태 스타일은 누르기 쉬운지와 중요도를 결정합니다.
buttonpaddingborderbackgroundcursor주요 동작 버튼이 보조 버튼보다 더 눈에 띄게 해줘.
UI 컴포넌트
Icon button
텍스트보다 아이콘으로 의미를 전달하는 버튼입니다.
고정된 가로/세로 크기는 상태가 바뀌어도 아이콘 버튼이 흔들리지 않게 합니다.
buttonwidthheightaria-labeldisplay: grid메뉴 아이콘 버튼을 정사각형으로 유지하고 언어 버튼과 높이를 맞춰줘.
UI 컴포넌트
Dropdown
버튼이나 선택 컨트롤을 눌렀을 때 나타나는 떠 있는 목록입니다.
드롭다운의 위치, 폭, 최대 높이, z-index가 배치와 겹침 순서를 결정합니다.
positiontoprightz-indexbox-shadow언어 드롭다운이 열리면 사이트 메뉴는 닫히게 해줘.
UI 컴포넌트
Accordion
내용을 보여주거나 숨기기 위해 열고 닫을 수 있는 섹션입니다.
아코디언은 필요한 카테고리만 열 수 있게 해서 긴 메뉴를 짧게 유지합니다.
aria-expandedheightdisplayoverflow메뉴 카테고리별로 열고 닫는 기능을 추가해줘.
UI 컴포넌트
Tabs
페이지를 이동하지 않고 관련된 보기 사이를 전환하는 컨트롤입니다.
선택된 탭 스타일은 현재 어떤 보기가 활성인지 확실히 보여줘야 합니다.
role=tablistdisplayborderbackground활성 탭의 배경을 비활성 탭보다 더 진하게 해줘.
UI 컴포넌트
Modal
페이지 위에 떠서 사용자의 주의를 모으는 패널입니다.
모달의 폭, 배경막, z-index는 페이지를 얼마나 강하게 덮는지를 결정합니다.
dialogposition: fixedinsetz-indexbackdrop모달을 가운데 정렬하고 뷰포트보다 좁게 유지해줘.
UI 컴포넌트
Tooltip
컨트롤 근처에 작게 나타나는 도움말입니다. 보통 hover나 focus에서 보입니다.
툴팁은 화면에 항상 텍스트를 두지 않고 아이콘 버튼의 의미를 설명할 수 있습니다.
positiontitlearia-describedbyz-index메뉴 아이콘 버튼의 의미를 알려주는 툴팁을 추가해줘.
UI 컴포넌트
Input
사용자가 텍스트나 값을 입력하는 필드입니다.
입력창의 패딩, 테두리, placeholder 색, focus 스타일은 사용감과 명확성을 바꿉니다.
inputborderpaddingplaceholder:focus모바일에서 검색창을 전체 폭으로 만들고 터치하기 쉽게 해줘.
UI 컴포넌트
Badge / Chip
작은 둥근 라벨 또는 필터 컨트롤입니다.
칩의 크기, 둥근 정도, 활성 색상은 필터를 훑어보기 쉬운지에 영향을 줍니다.
border-radiuspaddingbackgroundfont-size활성 카테고리 칩을 더 분명하게 보이게 해줘.