[웹] HTML/CSS #13 :: 부트스트랩

반응형 웹 디자인을 할 때 유용한 프레임워크가 있다. 부트스트랩이다. 트위터 개발자들이 만든 CSS 프레임워크이다. 이미 반응형과 관련된 CSS 코드들이 다 만들어져 있고, 내 HTML 소스코드에다가 해당 클래스를 입력하기만 하면 알아서 적용이 된다. 매우 간편하다. 어떤 프레임워크나 마찬가지겠지만, 장단점이 있다. 부트스트랩의 장점은 역시 빠르고 간편하다는 것이다. 이미 만들어져있는 소스를 가져다 쓰기만 하면 되니 빠르다. 직접 하나하나 CSS를 지정해가면서 디자인할 필요가 없는 것이다. 단점이라면 디자인이 정형화 되어있고, 완벽하게 커스터마이징 하기에는 무리가 있달까. 가장 좋은 방법은 부트스트랩으로 그리드를 잡고, 개별 디자인 요소들은 직접 꾸미는 것이라고 생각한다.

부트스트랩의 기본은 그리드다. 화면을 12개의 칼럼으로 나누는 것이다. 그리고 너비를 지정하기에 따라, 1개부터 12개까지의 너비를 차지하는 박스들을 만들 수 있다. 그 박스 안에 컨텐츠를 집어넣는다. 반응형 디자인의 기본이다. 디바이스의 화면 크기가 넓어지면 박스를 가로로 배치하고, 좁아지면 세로로 배치하면 된다. 편리하다. 사진의 콤마(.)에서 볼 수 있듯이, 클래스 지정을 통해 서식을 적용한다. 몇 가지 이미 만들어진 클래스만 알고 있으면, HTML 요소에다가 지정만 하면 되는 것이다.

지금 이 블로그 스킨도 부트스트랩으로 만들어졌다. 티스토리에서 제공하는 스킨에다가 내가 약간의 커스터마이징을 한 것 뿐이다. 블로그를 데스크탑에서는 위의 헤더 부분은 12개 컬럼을 다 차지한다. 그리고 본문과 사이드바는 각각 9 컬럼과 3 컬럼을 차지하고 있다. 그런데 모바일로 접속해보면? 화면 너비가 줄어들면서 사이드바가 아래로 밀린다. 그리고 상단 헤더의 메뉴가 드롭다운 메뉴로 바뀐다. 

http://bootstrapk.com/

부트스트랩에 대한 보다 자세한 정보는 위 링크에 가면 볼 수 있다. 한글판이어서 누구나 보는 데 문제 없을 것이다. 자세한 사용법도 위 사이트에 잘 나와있다. CSS부터 다양한 아이콘 등의 컴포넌트, 그리고 자바스크립트까지 쭉 읽어보면서 이해한 후, 제작 시 참고하면 된다. 코드카데미에서도 일부 강의에 자세히는 아니지만, 간단하 부트스트랩 사용법이 나와있다. 직접 실습해보면서 배울 수 있어서 더욱 이해하기 쉽다.

요즘 HTML/CSS 포스팅 업로드가 좀 밀렸다. 왜 그런가 생각해보니, 좀 코스가 꼬였다. 애초부터 예상한 문제긴 한데, 그냥 생각나는 대로 적다보니 체계적이지 못하다. 그렇다고 책을 한 권 보고 베끼기에는 의미가 없는 것 같다. 좀 더 고민을 해야겠다. 아예 처음부터 목차를 좀 구성해본 다음 다시 시작할까, 아니면 앞으로는 이 블로그 스킨 제작이나 개인 포트폴리오 사이트 만들기 프로젝트 과정에서 필요한 부분을 올려볼까. 좀 더 고민 좀 해봐야겠다.