부트스트랩 5 티스토리 스킨 만들기 4 - 블로그 레이아웃 (container/row/col)

블로그 레이아웃

부트스트랩에서 레이아웃은 container안에

row/col 을 사용하는 반응형(responsive)

그리드 레이아웃입니다.

 

그리드(grid)는 바둑판 같은 2차원 평면을

사용하는 레이아웃입니다. 

 

이게 말로 설명하는 것보다 직접 해보는게

빠르긴 한데 아래 이미지 처럼

container를 안에 row (행)이 있고

row 안에 col (열) 이 있는 구조입니다.

하나의 row는 12개의 col로 되어 있는데

이 12개를 가지고 이렇게 저렇게 하면서

최적의 레이아웃을 만들면 됩니다.

 

부트스트랩 5를 사용해서 티스토리 스킨을

만들기 위해서는 그리드 시스템을 좀

이해할 필요가 있습니다.

관련한 자세한 내용은 부트스트랩5의

문서(설명서)를 참고합니다.

 

Breakpoints · Bootstrap v5.0 (getbootstrap.com)

 

기본적으로 설정된 반응형 breakpoint는

아래와 같습니다. 뭐 모든 기계에서

최적으로 나오도록 아주 칼같이 정확한

반응형 웹페이지를 추구한다면

SASS를 사용해서 커스터마이즈

할 수는 있습니다만, 그냥 sm과

md 정도만 잘 사용해도 됩니다.

 

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

 

항상 중간 사이즈(태블릿 같은)가

좀 애매한 어딘가에 있는데

너무 복잡하다면 모바일과 데스크탑

이렇게 단순히 두 부류로 분리해서

맞추는 것도 하나의 방법입니다.

 

프론트엔드는 다뤄야할 코드의 양은

많은데 대부분 보이는 부분에 대한

내용이라 너무 불편하지 않고

너무 좋게 할 필요도 없습니다.

 

모든 기계에게 완벽한 UI를 맞추느라

다른 중요한 부분을 소홀히 할

필요는 없다는 말입니다.

 

비즈니스의 관점에서 보면

코딩은 많이 작성하는 것보다

생산성이 중요합니다.

 

중견 기업의 웹사이트 중에도

모바일 편의성이 별로여도

신경을 안쓰는 경우도 있는데요.

프로그래머가 봤을 때 이 회사는

매출도 좋은데 웹사이트 하나

반응형으로 안만들어 주나.

프로그래머를 고용할 돈이

그렇게 아까운가 - 이렇게

생각할 수 있습니다.

 

그 회사는 그냥 웹사이트를 최신

기술로 만드는 것과는 별로

상관이 없는 것 입니다.

아마 일반 소비자보다는

알아서 찾아오는 업체들이나

채용문의 등 비즈니스로

방문하는 사람들 위주겠지요.

 

그런 경우 반응형이건 뭐건

웹사이트가지고 항의하는

사람들은 없을겁니다.

 

물론 소비자가 방문하는 웹사이트는

최신유행에 잘 따라가야 합니다.

반응형 페이지 당연히 만들어야

하는데 그것도 모든 장치를 위해

개발하는 것은 가성비가 안좋습니다.

 

분야마다 다르지만 일반적으로

한 웹사이트의 와꾸를 설계할 때

모바일 사용자와 PC 사용자

이 두 사용자를 대상으로

하는 방식은 생산성이

나쁘지 않다고 봅니다.

(분야마다 케바케가 우선이고

여기서는 일반적인 이야기)

 

그런 부분은 통계 자료를 찾아봐도 되지만

구글 도구 등을 사용하여 웹사이트에

접속한 OS를 특정할 수 있으니까

가장 많이 사용되는 기계를 중심으로

지원하면 될 것 입니다.

 

서론이 길었는데 부트스트랩 container 의

breakpoint인 sm, md, lg 등은 일반적인

장치들을 기준으로 되있어서 이것들을

활용해서 레이아웃을 짜면 됩니다.

 

크롬 등 웹브라우저의 개발자 도구인

[마우스 우클릭 - 검사]에서 다양한

장치의 화면을 볼 수 있습니다.

 

 

 

레이아웃 만들기

블로그의 레이아웃은 단순합니다.

아무래도 개인이 글을 쓰는 주제가

포탈사이트 처럼 많지는 않으니까

아래와 같은 형태의 레이아웃을

많이 사용합니다. 메인콘텐츠는

article(글 내용, 콘텐츠)를 주로

표시하고 사이드바는 카테고리,

댓글, 링크 사이트 등의 사이드적인

내용이 들어갑니다. 블로그 중에는

사이드바를 아예 사용안하고

반응형 메뉴만 쓰기도 하는데

사이드바 방식은 괜찮습니다.

 

 

한국은 네이버 블로그를 가장

많이 사용하고 또 많이 봅니다.

 

보통의 네이버 블로그가

어떤 레이아웃을 사용하는지 보면

거의 사이드바에 카테고리, 최근댓글,

카운터 등을 넣고 씁니다.

 

뭐냐면 사람들이 그걸 가장 많이

본다는 말과도 같습니다.

보는 사람들에게 익숙한 레이아웃은

안정감을 느끼게 합니다.

 

사이드바를 오른쪽에 넣냐

