안녕하세요. 명월입니다.
이 글은 부트스트랩 라이브러리에 대한 글입니다.
제가 한 10년 전, 한 15년 전만해도 웹 서비스 프로젝트를 할 때, 기본적으로 팀 구성은 PM, 디자이너, 개발자로 구성되었습니다.
개발자가 기본 표준 오브젝트로 프로그램을 못만드는 건 아니었으나 기본 오브젝트로 만들면 어딘가 많이 부족해 보이는 느낌이 강했습니다. 그 때는 HTML 5 표준 전이라, CSS로도 한계가 있었기 때문에 디자이너들이 아마 포토샵 작업 후 이미지를 쪼개서 만들었던 걸로 기억하네요.
지금 생각하면 그 하나하나 이미지의 트래픽은 어떻게 감당했었을까 싶네요.. 어쨋든 그런 시절이 지나고 HTML 5가 발표되고 CSS 3.0이 나오면서 이미지 잘라서 웹 페이지 만드는 건 많이 없어지고 CSS로 만들어지면서 트래픽을 많이 아끼게 되었으나 그래도 디자인은 디자이너가 했었습니다.
사람마다 분명 다르겠으나 저같은 경우는 제가 아무리 정성을 쏟고 만들어도 디자이너처럼 만들지를 못하겠더라고요.
그러다 보니 디자이너가 나쁘다는 건 아니지만, 프로젝트 공정에서 디자이너가 할당하는 부분이 생기고 디자이너는 아무래도 프로그램 공정같은 걸 잘 모르다 보니, PM이나 개발자 입장에서 일정 맞추기가 힘들었던 부분도 많았네요.
예를 들면, 어느 회사 홈페이지 메인 하나 바꾸는데, 시안 나와야 되고, 디자인 컴펌 받아야 하고, 부분 수정받고, 이미지 짜르거나 CSS 만들어야 하고... 어떨 때는 설계는 이미 끝나고, 하염없이 디자인만 기다렸던 적도 있습니다. 디자이너들은 또 재촉하면 화를 엄청 내셔서.. 속으로 끙끙 앓았던 적도 많네요..
아마 이런게 짜증나고 공정을 맞추기가 어려워서 MVC 모델이 정착이 되었는지도 모르겠네요... 시간은 정해져 있는데.. 디자인이 너무 더디니.. 일단 Controller나 DB먼저 만들자는 것??
어쨋든 10년 전만 해도 상황이 이랬습니다. 그러다 제가 처음 부트스트랩을 인지하기 시작한건 한 2013년 쯤인데, 놀라웠습니다.
디자이너가 없이도 DOM에서 class설정하는 것만으로 이쁜 디자인이 된 오브젝트를 사용할 수 있었고, 거기에 오히려 모바일 대응을 할 수 있다는 것에 너무 좋았습니다.
또 많은 템플릿을 싸게 구입할 수 있고, 무료 템플릿도 엄청 많습니다. 그러다 보니 디자인의 영역도 이제는 디자이너 없이 개발자가 설계를 할 수 있는 영역에 오다 보니, 예전보다 프로그램 일정 계획이나 맞추기가 확실히 수월해지고 생산성도 많이 올라갔습니다.
이후, 부트스트랩과 비슷한 라이브러리도 많이 생겼던 걸로 기억하는데, 저는 처음부터 지금까지 부트스트랩만 사용했습니다.
그럼 부트 스트랩에 대해 알아보겠습니다.
링크 - 부트 스트랩 3.x 버젼 https://getbootstrap.com/docs/3.4/
링크 - 부트 스트랩 4.x 버젼 https://getbootstrap.com
부트 스트랩은 2019/07/09 기준으로 두가지 버전이 존재합니다. 3.x 버젼과 4.x 버젼입니다.
최신 버전은 4.x이고 새롭게 만드는 프로젝트라면 4.x으로 작성하는 것이 좋습니다. 3.x버젼이 있는 이유는 3.x에서 4.x으로 버전 업이 될 때, 첫째는 IE의 지원 여부이고 둘째는 기존 처리에서 deprecated 된 것이 많기 때문에 3에서 4로 버전업을 하면 기존에 잘 되었던 부분에서 에러가 날 가능성이 있습니다.
지원여부는 3.x는 IE8과 IOS6 부터 지원을 했으나, 4.x부터는 IE10 부터 지원이 되니 IE8에서 돌아가는 사양이라면 3.x을 사용하여야 합니다.
부트 스트랩을 사용하는 예제입니다.
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
사실 위 소스는 단지 라이브러리를 링크하고 연결한 것 뿐이여서 단순히 Hello world를 치면 이게 부트 스트랩을 적용한건지 안한건지 모르겠네요.
처음에는 2~3개로 글을 나누어서 부트 스트랩을 나눌까 했는데 생각보다 내용이 많아서, 카테고리를 하나 만들었습니다. 각 단락별로 소개하도록 하겠습니다.
여기까지 Html 부트 스트랩에 대한 소개였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Scrollspy (0) | 2019.09.02 |
|---|---|
| [Bootstrap] 모달 (Modal) (2) | 2019.07.19 |
| [Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인 (0) | 2019.07.17 |
| [Bootstrap] 메뉴 바 ( Navbar ) (0) | 2019.07.16 |
| [Bootstrap] Form-control ( Html input object ) (0) | 2019.07.13 |
| [Bootstrap] Color (색상) (0) | 2019.07.12 |
| [Bootstrap] 그리드(Grid) (0) | 2019.07.11 |
| [Bootstrap] 레이아웃 설정 (0) | 2019.07.10 |