CSS 스타일 치트 시트

CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃과 스타일을 제어하는 데 사용됩니다. 이 치트 시트는 가장 자주 사용되는 속성과 선택자를 포함합니다.

선택자 (Selectors)

타입	예시	설명
All	`* { }`	모든 요소 선택
Type	`h1 { }`	특정 HTML 태그 선택
Class	`.header { }`	class=“header"인 요소 선택
ID	`#main { }`	id=“main"인 요소 선택
Descendant	`div p { }`	div 내부의 모든 p 선택
Pseudo	`a:hover { }`	마우스 호버 시 상태

박스 모델 (Box Model)

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* 안쪽 여백 */
  border: 1px solid #ccc; /* 테두리 */
  margin: 20px;     /* 바깥쪽 여백 */
  box-sizing: border-box; /* 테두리와 안쪽 여백 포함 */
}

타이포그래피

Property	설명	예시
`font-family`	글꼴 설정	`font-family: Arial, sans-serif;`
`font-size`	글자 크기	`font-size: 16px;`
`font-weight`	글자 두께	`font-weight: bold;`
`text-align`	텍스트 정렬	`text-align: center;`
`line-height`	줄 간격	`line-height: 1.5;`
`color`	글자 색상	`color: #333;`

색상 및 배경

Property	설명	예시
`background-color`	배경 색상	`background-color: #f0f0f0;`
`background-image`	배경 이미지	`background-image: url('bg.jpg');`
`background-size`	배경 크기	`background-size: cover;`
`opacity`	투명도	`opacity: 0.8;`

위치 지정 (Positioning)

position: static; : 기본 흐름 레이아웃
position: relative; : 원래 위치 기준 상대 이동
position: absolute; : 가장 가까운 비static 조상 기준 위치 지정
position: fixed; : 브라우저 창 기준 위치 고정
position: sticky; : 특정 스크롤 위치에서 고정
z-index: 10; : 겹침 순서 제어

디스플레이 및 레이아웃

display: block; : 블록 레벨 요소
display: inline; : 인라인 요소
display: inline-block; : 인라인 블록 요소
display: flex; : 플렉스 레이아웃 활성화
display: grid; : 그리드 레이아웃 활성화
display: none; : 요소를 숨기고 공간 차지 안 함

주요 속성 단축 표기

margin: 10px 5px 15px 20px; (상 우 하 좌)
padding: 10px 5px; (상하 좌우)
border: 1px dashed red; (두께 스타일 색상)