Django 포스팅
Doyeon0430 | 2023년 05월 31일
이번시간에는 Bootstrap에 레이아웃인 container를 반응형 media 규격에 맞게 사용하겠습니다.
부트스트랩에 container는 xl, lg, md 등과 같이 다양하게 있습니다.
그렇기 때문에 웹 디자인을 하면서 햇갈리는 부분이 발생합니다.
이를 해결하고자 Bootstrap 공식 홈페이지에서는 반응형 media 표준 값을 제공하고 있습니다.
매번 CSS를 수정할 때 고생이 많았는데 덕분에 작업이 수월해졌습니다.
주소 : Bootstrap 공식문서
웹 페이지를 개발할 때 표준화된 디자인 패턴과 구성 요소를 제공합니다.
덕분에 개발자들은 빠르고 쉽게 웹 사이트를 구축할 수 있습니다.
웹 페이지의 내용을 감싸고 있는 레이아웃에 외관을 깔끔하게 꾸며줍니다.
또한 해상도에 따라 달라지는 너비를 해결 할 수 있습니다.
웹 페이지가 실행되는 장치의 특성(화면 크기, 해상도, 방향 등)에 따라 스타일을 변경하거나 레이아웃을 조정하는 데 사용합니다.
Bootstrap media 표준 값
@media (min-width: 1400px) { ... }
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
@media (min-width: 768px) and (max-width: 991.98px) { ... }
@media (min-width: 576px) and (max-width: 767.98px) { ... }
@media (max-width: 575.98px) { ... }지금까지 media를 사용하면서 px 경곗값에 오류가 났었습니다.
하지만 소수를 넣고 사용하니 다 해결됐습니다.
저는 이 블로그를 제작할 때 4개의 app을 설치했고 CSS 파일도 4개를 사용했습니다.
그렇게 똑같은 미디어 쿼리 값을 넣어주니 통일감이 생겼습니다.
media값을 총 6개의 파트로 나눠서 입력합니다.
부트스트랩 없이 PC화면과 모바일화면 동시에 디자인할 수 있습니다.
container랑 연동해서 반응형 웹사이트를 쉽게 제작할 수 있습니다.
댓글 (0)
간편 댓글 작성
