---

1. Day-6

오늘의 유닛은 CSS에 대해 배웠다.
어제의 html에 이어서 오늘은 스타일언어인 css에 대해서 배웠는데 입력한 값이 눈에 보이게끔 바뀌니 뭔지 모를 뿌듯함이 느껴졌다...ㅎㅎㅎ 내일은 배운 내용들을 가지고 목업 계산기를 만들어내야 한다!

최선을 다해 만들어보자!!

---

2. 학습 내용

• css의 기초
• 절대 단위와 상위 단위
• 박스 모델
• css selector

---

3. CSS

css란?

• 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어이다.

• 색상 color.

.red{
color : #ff0000;
}

• 글꼴 font-family.

.emphasize{
font-family = "SF Pro KR", "MalguGotic", "verdana";
}

• 크기 font-size

.title{
font-size : 24px;
}

• 정렬

1. 가로 정렬 text-align
   = 유효한 값으로 left, right, center, justify(양쪽 정렬)

• css 알아야 할 단위

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

박스 모델

• 박스를 구성하는 요소
  margin(바깥 여백), border(테두리), padding(안쪽 여백), content

⭐️박스 크기 측정 기준

{box-sizing : border-box;}

box-sizing은 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

css selector

• 기본 셀렉터

1. 전체 셀렉터 : *{}
2. ID 셀렉터 : #id
3. class 셀렉터 : .class -> .widget{}, .center{}
4. 태그 셀렉터 : h1{}, div{} 같은 태그명을 가진 모든 요소를 선택
5. attribute 셀렉터 : 같은 속성을 가진 요소 선택 -> a[helf]{}

• 자식/후손/형제 셀렉터

1. 자식 셀렉터 : 첫번쨰로 입력한 요소의 바로 아래 자식인 요소를 선택.
   ex) header > p {}

2. 후손 셀렉터 : 첫번째로 입력한 요소의 후손을 선택
   ex) header p {}

3. 형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 두번째
   입력한 요소를 모두 선택.

   ex) section ~ p {}

4. 인접 형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫번쨰 입력한 요소 바로 뒤에 오는 두번째
   입력한 요소를 선택
   ex) secion + p {}

• 기타 셀렉터

1. 가상 클래스 셀렉터
2. UI 요소 상태 셀렉터
3. 구조 가상 클래스 셀렉터
4. 부정 셀렉터
5. 정합성 확인 셀렉터