'CSS라이브러리'는 웹 초기 부터 있었지만 새로운 기술로 크게 주목 받지는 못했어.
홈페이지를 만들기 위한 기본 언어인 Html 의 일부 처럼 생각했었거든.
우리들이 이전 Html 학습에서 따라하며 만들었던 layout.css 도 '라이브러리'야. 내가 만들려는 홈페이지의 각 요소에 대한 특징, 디자인을 css 파일에 모아 두었잖아.

또 홈페이지를 전문적으로 만들어 주는 회사들(웹에이전시) 이나 프리랜서들은 자신들 만의 라이브러리를 다 사용하고 있었어.
그리고 우리도 공부했지만 그렇게 어려운 것도 아니었어.
특정 라이브러리가 없어도 서로 다른 사람이 만든 홈피를 분석하고 수정, 개량해서 홈페이지들은 급격히 세련되져 갔어.

Bootstrap 이나 W3CSS 같은 'CSS라이브러리'들이 본격적으로 유행하기 시작한 것은 '반응형웹(Responsive Web)'이라는 기술이 필요해 지면서 부터였어.(이건 내 생각이야..)

예전에는 홈페이지를 보려면 PC에서 '웹브라우저'로 보아야만 했어.
PC 모니터는 대부분 비슷하잖아. 가로가 최소 1000px 이상은 되었어.
당연히 대부분의 홈페이지들도 여기에 맞춰 설계되고 운영되었어.
그런데 스마트폰, 태블릿이 나온거야. 특히 스마트폰은 가로가 짧잖아.
pc를 기준으로 만든 홈페이지는 왼쪽이 잘리는 거야.
물론 좌우로 스크롤하거나 가로로 보면 볼 수야 있지만 홈페이지가 아주 중요한 회사들이 가만히 있겠어?
스마트폰 화면에 맞게 디자인한 모바일 전용 홈페이지를 만들어 재빠르게 대응을 했지.
그런레 이게 보통 일이 아냐. 같은 내용인데 홈페이지를 두 개를 만들고 관리해야 했거든

그래서 등장한게 바로 '반응형웹' 이라는 개념이야.
즉 브라우저의 크기에 따라 자동으로 디자인이 바뀌는 기술이야.
사실 기술은 이전부터 있었어. 필요가 별로 없어서 잘 쓰지 않았던 것 뿐이었어.
그런데 pc로 인터넷을 하는 사람 보다 모바일 사용자가 더 많아 지면서 이 반응형웹의 인기가 갑자기 치솟았어.

반응형웹 기술로 만들면 홈페이지 2개를 운영하는 것을 예전처럼 1개만 있어도 되니 당연히 편리하겠지.
그렇지만 홈페이지를 반응형으로 만들기가 일반 css 처럼 쉽지는 않아.
생각해 봐.
"브라우저창 가로가 600px 이하이면 이렇게 배치하고, 600~900px 이면 저렇게 보이고, 900px 이상이면 요렇게 보여라."
지금 여러분이 아는 지식으로 어떻게 하면 될지 한 번 생각해 봐.
쉽지 않겠지?

바로 이 시기부터 '부트스트랩', 'w3cs's 같은 CSS라이브러리들이 폭발적으로 사용되기 시작했어.
이러한 라이브러리를 이용하면 그냥 새로운 이름의 클래스(class) 만 적용하면 척척 알아서 화면 크기에 맞춰 요소들이 자동으로 재배치 되는거야.
멋지지 않아?

여러분이 보고 있는 지금 이 '요기보드' 홈페이지도 반응형웹으로 만들어져 있어.
한 번 브라우저를 마우스로 가로를 확 줄여봐. 또는 지금 이 페이지에 스마트폰 브라우저로 들어가서 봐.
최상단 메뉴가 메뉴 버튼 속으로 숨고, 좌측에 있던 부메뉴가 상단으로 올라가 재배치가 되는 것을 볼 수 있을거야.
반응형웹이거든..ㅎ
다음 학습을 따라해 보면서 배워 보자구.