왼쪽에 넣냐 그런것도 중요한 요소인데

개인적으로 오른쪽에 메인콘텐츠를

선호합니다. 왜냐하면 사람이

왼쪽에서 오른쪽으로 글을

읽기 때문에 왼쪽에 더 중요한

콘텐츠를 넣는게 맞다고 봅니다.

 

사이드바의 정보에는 주인장의

프로필,카테고리 이렇게 부차적인

사이드 메뉴들이 들어갈텐데

어차피 오늘 처음 방문하는 사람들이

관심을 가질만한건 글의 내용입니다.

그걸 보러 들어온거지요.

 

 

네이버는 사이드바를 위에다

올리기도 하는데 글을 읽기 위해

페이지가 뜬 후 아래로 스크롤하기가

귀찮습니다. 네이버 블로그는 SEO라던가

그런 것은 별로 신경쓰지 않는 시스템이라

그럴 수 있지만 티스토리는 스킨편집이란

자유가 주어지기 때문에 세밀한

아이디어까지 구현할 수 있고

또 그래야 미덕이 아닐까 합니다

 

코드는 아래와 같습니다.

breakpoint 개념이 있어야 하는데

이해만으로 부족하고

직접 좀 해봐야 할겁니다.

 

    <div class="container-lg border">
        <div class="row">
            <div class="col-xl-9 col-md-8 bg-warning border">
                <h2>메인콘텐츠</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit ad maxime autem possimus
                    voluptatum alias odio inventore ex, officia enim quasi fugiat pariatur ab nostrum dolor expedita
                    nesciunt! Natus, facilis!</p>
            </div>
            <div class="col-xl-3 col-md-4 bg-info border">
                <h2>사이드바</h2>
            </div>
        </div>
    </div>

See the Pen Untitled by Urachachakick (@urachachakick) on CodePen.

핵심을 설명하면 container뒤에 나오는

lg, md, sm 들은 특정 길이를 기준으로

안쪽이 100% 바깥쪽은 기본 설정이 됩니다.

container의 기본설정은 아래 이미지 처럼

브라우저의 양쪽에 일정 %로 공간을

비우게 되어 있습니다. container-fluid는

꽉채우는 건데 위의 navbar(헤더)가 fluid 입니다.

 

breakpoint는 부트스트랩 문서에

나와있는 것처럼 sm이 576px,

md가 768px, lg가 992px ... 

이런 식으로 폭(width)에 따라

변하는 지점으로 선택가능합니다.

 

다음 row는 행이니까 한 줄을

차지하는 건데 col 이 중요합니다.

 

col 은 말하자면 한 row에 12개의

col이란 박스가 있다고 생각하면 됩니다.

 

col-3, col-9 이렇게 두개의 박스는

하나의 row 를 3개 9개 총 12개로

등분하는 것 입니다. 이를 감싸는

row와 container에 영향을 받는거구요.

row 보다는 container를 통해서

전체를 컨트롤하고 col은 세부

레이아웃을 잡을 수 있습니다.

 

이게 말로 설명은 조금 한계가 있어서

직접 실습을 하는게 좋습니다.

개인적으로 해외 유명 유튜버의 CSS

강좌들을 보면서 배웠는데

여러번 봐도 이해가 잘 안가지만

몇번 해보다 보면 자연스럽게

사용할 수 있게 됩니다.

 

col에 적용할 때 위의 코드 조각처럼

두개 이상의 breakpoint 를 설정할 수

있습니다. 예를 들어 md와 xl구간에는

8대4, 폭이 더 늘어나는 xl 이상에서는

9대3 등 더 세분화할 수 있습니다.

 

col 안에 들어가는 박스들(div)이

영향을 받기 때문에 나중에 텍스트가

삐져나오거나 하지 않는지 테스트를

통해서 최종 조정을 하면 좋을겁니다.

 

완벽하게 모든 장치에 맞는 반응형

페이지라는게... 만들기가 쉽지 않습니다.

대다수의 장치에서 (스크린) 불편하지

않을 정도로 맞추는 것도 괜찮습니다.

 

부트스트랩으로도 쉽지 않은데

HTML과 CSS로 코딩하면 훨씬 더

오랜 시간이 소요됩니다.

 

한가지 다행인건 블로그는

그렇게 복잡하지 않기 때문에

적당히 그 블로그의 목적에만

맞게 만들면 됩니다.

 

네이버 등 대형 포탈 사이트를

보면 상당히 복잡합니다.

안에 내용물이 많으니까 그것들이

다 맞게 보이는지 확인이 되야하니

그럴 수 밖에 없습니다.

 

반응형 아이디어가 안나오면

잘되있는 다른 블로그나 웹사이트를

참고하면 됩니다. 예를 들어서

부트스트랩 웹사이트를 참고해도 됩니다.

브라우저의 가로를 늘였다가

줄였다가 하면서 보면 어느 지점에서

바뀌는지 알 수 있습니다.

(검사를 켜놓고 본다)

부트스트랩 웹사이트는 md와 lg에서

반응형 메뉴 등이 작동합니다.

 

부트스트랩 5 티스토리 블로그 스킨 만들기 2 - 블로그 준비

부트스트랩 5 티스토리 블로그 스킨 만들기 2 - 블로그 준비