CSS 기초 예제

1. CSS 선택자

이것은 p 태그입니다. (요소 선택자)

클래스 선택자로 스타일 적용 (.highlight)

여러 클래스 적용 (.highlight .warning)

ID 선택자로 스타일 적용 (#unique)

제목 다음 단락

인접 형제 선택자로 스타일 적용 (h3 + p)

두 번째 단락 (인접 형제 아님)

2. 가상 클래스

• 첫 번째 항목 (:first-child)
• 두 번째 항목
• 세 번째 항목
• 네 번째 항목
• 다섯 번째 항목 (:last-child)

• 1 (:nth-child(odd))
• 2 (:nth-child(even))
• 3
• 4
• 5
• 6

3. 가상 요소

이것은 인용문입니다.

첫 글자가 크게 표시됩니다. 나머지 텍스트는 일반 크기입니다.

첫 번째 줄이 굵게 표시됩니다. 두 번째 줄은 일반 스타일입니다. 창 크기를 조절해보세요.

4. 박스 모델

5. 색상 표현 방법

6. 텍스트 스타일링

font-family: 'Georgia', serif

font-size: 1.5em

font-weight: bold

font-style: italic

text-decoration: underline

text-transform: uppercase

text-transform: capitalize this sentence

letter-spacing: 2px, word-spacing: 10px

text-shadow 효과

text-align: center

line-height: 2
줄 간격이 넓습니다.

7. display 속성

8. position 속성

9. overflow 속성