웹에 관심을 가지기 시작하여 조금만 공부를 하다보면, 모르는 말들이 수도 없이 쏟아져 나옵니다. 모르는 용어를 하나씩 검색을 하다보면 또다른 모르는 단어들이 나오고 내용을 봐도 도통 무슨말인지도 알수도 없고...
웹에 입문을 하시는 분들은 "나는 HTML5만 공부를 하고 싶은데... " 무슨 이러한 생소한 단어들이 많이 나오는지... 라고 뭐가 이렇게 어렵지....라고 하시는 분들도 있을 것이라 생각됩니다.
HTML5 공부를 시작하다보면, 부트스트랩(Bootstrap)이라는 말을 듣게 될 것입니다. 부트스트랩 사이트를 방문하여 내용을 확인해보면, 알것 같기도 하면서 모를것 같고... 이런 느낌이 들것입니다.
HTML5 하나만 공부하기도 쉽지 않은데, 부트스트랩 꼭 사용해야 하나요? 라고 반문을 하시는 분들도 있지 않을까도 생각됩니다.
그럼 부트스트랩이란 무엇일까요?
부트스트랩 사이트를 방문하면 위와 같은 글을 볼수가 있습니다.
부트스트랩 : http://bootstrapk.com/
부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인긱있는 HTML, CSS, JS 프레임워크입니다.
한마디로 웹사이트 개발시의 프레임워크입니다. 그럼 프레임워크는 뭐지? 라고 하시는 분들이 있습니다. 프레임워크 영어로는 FrameWork, 한글로는 쉽게 도우미라고 생각을 하시면 좋을 것이라 생각됩니다.
즉, 부트스트랩은 HTML, CSS, JS 도우미입니다. 라고 하는 것이 가장 쉽게 이해를 하실것 같습니다.
웹페이지를 제작함에 있어서 무엇을 도와준다는 말일까요?
한마디로, 코딩의 양을 줄여 줍니다. 웹페이지를 작성하다 보면, HTML파일, CSS파일, JS파일의 코딩을 모두 다 하여야 하며, 이때 개별적으로 코딩을 할 경우, 웹페이지에 따라서 코딩의 분량이 상당히 많습니다.
즉, 웹페이지 제작시에 가장 많이 사용하는 CSS, JS파일을 미리 만들어 놓고, 다운로드 또는 CDN방식으로 링크해서 그냥 사용하기만 하면 됩니다.
예를 들자면, 웹페이지에 버튼을 하나 만든다고 가정을 합니다.
-- button.html --
<html>
-- 생략 --
<body>
<button type="button">BUTTON</button>
-- 생략 --
</body>
</html>
파일작성 후 실행을 하면, 아래와 같이 브라우저에 버튼이 하나 나타납니다. 그냥 아래의 버튼과 같이 단순하게 사용하시는 분들도 있지만, 대부분은 CSS를 이용하여 좀 더 보기좋고 이쁘게 만들려고 한답니다. 그럼 페이지에 CSS를 추가하게 되겠지요.
-- button.html --
<html>
<head>
<style>
button {
color:#fff;
font-weight:bold;
padding: 5px 20px;
background: #4ca5d0;
border:1px solid #327ea3;
}
</style>
</head>
<body>
-- 생략 --
CSS를 추가하고 button.html을 실행하면, 아래와 같이 나타납니다. 처음 보다는 조금 깔끔하고 이뻐진 모습입니다. 이렇게 보기 좋게 되기 위해서 버튼에 위의 코딩과 같이 CSS를 추가 해야 합니다.
그렇다고, 버튼이 완벽하게 만들어진 것이 아닙니다. 버튼 위에 마우스가 올라갔을 경우의 액션과 같이 추가할 것은 더 많이 있습니다. 이렇게 하나씩 CSS를 추가 하다보면, 상당히 코딩의 양이 늘어나겠지요. 버튼 하나라면 모르겠지만, 만약 다른 태그에 관한 디자인을 하나하나 다 해준다면, 코딩의 양은 어마어마 해진답니다.
여기서 부트스트랩을 사용하는 이유를 알수 있습니다.
--button.html-- 부트스트랩 사용
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-info">BUTTON</button>
</body>
</html>
아래는 부트스트립을 사용해서 만든 버튼입니다. 버튼의 모서리도 둥글게 표현이 되었습니다. 또한 마우스가 오버 되었을 때도 액션이 발생을 하구요.
소스를 보면, 스타일시트 하나가 링크가 되어 있으며, 버튼 태그에는 클래스가 추가되었을 뿐입니다. 코딩량이 상당히 줄었으며, 상당히 디자인도 깔끔해졌습니다.
단순히 링크 하나와 클래스 하나만 추가를 했을뿐인데, 버튼이 상당히 깔끔해 진것은, 버튼에 관련된 CSS가 모두 사전에 지정이 되어 있기 때문입니다. 사용자는 그냥 어떤 클래스인지를 확인 후에 해당 태그에 클래스만 추가하면 됩니다.
부트스트랩을 사용하면, 코딩량을 줄여, 개발 시간도 줄어들고, 디자인도 상당히 깔끔하게 사이트의 제작이 가능합니다.
부트스트랩 사용방법
- CDN방식으로 링크
- 다운로드
어떤 방법으로 사용하셔도 무방하지만, CDN방식은 인터넷에 연결이 되어 있어야하며, 다운로드 방식은 다운로드 후에는 인터넷 연결과는 상관이 없습니다.
여기서는 CSS관련만 언급을 하였지만, JS관련도 사용가능 하며, 부트스트랩 웹사이트를 방문하시면, 각 태그에 관한 사용방법이 자세히 나와 있으므로 쉽게 적용이 가능합니다.