[4일차] #10. 그리드 소개

---

4일차

---

1. CSS 등장 (30분)

 - 수업소개

 - CSS 등장 이전의 상황

 - CSS의 등장

 - 혁명적 변화

2. CSS 속성을 스스로 알아내기 (8분) 

3. CSS 선택자를 스스로 알아내는 방법 (15분)

4. 박스모델 (16분)

5. 그리드 (10분)

6. 반응형 디자인 (9분)

7. CSS 코드의 재사용 (12분)

8. 수업을 마치며 (15분)

---

#10. 그리드 소개

---

▲ <div> 태그와 <span>태그의 차이

▲ 클래스 값과 id값을 활용한 테두리 만들기

▲ 그리드 값을 활용한 너비 조정 

---

□ 150px (오른쪽 그리드 고정) / 1fr (왼쪽 그리드 - 화면 크고작음에 따라 늘어나고 줄어듬) → PC / 태블릿 / 모바일 화면맞춤시 유용

□ fr : 화면 전체 조정 (예: 2fr 1fr ) ⇒ 화면 전체를 3등분 했을 때, 각각 2/3, 1/3

Html

#grid{
    border:5px solid pink;
    display:grid;
    grid-template-columns: 150px 1fr;
}

---

▲ 그리드 활용하는 웹브라우저 비율 (Can I use)

---