부트스트랩 학습 방법 - bootstrap 5 기초 2
부트스트랩은 전세계 프론트엔드
프레임워크에서 70%가 넘는 시장점유율을
가지고 있다고 합니다. 어쩐지 해외의
웹사이트를 돌아다니다 보면 비슷한
레이아웃의 디자인이 많아 보입니다.
심플한 디자인이지만 반응형 웹페이지
문제를 해결해주기 때문에 모바일 환경이
일상화된 시대에 좋은 솔루션입니다.
부트스트랩에서 디자인을 더 특화시키길
원한다면 SASS 컴파일로 커스터마이즈가
가능하다는 것도 장점입니다.
트래픽이 작은 웹사이트를 운영할 때는
CDN을 사용해 배포하여 호스팅 비용을
절감할 수도 있습니다. CDN은 브라우저에
캐시되니까 부트스트랩의 점유율이
높아질 수록 페이지 로딩속도도
빨라질 것으로 예상할 수 있지요.
페이지 로딩속도는 SEO에 중요합니다.
부트스트랩은 반응형 문제를 해결한 것,
CDN배포로 비용을 줄이면서
로딩속도를 높이는 등 인터넷의
핵심적인 문제를 해결하는 방식으로
접근해왔기 때문에 많은 웹사이트에서
채택하여 점유율을 늘려온 것 입니다.
문제는 부트스트랩을 사용하려면
그 내용을 배워야 한다는 것 입니다.
프론트엔드를 파다보면 배울 것이
워낙 많아서 도중에 길을 잃고 헤메이기
쉬운데요. 서버사이드 언어들(자바, C# 등)은
하나의 언어를 진득하게 파는게 미덕이지만
웹은 계속 뭐가 새롭게 나오고 흐림이
바뀌니까 조금 뭘 배워서 해보려고 하면
새로운 기술이 나와서 OO프레임워크는
앞으로 얼마 안남았다 - 그러면 투자한
시간만큼 써먹지를 못하니까 문제입니다.
지금은 언어가 난무하는 시대인데
웹의 언어도 언젠가 정립이 될 날이
올거라고는 믿지만 당연히 기다리고만
있을 수는 없습니다. 좀 오래 갈 것 같은
웹 기술은 배워둘 필요가 있습니다.
그런면에서 부트스트랩은 활용가치가
높을 것으로 봅니다. 웹의 방향성으로
봤을 때 같은 일을 하는데 각자가
다르고 복잡한 코드를 취급하는 일은
줄어가는 쪽으로 발달하고 있습니다.
이번 포스팅에서는 부트스트랩의
학습 방법에 대해서 좀 이야기
해보려고 합니다. 어떻게 학습하면 좋은가?
부트스트랩 필요사항
HTML이나 CSS를 건너뛰고 부트스트랩을
시작해도 되지만 CSS에 기본이 없으면
이해가 잘 안될 수도 있습니다.
또 부트스트랩의 변수들을 커스터마이즈
할일도 있을 텐데 그때 CSS를 알아야 합니다.
(SCSS 문법도 CSS의 확장이다)
HTML/CSS/자바스크립트를 어느정도
하기 때문에 부트스트랩을 사용하려는
것이라고 볼 수 있는데 부트스트랩이
쉽긴하지만 완전 초보자들을 위한
내용이라 하기엔 애매합니다.
따라서 CSS 정도는 기본이 있어야 합니다.
공식문서를 활용
요즘은 오픈소스의 설명서(tutorial)를
워낙 잘해놓기 때문에 공식문서만
잘 활용해도 다 배울 수 있습니다.
조금 이해가 안가거나 그런 부분들은
유튜브의 무료강의 영상들을 참고하면
더 이해가 잘가니까 활용하면 됩니다.
tutorial을 학습할 때 모든 내용을 다
커버하려고 하면 효율이 안좋습니다.
온라인문서라서 감이 잘 안오지만
책으로 인쇄하면 두꺼운 책이 몇권이나
나올지 알 수 없기 때문에 맥락을
잡고 학습해야 가성비가 좋습니다.
보통은 큰 와꾸를 잡은 다음에
세부적인 내용을 다 몰라도 나중에
필요하면 레퍼런스할 정도만 되면 됩니다.
그러니까 지금 모든 것을 몰라도
필요하면 알아서 찾아서 할 수 있도록
마치 콜백함수처럼 프레임워크의 지식을
머리속에 다 넣지 않고 호출할 때 (필요할때)
실행시키는 방식으로 할 수 있습니다.
장난스런 비유같지만 그렇게 하지 않으면
하루종일 웹문서만 보고 따라하다 보면
또 새로운 기술이 나와서 그것에 대한
튜토리얼을 처음부터 다시 하는
무한 반복이 시작됩니다. 오죽하면
스택오버플로우 커뮤니티가 RIP Tutorial
(Rest in Peace Tutorial) 시리즈를 만들기도
해버리지요. - Rest in Peace는 돌아가신 분들에
대한 애도의 표현입니다. 즉 튜토리얼은
그만 사라지라는 의미입니다.
자바스크립트 같은 기본적인 언어는
오랜 시간을 투자해도 괜찮은 편인데
프레임워크는 종류가 너무 많고 또
버전업에 따른 변경사항 등이 많아서
어느 순간에는 또 완전히 새로운 언어를
하고 있는 기분이 들기도 합니다.
해서 프레임워크는 처음에 와꾸를
이해한 다음 세부적인 내용은 필요할 때
마다 레퍼런스 하는 방식이 좋습니다.
bootstrap의 경우 첫번재로 알아야할 것은
레이아웃 부분입니다. 레이아웃에서도
container 인데 이것도 CSS에 대한
어느정도 이해가 필요합니다. grid라던가
flex 레이아웃 같은 부분으로 어느정도
실습을 통해 감을 잡습니다.
bootstrap이 이해가 어려우면 CSS의
grid, flex 레이아웃 부분을 학습합니다.
그리고 다시와서 보면 다르게 보입니다.
HTTP/CSS | 그리드(grid) 레이아웃을 사용한 반응형 레이아웃 예시
bootstrap 5 grid 시스템 - bootstrap 5 기초 1
학습 방식 - bootstrap 5
이것은 주관적인 의견이라 사람마다
또 상황에 따라 다를 수 있습니다.
Layout : 레이아웃은 grid와 flex 개념이
있다면 어렵지 않습니다. 한개의 행(row)을
12개 열(col) 나누고 breakpoint에 따라
직관적으로 반응형 페이지가 되므로
매우 편하고 좋습니다.
Content 는 Reboot부터 설명하는데
부트스트랩은 자체 reset 코드로 적용합니다.
typography(헤딩 스타일), image, table 등
많이 사용되는 요소를 설명합니다.
주요 내용은 부트스트랩을 적용하면
자동으로 반응형이 된다는 내용입니다.
Forms는 사용자 입력 받는 UI로
중요한 부분입니다. 텍스트 입력창이나
체크박스, 라디오 버튼 등 예제가
잘나와 있으니까 복사 붙여넣기해서
이것저것 해보고 맘에 드는 것을
가져다 쓰면 됩니다.
Component에는 쓸만한 것들이
많이 있습니다. Navbar, Dropdown,
Card 등 표준적인 컴포넌트들이
다 있기 때문에 편리합니다.
여기에 있는 것들은 자바스크립트
코드와 함께 동작하는 것들이 많습니다.
이 정도로 학습방식을 이야기하고
다음 포스팅에서는 몇가지 컴포넌트의
예제를 다루어 보겠습니다.
