CSS 치트시트

Q: CSS로 div를 어떻게 가운데 정렬하나요?

가장 간단한 최신 방법은 부모에 flexbox를 쓰는 것입니다: `display: flex; justify-content: center; align-items: center;`는 자식을 가로와 세로 모두 가운데 정렬합니다. 너비가 정해진 블록 요소를 가로로만 가운데 정렬하려면 `margin: 0 auto`도 여전히 동작합니다.

마지막 업데이트 2026년 5월 27일

Web 플레이그라운드에서 실행해 보기 CSS 무료로 배우기

선택자

스타일을 주고 싶은 요소를 지정하는 방법.

선택자	일치 대상
`*`	모든 요소
`p`	모든 `<p>` 요소 (태그로)
`.btn`	`class="btn"`을 가진 요소
`#main`	`id="main"`인 요소
`div p`	`<div>` 안의 모든 `<p>` (후손)
`div > p`	직접 자식만
`a:hover`	마우스를 올린 링크 (가상 클래스)
`li:first-child`	부모 안의 첫 `<li>`
`li:nth-child(2n)`	짝수 번째 `<li>` 전부
`input[type="text"]`	해당 속성을 가진 입력
`p::before`	`<p>` 앞에 생성되는 콘텐츠 (가상 요소)

박스 모델

모든 요소는 박스입니다: 콘텐츠, 패딩, 테두리, 마진.

속성	기능
`width` / `height`	콘텐츠 박스의 크기
`padding`	테두리 안쪽의 여백
`border`	`1px solid #333` - 너비, 스타일, 색상
`margin`	테두리 바깥쪽의 여백
`box-sizing: border-box`	너비에 패딩 + 테두리를 포함시킴
`margin: 0 auto`	블록 요소를 가로로 가운데 정렬
`overflow: hidden`	넘치는 콘텐츠를 잘라냄

타이포그래피 및 색상

속성	예시
`color`	`color: #333` - 텍스트 색상
`background`	`background: #fff` 또는 이미지/그라데이션
`font-family`	`font-family: system-ui, sans-serif`
`font-size`	`font-size: 16px` (또는 `rem`, `em`)
`font-weight`	`400` (보통) … `700` (굵게)
`line-height`	`1.5` - 줄 사이 간격
`text-align`	`left`, `center`, `right`, `justify`
`text-decoration`	`underline`, `none`

Flexbox

1차원 레이아웃 - 행 또는 열. 부모에 display: flex를 설정합니다.

속성 (컨테이너에 적용)	기능
`display: flex`	자식을 flex 아이템으로 만듦
`flex-direction`	`row` (기본) 또는 `column`
`justify-content`	주축을 따라 정렬 (`center`, `space-between`)
`align-items`	교차축을 따라 정렬 (`center`, `stretch`)
`gap`	아이템 사이 간격, 예: `gap: 16px`
`flex-wrap`	`wrap`은 아이템을 새 줄로 흐르게 함
`flex: 1` (자식에 적용)	아이템이 남는 공간을 채우며 늘어남

Grid

2차원 레이아웃. 부모에 display: grid를 설정합니다.

속성	기능
`display: grid`	자식을 grid 아이템으로 만듦
`grid-template-columns`	`1fr 1fr 1fr` 또는 `repeat(3, 1fr)`
`grid-template-rows`	행 크기 정의
`gap`	행과 열 사이 간격
`grid-column`	`1 / 3` - 아이템을 여러 열에 걸침
`auto-fit` / `minmax`	반응형 그리드를 위한 `repeat(auto-fit, minmax(200px, 1fr))`
`place-items: center`	모든 아이템을 셀 안에서 가운데 정렬

위치 지정 및 디스플레이

속성 / 값	기능
`position: static`	기본 - 일반 흐름 안
`position: relative`	원래 위치에서 오프셋
`position: absolute`	가장 가까운 위치 지정된 조상 기준으로 배치
`position: fixed`	뷰포트에 고정
`position: sticky`	스크롤이 임계점에 닿으면 붙음
`top` / `right` / `bottom` / `left`	위치 지정된 요소의 오프셋
`z-index`	쌓임 순서 (높을수록 위)
`display: none`	요소를 레이아웃에서 제거
`display: inline-block`	인라인으로 흐르되 너비/높이를 받음

전환 및 변형

속성	예시
`transition`	`transition: all 0.2s ease`
`transform: translate`	`translate(10px, 0)` - 이동
`transform: scale`	`scale(1.1)` - 크기 조정
`transform: rotate`	`rotate(45deg)`
`opacity`	`0` (투명) … `1` (불투명)
`box-shadow`	`0 2px 8px rgba(0,0,0,.15)`
`border-radius`	`8px` - 둥근 모서리

단위 및 반응형 디자인

단위 / 기능	의미
`px`	절대 픽셀
`%`	부모 기준 상대값
`rem`	루트 글꼴 크기 기준 상대값
`em`	현재 글꼴 크기 기준 상대값
`vw` / `vh`	뷰포트 너비 / 높이의 1%
`fr`	남는 공간의 비율 (grid)
`@media (max-width: 600px) { … }`	브레이크포인트 이하에서 규칙 적용

선택자, 박스 모델, flexbox, grid, 그리고 늘 잊어버리는 속성들을 한 페이지에 담았습니다. 이 CSS 치트시트는 요소를 지정하는 것부터 가운데 정렬까지, 웹 페이지를 스타일링하고 배치하기 위한 빠른 참조 자료입니다.

여기 나오는 모든 내용은 최신 브라우저에서 동작하는 표준 CSS입니다. 규칙을 복사하거나, CSS를 즉시 미리보기와 함께 편집할 수 있는 HTML 플레이그라운드에서 바로 시험해 보세요.

CSS 치트시트 자주 묻는 질문

이 CSS 치트시트는 무료인가요?

네. 이 CSS 치트시트는 회원 가입 없이 무료입니다. 즐겨찾기에 추가해 두고 선택자, 속성, 레이아웃 패턴을 찾아봐야 할 때마다 사용하세요.

flexbox를 써야 하나요, grid를 써야 하나요?

버튼 한 줄, 내비게이션 바, 한 줄이나 한 열에 놓인 아이템처럼 1차원 레이아웃에는 flexbox를 사용하세요. 페이지 레이아웃이나 카드 갤러리처럼 행과 열을 한 번에 제어하는 2차원 레이아웃에는 grid를 사용하세요. 둘은 함께 잘 동작합니다: 각 카드가 내부적으로 flexbox를 쓰는 카드 grid가 흔한 예입니다.

CSS로 div를 어떻게 가운데 정렬하나요?

가장 간단한 최신 방법은 부모에 flexbox를 쓰는 것입니다: display: flex; justify-content: center; align-items: center;는 자식을 가로와 세로 모두 가운데 정렬합니다. 너비가 정해진 블록 요소를 가로로만 가운데 정렬하려면 margin: 0 auto도 여전히 동작합니다.

CSS를 온라인에서 연습할 수 있나요?

네. HTML 플레이그라운드를 열어 실시간 미리보기와 함께 HTML과 CSS를 함께 작성해 보세요. 체계적으로 배우고 싶다면, Coddy의 무료 인터랙티브 CSS 강좌가 선택자, 박스 모델, flexbox, grid를 단계별로 다룹니다.

이 치트시트는 초보자에게 적합한가요?

네. 선택자와 박스 모델(기초)에서 flexbox, grid, 전환으로 이어지므로, 상단 섹션으로 시작해 점차 최신 레이아웃으로 넓혀갈 수 있습니다.