본문으로 바로가기

[5일차] #12. 미디어 쿼리 소개

category Develop/WEB2 - CSS 2018. 12. 12. 17:11




5일차



1. CSS 등장 (30분)

 - 수업소개

 - CSS 등장 이전의 상황

 - CSS의 등장

 - 혁명적 변화

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

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

4. 박스모델 (16분)

5. 그리드 (10분)

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

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

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





#12. 미디어 쿼리 소개


▲ 초록색 테두리 만들기


▲ 너비 확인하기


▲ 미디어 쿼리 통해 화면 조정하기 



□ @media(min-width):800px → 화면이 800px 이상인 경우, '이벤트' 적용

□ @media(max-width)800px → 화면이 800px 이하인 경우, '이벤트' 적용