CSS 기초 예제

1. CSS 선택자

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

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

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

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

부모 안의 자손 span 요소

더 깊은 자손 span 요소

직접 자식 p (자식 선택자)

손자 p (자식 선택자 미적용)

제목 다음 단락

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

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

외부 링크 내부 링크

2. 가상 클래스

링크 (방문 전/후 색상 다름)

3. 가상 요소

이것은 인용문입니다.

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

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

4. 박스 모델

content-box
width = 콘텐츠만
padding, border 별도
border-box
width = 전체
padding, border 포함
margin
border
padding
content

5. 색상 표현 방법

red (키워드)
#ff6347 (HEX)
rgb(100,149,237)
rgba(255,0,0,0.5)
hsl(120,100%,40%)
hsla(240,100%,50%,0.7)

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 속성

span을 block으로 span을 block으로
div를 inline으로
div를 inline으로
inline-block 1
inline-block 2
inline-block 3
보이는 텍스트

8. position 속성

relative (top: 20px, left: 20px)
부모 (position: relative)
absolute 자식
fixed (우측 하단 고정)

스크롤하면 sticky 요소가 고정됩니다.

sticky 요소

Lorem ipsum dolor sit amet...

더 많은 콘텐츠...

9. overflow 속성

overflow: visible
내용이 상자 밖으로 넘칩니다. Lorem ipsum dolor sit amet.
overflow: hidden
넘치는 내용이 잘립니다. Lorem ipsum dolor sit amet.
overflow: scroll
스크롤바가 항상 표시됩니다. Lorem ipsum dolor sit amet.
overflow: auto
필요할 때만 스크롤바 표시. Lorem ipsum dolor sit amet consectetur adipisicing elit.