CSS 속성과 값의 카테고리

속성

1. 텍스트 (Text)

1.1. 색상 (Color)

• color: 글자색 지정
• opacity: 요소 투명도 조절

1.2. 글꼴 (Font)

• font-family: 글꼴 지정
• font-size: 글자 크기 지정
• font-weight: 글자 굵기 지정
• font-style: 글자 스타일 (기울임꼴 등) 지정
• font-variant: 글자 변형 (small-caps 등) 지정
• line-height: 줄 간격 지정
• letter-spacing: 글자 간격 지정
• word-spacing: 단어 간격 지정

1.3. 텍스트 효과 (Text Effects)

• text-align: 글자 정렬 지정
• text-decoration: 글자 장식 (밑줄, 취소선 등) 지정
• text-transform: 글자 변형 (대문자, 소문자 등) 지정
• text-shadow: 글자 그림자 지정
• white-space: 공백 처리 방식 지정
• text-overflow: 텍스트가 요소 영역 넘어갈 때 처리 방식 지정

2. 배경 (Background)

• background-color: 배경색 지정
• background-image: 배경 이미지 지정
• background-repeat: 배경 이미지 반복 방식 지정
• background-position: 배경 이미지 위치 지정
• background-size: 배경 이미지 크기 지정
• background-attachment: 배경 이미지 고정 여부 지정
• background: 배경 관련 속성 한 번에 지정

3. 테두리 (Border)

• border: 테두리 두께, 종류, 색상 한 번에 지정
• border-width: 테두리 두께 지정
• border-style: 테두리 종류 지정
• border-color: 테두리 색상 지정
• border-radius: 테두리 모서리 둥글기 지정

4. 박스 모델 (Box Model)

• width: 요소 너비 지정
• height: 요소 높이 지정
• padding: 요소 내부 여백 지정
• margin: 요소 외부 여백 지정
• box-sizing: 요소 크기 계산 방식 지정

5. 배치 (Layout)

5.1. 디스플레이 (Display)

• display: 요소 표시 방식 지정 (block, inline, flex, grid 등)

5.2. 포지션 (Position)

• position: 요소 위치 지정 (static, relative, absolute, fixed, sticky)
• top, right, bottom, left: 요소 위치 좌표 값으로 지정
• z-index: 요소 쌓임 순서 지정

5.3. 플렉스박스 (Flexbox)

• display: flex: 플렉스 컨테이너 정의
• flex-direction: 플렉스 아이템 배치 방향 지정
• justify-content: 플렉스 아이템 주축 방향 정렬 방식 지정
• align-items: 플렉스 아이템 교차축 방향 정렬 방식 지정
• flex-wrap: 플렉스 아이템 줄 바꿈 여부 지정

5.4. 그리드 (Grid)

• display: grid: 그리드 컨테이너 정의
• grid-template-rows: 그리드 행 크기 지정
• grid-template-columns: 그리드 열 크기 지정
• grid-gap: 그리드 셀 사이 간격 지정
• grid-area: 그리드 아이템 영역 지정

5.5. 기타 (Other)

• float: 요소 왼쪽 또는 오른쪽 배치
• clear: float 속성 영향 제거
• overflow: 내용이 요소 영역 넘어갈 때 처리 방식 지정
• visibility: 요소 표시 여부 지정
• clip: 요소 특정 영역만 표시

6. 애니메이션 및 전환 (Animation & Transition)

• transition: 요소 속성 값 변경될 때 애니메이션 효과 적용
• animation: 요소에 애니메이션 효과 적용

7. 미디어 쿼리 (Media Queries)

• @media: 미디어 유형 또는 조건에 따라 다른 스타일 적용

8. 기타 (Other)

• cursor: 마우스 커서 모양 지정
• pointer-events: 요소에 마우스 이벤트 발생 여부 지정
• resize: 요소 크기 조절 가능 여부 지정
• user-select: 텍스트 선택 가능 여부 지정

값 (Values)

CSS 속성 값은 다양한 형태로 표현될 수 있어.

• 색상: 색상 이름, 16진수 코드, RGB, RGBA, HSL, HSLA 등
• 길이: px, em, rem, %, vw, vh 등
• 각도: deg, rad, turn 등
• 시간: s, ms 등
• 숫자: 정수, 소수
• 문자열: 따옴표로 묶인 텍스트
• URL: 이미지, 파일 경로
• 키워드: auto, inherit, none 등