CSS 자주 사용하는 속성들

1. 레이아웃 관련

박스 모델 및 배치

• box-sizing: content-box | border-box
• 박스의 크기 계산 방법을 지정.
• display: block | inline | inline-block | flex | grid | none
• 요소의 표시 방식을 설정.
• position: static | relative | absolute | fixed | sticky
• 요소의 위치를 지정.
• z-index: 숫자 값
• 요소의 쌓임 순서를 결정.
• overflow: visible | hidden | scroll | auto
• 박스 내용이 넘칠 경우 처리 방법.
• float / clear:
• 요소를 왼쪽 또는 오른쪽으로 정렬.
• flex:
• 플렉스 컨테이너 내에서의 배치를 설정.

2. 텍스트 및 글꼴

• font-family: 'Arial', sans-serif
• 글꼴 지정.
• font-size: 16px | 1rem | 100%
• 글자 크기 지정.
• font-weight: normal | bold | 100 ~ 900
• 글자 굵기 설정.
• line-height: 1.5 | 20px
• 줄 높이 설정.
• text-align: left | center | right | justify
• 텍스트 정렬.
• text-transform: uppercase | lowercase | capitalize
• 텍스트 대소문자 변환.
• text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
• 텍스트 그림자.
• letter-spacing: 2px
• 글자 간격.
• word-spacing: 4px
• 단어 간격.

3. 색상 및 배경

• color: #333 | rgba(0,0,0,0.8)
• 텍스트 색상.
• background-color: #f0f0f0 | rgba(255,255,255,0.5)
• 배경 색상.
• background-image: url('image.jpg')
• 배경 이미지 설정.
• background-size: cover | contain | 100% 100%
• 배경 이미지 크기.
• background-position: center | top | 50% 50%
• 배경 이미지 위치.
• background-repeat: no-repeat | repeat-x | repeat-y
• 배경 반복 여부.
• opacity: 0.5
• 투명도 설정.

4. 테두리 및 그림자

• border: 1px solid #000
• 테두리 설정.
• border-radius: 50% | 10px
• 둥근 모서리.
• box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3)
• 박스 그림자.

5. 크기 및 간격

• width / height: 50% | 200px | auto
• 너비 및 높이 설정.
• max-width / min-width:
• 최대/최소 너비 설정.
• padding: 10px 20px
• 내부 여백.
• margin: 10px auto
• 외부 여백.

6. 트랜지션 및 애니메이션

• transition: all 0.3s ease
• 요소 변화 시 애니메이션 효과.
• animation: slide 2s infinite
• 애니메이션 설정.
• keyframes:
• 애니메이션 단계를 정의.

7. 반응형 디자인

• media:
• 반응형 조건 설정.

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

• viewport:
• 모바일 화면 크기 제어 (HTML <meta> 태그에서 사용).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

8. 기타

• cursor: pointer | default | not-allowed
• 마우스 커서 모양.
• clip-path: circle(50% at 50% 50%)
• 요소의 특정 부분을 자르기.
• filter: blur(5px) | brightness(0.5)
• 이미지 필터 효과.