반응형 디자인

사이트는 크게 반응형과 적응형 두가지로 나뉘는데,
적응형 사이트는 화면 크기를 줄여도 내부 콘텐츠 사이즈가 줄어들지 않는 것이고
반응형웹(미디어 쿼리)는 화면크기에 따라 내부 콘텐츠 크기도 화면에 맞게 조정되는 것을 말한다.

요즘 다양한 매체(데스크탑, 노트북, 태블릿, 모바일폰)등이 등장함에 따라 대부분은 반응형 사이트로 나타나지만 무조건 반응형이어야하는 것은 아니다.

break Point

기본적으로 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야한다.
(가로사이즈는 정확한 크기를 고정하는 것이 아니라 퍼센트로 값을 준다)

@media

@media 는 화면의 크기에 따라서 다른 CSS를 적용할 수 있도록 도와주는 속성 명령어이다.

@media로 모바일 반응형 만들기 참고 사이트: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design#%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC