반응형 웹이란 무엇일까?
디바이스 종류에 따라 웹페이지의 크기가 자동적으로 조정되는 것을 의미한다
글로 이해하는 것보다는 직접 해보는 게 더 잘 와닿을 것이므로 바로 실습을 해보려고 한다
다음의 박스 형태가 기본 형태로 디바이스의 크기(조건)에 따라 어떻게 변하는지 확인해보자
기본 형태
@media
@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS블럭을 적용할 수 있다
최대 너비 767px까지 즉, 최대 767px 이하로 너비가 줄어들면 박스의 크기가 50%까지 줄어서 나타나도록 설정하였다
1. max-width: 767px
2. ( max-width: 1299px ) and ( min-width: 768px )
위의 767px 이하에서보다 넓은 너비(768~1299px)가 되면 박스의 크기가 다음과 같이 바뀐다
3. min-width :1300px
최소 너비가 1300px이기 때문에 디바이스가 1300px 이상에서만 다음과 같은 디자인이 작동한다
디자인 작동 결과
Bootstrap을 활용한 design customizing
처음부터 하나하나 차근차근 진행해보자
먼저 구글창에 부트스트랩을 검색했을 때 나오는 관련 검색 결과 중에 다음의 빨간 박스에 해당하는 것을 선택한다
그럼 위와 같은 홈페이지가 나오게 되는데 홈페이지 헤더부분을 보면 시작하기 버튼이 보일 텐데
그 버튼을 누르고 들어가면 다음과 같이 다운로드 창이 나온다
시작하기 페이지가 나타나면 부트스트랩 다운로드 버튼을 눌러 다운로드를 시작한다
다운로드를 다 받게 되면 js, fonts, css 3가지의 파일이 다운로드된 것을 볼 수 있을 것이다
이를 디자인할 파일에 내부에 넣어주게 되면 부트스트랩에 있는 모든 디자인들을 사용할 수 있게 된다
✔️ 물론 다운로드하고 파일을 visual studio code에 넣어줬다고 해서
아무 연결도 없이 디자인을 넣어주면 소용 없는 일이다
⭐⭐⭐⭐⭐
그래서 위의 링크들을 html 파일에 작성해서 파일 내 부트스트랩 관련 자료들과 연결해줘야 한다 ( 필수! 무조건!!! )
지금까지 과정들을 거치고 나면 이제 부트스트랩 디자인들을 사용해볼 차례다!
부트스트랩 홈페이지로 들어가서 디자인을 가져와도 되지만 나는 W3School 홈페이지를 이용하였다
밑으로 스크롤하다 보면 Bootstrap 버튼이 있을 텐데 눌러서 들어가면
위와 같은 페이지가 나타날 것이고 가장 보편적으로 사용되는 B3 버전을 선택했다
다음과 같이 디자인 모음 페이지가 뜨게 되면 사용하고 싶은 디자인을 복사해서 사용하면 된다!
위에서 언급했던 반응형 웹을 생성하고 싶다면 , 부트스트랩으로도 가능할까?
물론 가능하다! 부트스트랩을 이용해 반응형 웹을 만들어내고 싶다면 먼저 그리드 시스템에 대해서 이해해야 한다
부트스트랩의 그리드 시스템은 12컬럼을 기준으로 한다 ( 반드시 숙지해야 한다⭐ )
다음의 Grid options에 대해 살펴보자
그리드의 옵션은 디바이스 따라 4가지가 있고 디바이스의 크기에 맞게 그리드가 조정된다
( 핸드폰, 태블릿, 작은 사이즈의 노트북, 큰사이즈의 노특북과 데스크탑 )
⭐ 그리드의 기본 구조에는 container와 class="col-*-*"가 반드시 들어가야 한다
부트스트랩 그리드의 기본적인 구조를 사용하면, 화면에서 어떻게 나타나는지 확인해보자
위의 결과 기본 형태이고 디바이스 크기처럼 창을 줄였다 늘렸다 하면 어떠한 차이가 있는지 보자
1. class = col - lg - 2 ( large : 1200px이상 )
위의 결과처럼 그리드의 기본값인 12컬럼 중 2컬럼을 차지한 형태가 나타난다
2. class = col - sm - 2 col - xs - 6 ( small : 768px 이상 / Extra small : 768px 미만 )
768px 이상일 때는 위의 결과처럼 전체 12칸 중에 2칸을 차지한 형태가 나타나는 반면에
768px 미만일 때는 전체 12칸 중에 6칸을 차지한 즉, 2열의 형태를 보인다
3. class = col - md - 2 col - sm - 3 col - xs - 6
( medium : 922px 이상 / small : 768px 이상 / Extra small : 768px 미만 )
1️⃣ class = col - xs - 6
xs 사이즈 ( 768px 미만 )가 되면 12컬럼 중 6칸을 차지하는 박스(총 2컬럼)가 만들어지도록 한다는 의미로 위의 결과처럼 나타난다
2️⃣ class = col - sm - 3
sm 사이즈 ( 768px 이상 )가 되면 12컬럼 중 3칸을 차지하는 박스(총 4컬럼)가 만들어지도록 한다는 의미로 위의 결과처럼 나타난다
3️⃣ class = col - md - 2
md 사이즈 ( 922px 이상 )가 되면 12컬럼 중 2칸을 차지하는 박스(총 6컬럼)가 만들어지도록 한다는 의미로 위의 결과처럼 나타난다
🙋♀️: 혹시 그거 알아? 부트스트랩 사용할 때 container 말고도 container-fluid라고 있는 거?!
🤷: 아니? 몰라! 그 두 가지는 어떤 차이가 있는데?
container와 container-fluid의 차이에 대해 알려줄게
1️⃣ container
container는 전체 너비라고 생각하면 되는데, 이때 "Container"는 양쪽 끝에 여백이 들어가 있다
2️⃣ container-fluid
그에 반해 container-fluid는 양쪽 끝에 여백 없이 끝에서부터 끝까지 모든 너비를 의미한다고 생각하면 된다
또 하나!
부트스트랩을 사용하다면 발생하는 문제점이 있는데 이를 해결하는 법을 알려줄까 한다
다음의 예제를 통해 확인해보자
위에서처럼 컨텐츠에 윤곽을 준 박스를 컨테이너 정가운데 위치시키고자 한다
margin: 0 auto를 박스에 설정해주면 원래대로라면 정가운데로 박스가 이동해야 되는데
현재의 경우는 다음과 같이 원래 상태 그대로이다..왜 이런 상황이 발생하는 걸까?
이러한 문제는 부트스트랩 자체에 정해진 디자인이 있기 때문에 이 디자인과 우리가 주려는 설정값이
충돌하면서 발생하게 되는 것이다
그렇다면 이 문제를 해결하기 위해서는?
개발자 도구(F12)를 먼저 확인한 다음 어떤 것과 충돌하는지를 확인해야 한다
그런 다음 충돌의 원인이 되는 디자인값(속성값)을 제거하고 내가 설정하고자 하는 속성값을 주면
아래와 같이 말끔히 해결된다
'CSS' 카테고리의 다른 글
| [CSS] 레이아웃의 끝을 보자 (0) | 2022.12.21 |
|---|
