2장: CSS 기초
2.1 선택자 (Selectors)
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 기본적인 선택자에는 요소 선택자, 클래스 선택자, 아이디 선택자가 있습니다.
#### 2.1.1 요소 선택자 (Element Selector)
요소의 이름을 사용하여 선택합니다.
예제:
p {
color: blue;
}
#### 2.1.2 클래스 선택자 (Class Selector)
클래스 속성을 사용하여 선택합니다. 클래스 이름 앞에 `.`을 붙입니다.
예제:
.intro {
font-size: 20px;
}
HTML 코드:
<p class="intro">이 문장은 20픽셀 크기입니다.</p>
#### 2.1.3 아이디 선택자 (ID Selector)
아이디 속성을 사용하여 선택합니다. 아이디 이름 앞에 `#`을 붙입니다.
예제:
#main {
background-color: yellow;
}
HTML 코드:
<div id="main">이 영역은 배경이 노란색입니다.</div>
2.2 색상 (Color)
CSS에서는 색상을 다양한 방법으로 지정할 수 있습니다: 색상 이름, HEX 값, RGB 값, RGBA 값, HSL 값, HSLA 값.
2.2.1 색상 이름
CSS에서는 약 140가지의 색상 이름을 사용할 수 있습니다.
예제:
h1 {
color: red;
}
2.2.2 HEX 값
HEX 값은 `#` 뒤에 16진수로 색상을 지정합니다.
예제:
h1 {
color: #ff0000;
}
2.2.3 RGB 값
RGB 값은 `rgb` 함수로 지정하며, 빨강, 초록, 파랑의 값을 사용합니다.
예제:
h1 {
color: rgb(255, 0, 0);
}
#### 2.2.4 RGBA 값
RGBA 값은 RGB 값에 알파(투명도) 값을 추가합니다.
예제:
h1 {
color: rgba(255, 0, 0, 0.5);
}
#### 2.2.5 HSL 값
HSL 값은 색상, 채도, 밝기로 색상을 지정합니다.
예제:
h1 {
color: hsl(0, 100%, 50%);
}
2.2.6 HSLA 값
HSLA 값은 HSL 값에 알파(투명도) 값을 추가합니다.
예제:
h1 {
color: hsla(0, 100%, 50%, 0.5);
}
2.3 단위 (Units)
CSS에서는 길이, 크기, 여백 등을 지정할 때 다양한 단위를 사용할 수 있습니다. 가장 흔히 사용되는 단위는 px, em, rem, %, vw, vh입니다.
2.3.1 픽셀 (px)
고정된 크기를 지정할 때 사용합니다.
예제:
p {
font-size: 16px;
}
2.3.2 em
상위 요소의 글꼴 크기를 기준으로 한 상대적인 크기입니다.
예제:
```css
p {
font-size: 2em;
}
2.3.3 rem
루트 요소의 글꼴 크기를 기준으로 한 상대적인 크기입니다.
예제:
p {
font-size: 2rem;
}
2.3.4 퍼센트 (%)
상위 요소에 대한 백분율로 크기를 지정합니다.
예제:
```css
div {
width: 50%;
}
2.3.5 뷰포트 너비 (vw) 및 높이 (vh)
뷰포트의 너비와 높이에 대한 백분율로 크기를 지정합니다.
예제:
div {
width: 50vw;
height: 50vh;
}
2.4 텍스트 스타일링 (Text Styling)
CSS를 사용하여 텍스트의 스타일을 지정할 수 있습니다. 글꼴, 크기, 색상, 간격 등을 설정할 수 있습니다.
2.4.1 글꼴 (Font)
글꼴을 설정하려면 `font-family` 속성을 사용합니다.
예제:
p {
font-family: 'Arial', sans-serif;
}
2.4.2 글꼴 크기 (Font Size)
글꼴 크기를 설정하려면 `font-size` 속성을 사용합니다.
예제:
```css
p {
font-size: 20px;
}
2.4.3 글꼴 색상 (Font Color)
글꼴 색상을 설정하려면 `color` 속성을 사용합니다.
예제:
p {
color: blue;
}
2.4.4 줄 간격 (Line Height)
줄 간격을 설정하려면 `line-height` 속성을 사용합니다.
예제:
p {
line-height: 1.5;
}
2.5 박스 모델 (Box Model)
CSS 박스 모델은 HTML 요소가 어떻게 크기와 공간을 차지하는지를 설명합니다. 박스 모델은 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다.
2.5.1 콘텐츠 (Content)
요소의 실제 내용입니다.
2.5.2 패딩 (Padding)
콘텐츠 주위의 공간입니다.
예제:
div {
padding: 20px;
}
2.5.3 테두리 (Border)
패딩 주위의 경계선입니다.
예제:
div {
border: 1px solid black;
}
2.5.4 마진 (Margin)
테두리 바깥의 공간입니다.
예제:
div {
margin: 20px;
}
### 연습 문제
1. 요소 선택자, 클래스 선택자, 아이디 선택자를 사용하여 HTML 요소에 스타일을 적용해 보세요.
2. 다양한 색상 지정 방법을 사용하여 텍스트 색상을 변경해 보세요.
3. 다양한 단위를 사용하여 요소의 크기와 여백을 조정해 보세요.
4. 텍스트 스타일링 속성을 사용하여 글꼴, 크기, 색상, 줄 간격을 설정해 보세요.
5. 박스 모델의 각 구성 요소를 설정하여 요소의 크기와 공간을 조정해 보세요.
댓글
댓글 쓰기