Responsive Basic

화면 크기에 따라 레이아웃이 변하는 반응형 디자인을 실습해보겠습니다.
반응형 디자인을 위해서는 다음 2가지 사항이 기본적입니다.

1. 헤드에 다음 코드를 삽입합니다

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. CSS(style)의 끝에 다음 코드를 추가합니다.

@media all and (max-width: 767px) { ...내용 }

미디어에 따라 달라지는 코드입니다. 가로 해상도가 767px까지는 이 스타일을 적용하라는 뜻이므로
모바일에 해당하는 스타일시트 내용을 작성합니다. 768px부터는 이전의 스타일로 돌아갑니다.