HTML 과 CSS를 공부했다면 모든 웹사이트의 내용과 디자인은 Html과 CSS로 만들어 진다는 것을 알았을 거야.
그런데 똑같은 공부를 했어도 어떤 분들은 “와~ 신기하네….” 감탄을 하면서 학습의욕이 불타는 사람도 있겠지만, 또 누구는 “이런 조잡한 화면 하나로 뭐를 하지?” 라고 의심하는 사람도 있을 거야.

내가 두 번째 경우였어.
html과 CSS의 의미와 관계는 이해했는데 아무리 해도 예쁜 화면이 나오지 않는 거야.
CSS 속성을 한 군데 바꾸면 다른 데가 틀어지고, 옆으로 가야 할 사이드바가 아래로 내려가고…. ㅠ
'드림위버' 같은 위지윅 에디터를 사용하고 싶은 마음이 굴뚝 같은데, 웹표준을 준수하는 사이트를 만들려면 쓰지 말라고 하고. 좋은 방법이 없을까?

그러다 '부트스트랩' 을 만났어. 음~ 그때의 감동이란…. ㅎ
부트스트랩 사이트에서 예제 파일 하나를 가져다 내 메뉴에 맞게 살짝 바꾸니, 세상에 정말 뚝딱 원했던 페이지가 만들어졌어.
다시 공부하고 싶은 의욕이 타오르는 거야.
만일 이 부트스트랩을 만나지 못했다면 아마도 나는 틀림없이 웹공부 포기했을 거야. 이 강좌도 나오지 못했을 것이구.

▶ 부트스트랩(Bootstrap)

부트스트랩은 전문가가 미리 만들어 둔 CSS 모음집이야. (보통 이러한 기능 모음집을 '라이브러리' 라고 불러)
지금까지 웹페이지를 만들기 위해 우리는 Html로 웹페이지의 구조와 내용을 넣고 CSS를 사용해 Html 태그와 div 의 크기, 위치, 색상 등을 일일이 지정했어.
그런데 이 작업이 이론은 그럴듯한데 마음 처럼 쉽지는 않았을 거야.
예를 들어 간단한 2단짜리 웹페이지 레이아웃을 만드는 작업만 해도 처음에는 그리 쉽지 않아.
CSS 속성 하나 글자 한 자 틀려도 사이드가 메인 콘텐츠 아래로 내려가 버리기도 하고, 브라우저 화면을 늘리거나 줄이면 엉뚱한 자리로 가 버리기도 해.
또 분명 어느 부분에 색상을 지정했는데도 아무 변화가 없기도 하고, 브라우저 마다 다르게 보이기도 하지.
Html과 CSS는 이론은 멋진데 실제로 구현하기는 그리 만만치 않다는 것을 알았을 거야.

거기에 요즘은 홈페이지를 만들 때는 스마트폰까지 고려해야 해.
같은 홈페이지를 PC용과 스마트폰용으로 사이트를 각각 따로 만들어야 하는 경우도 있어.
결국, 좀 한다는 소리 좀 들으려면 무수한 삽질(?)을 할 수 밖에 없었어.

그런데 이 ‘부트스트랩’이 나오자 혁명이라고 부를 만한 변화가 일어났어.
아주 간단한 생각의 전환으로 웹페이지가 그야말로 뚝딱 만들어지게 된 거야.
즉, 지금까지는 Html로 구조를 먼저 잡고 CSS로 꾸미는 작업을 하던 것을, 정반대로 CSS를 먼저 만들어 두고 Html를 작성하면서 만들어 둔 CSS의 클래스를 바로 사용하는 거지.
바로 이렇게 미리 만들어 둔 CSS 모음집이 ‘부트스트랩’이야.
그래서 부트스트랩을 보통 ‘CSS 라이브러리’ 또는 ‘CSS 프레임워크’라고 부르기도 해.

이제 우리는 전문가가 미리 만들어 둔 수백 개의 CSS 클래스를 가지고 Html 문서를 만들면서 그냥 사용하면 되는 거야.
이렇게 만들면 다단 레이아웃이 깨지지도 않고, 브라우저마다 다르게 보이는 일도 없어.
또 원하면 하나의 웹페이지가 컴퓨터에서 볼 때는 컴퓨터 화면에 맞게, 스마트폰에서는 그 작은 화면에 맞게 자동으로 변경되게 만들 수도 있어. 멋지지 않아?
이처럼 PC, 태블릿, 스마트폰처럼 화면 크기가 다른 기기에 따라 내용배치가 자동으로 이루어지는 것을 기기에 따라 반응한다고 해서 '반응형 웹' 이라고 불러.
요즘 가장 핫한 기술로 ‘부트스트랩’을 사용하면 바로 이 반응형웹을 구현할 수 있는 거야.

▶ W3CSS

처음에는 이런 CSS 라이브러리가 부트스트랩만 있는 줄 알았는데, 눈을 돌려 보니 그밖에도 많은 종류가 있다는게 보이네?..ㅎ
'부트스트랩'이 가장 인기있고 엄청난 CSS 임을 부정할 수는 없지만 단점도 있다는 것을 알게 되었어.

첫째, '부트스트랩'은 기능이 너무 많아.
안되는게 없을 정도로 많은 기능을 가지고 있으니 당연히 덩치도 크겠지? 나의 소박한 홈페이지에 필요한 것만 있는 작고 빠른 CSS 는 없을까?
둘째, 우리나라에서 공부하는 입장에서는 부트스트랩에서 사용하는 CSS의 클래스 이름이 좀 낮설다고 할까?
미국 사람들에게는 쉬운 이름인지 몰라도, 영어를 배워서 쓰는 우리에게는 약간 어려워 보이는게 사실이야.

뭐 딴거 없을까 찾다 발견한 것이 바로 'W3CSS' 야...
W3CSS 는 웹관련 기술들을 공부하는 사이트로 가장 유명한 www.W3Schools.com 에서 제공하는 CSS라이브러리로 어느 사이트에서나 꼭 필요한 기능과 가벼움, 그리고 직관적인 단어를 사용하고 있어.
예를들어 부트스트랩에서는 배경색을 표시하기 위해 bg-primary, bg-success, bg-info, bg-warning, bg-danger 등의 단어를 사용하는데 비해 w3css 에서는 w3-red, w3-blue, w3-yellow, w3-gray 같은 단어를 사용해.
훨씬 더 쉬운것 같지?
특히 모든 클래스의 이름이 w3- 로 시작해서 클래스 이름만 봐도 "아~ 이거는 w3css 에서 사용하는 클래스구나.." 라는 것을 알 수 있다는 점도 장점이야.
사이즈도 워낙 작아서, 다른 CSS 라이브러리를 기본으로 사용하면서 추가로 w3css를 사용해도 홈페이지에 부하가 거의 걸리지 않을거야. (부트스트랩의 1/20 도 안될 걸?)

어느 것을 사용할지는 여러분의 자유이지만 웹세계에 입문하는 분이나 작고 빠른 사이트를 원하는 분들에게는 w3css 가 최고의 선택이라고 할 수 있어.
또 앞으로 우리가 배우면서 완성해갈 '요기보드' 역시 w3css 를 기본 css 템플릿으로 사용하고 있어.
참고로 세계에서 가장 유명한 웹사이트 중 하나인 W3Schools 역시 이 w3.css를 기본 CSS 를 사용하고 있어.
(자기네 것이니 당연한가?)