지난 시간까지 비반응형에서 position, display 등으로 레이아웃을 짜고 디자인을 하는 방법을 배우고, 하루 만에 포폴 하나를 제작해서 제출했다...시간도 없고, 디자인 아이디어도 없어서 꽤 고생했지만 좋은 경험이었다.
오늘부터는 사용자가 보는 화면의 크기에 따라 디자인이 변화하는 ‘반응형 웹페이지’에 대해서 배운다. 이를 만들기 위해선 비반응형을 통해 배운 레이아웃의 기본 위에서 시작해야 한다.
먼저 비반응형 웹페이지에서 반응형으로 가는 방법은 두 가지가 있다.
- 미디어 쿼리 : CSS파일에 화면 크기에 따른 조건을 걸어 사용하는 방식
- Framwork(Bootstrap) : 만들어진 반응형 디자인을 끌어와 사용하는 방식
백엔드 개발자 홀로 프로젝트를 진행하면, 미디어 쿼리를 통해 디자인을 구현하는 건 솔직히 벅차다. 물론 CSS 파일을 따로 만들어 미디어 쿼리로 사용하면 세밀한 조정과 디자인이 가능하다.
다만 문제는 그걸 홀로 할 능력도 시간도 없기 때문에 ‘부트스트랩’이라는 프레임 워크로 끌어와서 사용한다. 단, 프레임워크를 사용하면 해당 프레임워크에 맞는 문법을 배워야 한다.
BootStrap
부트스트랩을 다루기 위해선 다음 두 기능을 기본으로 알고 가면 된다.
- Prebuilt Component
- Grid System
먼저 위 기능을 사용하기 위해선, 부트스트랩 doc에서 HTML 문서에서 끌어올 CDN url를 복붙하면 된다. 물론 더 많은 기능을 사용하기 위해선 js라이브러리까지 끌어와야 한다.
1. Prebuilt Component
부트스트랩에서 사용하도록 미리 만들어놓은 HTML class들을 의미한다. 이를 사용하면 어렵게 구현해야하는 디자인을 쉽게 사용하고, 또 입맛에 맞게 커스텀할 수 있다.
그리고 부트스트랩은 이를 class로 불러오게 하는데, 말그대로 부트스트랩에서 미리 만들어 놓은 CSS파일의 클래스들을 사용하는 것이다. 이때, 클래스는 여래 개를 입력할 수 있다.
2. Grid System
사실 핵심은 그리드 시스템이다. 우리가 비반응형에서 div로 하나, 하나 속성 바꾸고, 포지셔닝해서 만드는 레이아웃을 grid를 이용하면 5분이면 뚝딱하고 만든다.
이를 사용하기 위해서는 몇 가지 전제만 알면 된다.
1) 그리드 시스템의 최상단 요소의 클래스의 값이 .container 여야 한다.
최상단, 또는 전체 레이아웃의 틀이 .container가 아니면 작동 자체를 안 한다. 이 컨테이너 명은 두 가지가 있다.
- container : 양쪽 기본 여백이 있음
- container-fluid : 전체 영역을 사용한다.
2) grid는 한 줄에 최대 12칸까지 만들 수 있다.
부트스트랩의 display이 속성은 flexbox 로 하나의 컨테이너에 아이템을 넣는다.
이때, 위의 전제는 한 줄(row)에 기본 크기의 아이템(col)을 최대 12개까지 넣을 수 있다는 것이다. 따라서 12칸이 넘으면 자동으로 아랫줄로 내려온다.
이를 응용하여, 각 아이템의 크기를 조정해 레이아웃을 구분한다.
3) row-col 구조
grid는 전체 시스템 이름이고, 실제 구현은 row, col로 구현한다. 이는
속성이랑 똑같지만, 대신 테이블의 병합을 더 쉽게 할 수 있다.또한, 부트스트랩에 정의된 화면 크기에 따라 자유롭게 col이 차지하는 공간을 바꿔 줄 수 있다. (단, row – col의 순서를 지켜야 한다. row-row 해봤자 의미가 없다.)
4) 크기 정하기
반응형의 핵심은 크기에 따른 레이아웃의 변화이다. 그래서 변화에 따라 디자인해야 하는데, 방법은 생각보다 간단하다.
1. <div class="col-12 col-md-10"> A </div>
2. <div class="col-sm-5 col-md-10"> A </div>
3. <div class="col-none col-md-block"> A </div>
4. <div class="col-block col-lg-none"> A </div>doc를 보면, 크기에 따른 정의가 표기되어있으니 참고하면 되고 여기서 중요한 것은 읽는 방법이다.
1. 기본 12칸을 차지하지만 size가 md이후부터는 10칸을 차지한다.
2. sm부터는 5칸을 차지하고 md부터는 10칸을 차지한다.
3. 기본적으로 보이지 않지만, md 부터는 보인다.
4. 기본적으로 보이지만, lg부터는 보이지 않는다.이처럼 ~부터(이상)의 개념이니 주의해서 사용하자.
[ 예제 ]
<div class="container">
<div class="row">
<div class="col-12 col-md-10">A</div>
<div class="col">B</div>
<div class="col-12">C</div>
<div class="col-lg-5">D</div>
</div>
</di