반응형 웹디자인 프레임웍

반응형 홈페이지를 쉽게 만들 수 있도록 제공하는 프레임웍은 굉장히 많습니다. 대표적인 부트스트랩외에도 수십개 이상이 알려져 있고, 지금도 계속 좋은 솔루션이 나오고 있습니다.

포탈검색창에서 'responsive webdesign framework'을 검색해 보세요.

최근에 널리 사용되고 있는 많은 솔루션들을 찾을 수 있습니다.

프레임웍을 이용하면 쉽게 반응형 사이트를 구축할 수 있을 뿐더러 수려한 디자인도 덤으로 얻을 수 있습니다.

부트스트랩 소개

http://getbootstrap.com/ 

최근 4.x버전이 나왔습니다. 다만, 최신 CSS3에 적용되고 있는 flex속성을 사용하고 있습니다. 이 속성은 오래된 브라우저는 적용이 되지 않습니다.  

부트스트랩은 이전 버전도 여전히 지원하고 있습니다. 2.x, 3.x버전을 제공하고 있습니다.

우리는 3.x버전을 사용하여 기존 프로젝트를 코딩해 보려고 합니다.

부트스트랩은 소스를 다운로드하여 프로젝트에 직접 반영할 수도 있고 CDN을 이용할 수도 있습니다.

html페이지에 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

를 넣어주면 부트스트랩에서 제공하는 기능을 사용할 수 있습니다.