[CSS] CSS의 소개, Selector 정리, 텍스트 스타일

CSS란?

---

• CSS는 각 HTML의 요소를 꾸미는 역할을 담당한다.
• CSS를 통하여 효율적인 UI(User Interface) UX(User experience)를 제공한다.

CSS의 구조

---

기본적인 셀렉터

---

한 종류의 태그에 적용

h1 {
  color: red;
}

모든 h1 태그에 적용된다.

id에 적용

#kkk {
  color: red;
}

#을 앞에 붙여 사용한다
kkk라는 id를 가진 단 하나의 태그에 적용된다
id는 문서 내 하나의 요소에만 적용 되어야 한다.

class에 적용

.hhh {
  color: red;
}

.을 앞에 붙여 사용한다
hhh라는 class를 가진 모든 태그에 적용된다

텍스트 꾸미기

---

• color : 글자의 색상을 변경한다
• font-family : 글꼴을 설정한다.
• font-size : 글자의 크기를 선택한다.
• font-weight : 글자의 굵기를 설정한다.
• text-decoration : 밑줄, 가로줄을 설정한다.
• letter-spacing : 자간을 설정한다.
• line-height : 행간을 설정한다.
• text-align : 글자를 정렬한다.

알아야 할 단위

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등