Bootstrap



[Bootstrap] 4. table을 꾸며 게시판처럼 만들기

[Bootstrap] 4. table을 꾸며 게시판처럼 만들기

Bootstrap
오늘 다룰 내용은 HTML Table 태그를 이용해서 표를 구현해보는 것입니다. HTML Table 태그는 우리나라 웹...
Read More
[Bootstrap] 3. Helper 클래스를 이용하여 텍스트 꾸며보기

[Bootstrap] 3. Helper 클래스를 이용하여 텍스트 꾸며보기

Bootstrap
오늘은 부트스트랩에서 지원하는 helper 클래스를 이용해 텍스트를 꾸며보도록 하겠습니다. 먼저 텍스트를 꾸미려면 텍스트가 있어야겠죠? 그냥...
Read More
[Bootstrap] 2. 부트스트랩 버튼 사용하기

[Bootstrap] 2. 부트스트랩 버튼 사용하기

Bootstrap
오늘은 부트스트랩 2번째 시간으로 버튼에 대해서 알아보도록 하겠습니다. 흔히 HTML에서 버튼을 표현할 때는 아래와 같이...
Read More
[Bootstrap] 1. 부트스트랩 시작하기

[Bootstrap] 1. 부트스트랩 시작하기

Bootstrap
Click the link to go to the site: 블로그 내용보러가기 === 1. 부트스트랩이란 무엇인가? 부트스트랩은 트위터(twitter)에서...
Read More
[Bootstrap] 부트스트랩이란?

[Bootstrap] 부트스트랩이란?

Bootstrap
Click the link to go to the site: 블로그 내용보러가기 ■부트스트랩 탄생배경 웹 페이지의 개발이 진행...
Read More
[Bootstrap] 4. table을 꾸며 게시판처럼 만들기
Bootstrap

[Bootstrap] 4. table을 꾸며 게시판처럼 만들기

오늘 다룰 내용은 HTML Table 태그를 이용해서 표를 구현해보는 것입니다.

HTML Table 태그는 우리나라 웹 개발자들이 아주 유용하게 사용하는 태그 입니다. 그 이유는 우리나라는 웹이 빠르게 발전했고 그로인해 온라인 커뮤니티가 무척이나 활성화 되어 있기 때문이죠.

위 사진은 워드프레스로 구현된 샘플용 게시판입니다.  비교적 디자인이 깔끔하죠.

우리는 Bootstrap을 공부하고 있으니 부트스트랩으로 저런 게시판 디자인을 꾸며보도록 하겠습니다.

먼저 기본 프로젝트를 준비합니다.

– 기본 프로젝트 –

Table 태그를 이용해서 간단한 표를 구현해볼까요?

아래와 같이 table을 만들어 줍니다.

내용은 마음대로 적어주셔도 무방해요. ㅎㅎㅎ

테스트를 위해 딱 1줄 짜리 표를 구현해보았습니다.

혹시 HTML Table에 대해서 잘 이해하지 못하신 분들에게 좀 더 설명드리면

테이블에서 <tr> 태그는 한 줄을 뜻합니다. 

그래서  만약 <tr> 태그가 3개면 3줄이 표현이 되는 것이죠.

어쨋든 웹스톰에서 크롬으로 실행볼까요? ㅎㅎㅎ

ALT + F2을 눌러 크롬으로 실행합니다.

아무런 디자인이 없는 이상한 것이 출력되었습니다.

왜 이렇게 출력 되죠??

그 이유는 기본 HTML Table은 실제 표를 나타내는 도구이지만 아무런 디자인이 적용되어 있지 않기 때문이죠.

심지어 표를 나타내는 선 조차 표시 되지 않습니다.

그래서 별도의 CSS를 적용해야 그나마 게시판 같이 보일 수 있죠.

우리는 Bootstrap을 공부하기 때문에 별도의 CSS 작성 없이 표를 구성해봅시다.

아래와 같이 table 태그에 class 항목에 table이라고 입력해주세요.

그럼 아까와 같이 ALT + F2을 눌러 크롬으로 실행해봅니다.

짠! 아래와 같이 보이시나요?? ㅎㅎㅎ

약간 실망하신 분들이 있을 지도 모르겠습니다.

기본 HTML에 비해서 그냥 선 딱 하나가 추가가 되었을 뿐 이쁘지 않기 때문이죠.

거기다 안에 데이터가 없으니 더욱 더 없어 보입니다.

그럼 조금 더 데이터를 추가 해볼까요?

저는 아래와 같이 추가 해보았습니다.

앞서 설명드렸다시피 <tr>이 현재 <tbody> 부분에서 3번이 나왔기 때문에 3줄이 표현될 것입니다.

출력결과를 한번 보죠.

드디어 게시판 같이 보이는 군요. ㅎㅎㅎ

하지만, 별로 이쁘지 않죠.

그래서 Bootstrap에서는 추가적인 class를 지정해줌으로서 table을 좀 더 꾸며주는 기능을 가졌습니다.

먼저 설명 드리면 약 3가지 방법이 있는 차례 차례 알려 드리겠습니다.

# 1. table table-striped

위와 같이 table 태그의 class를 바꾸어 줍니다.

그럼 아래와 같이 출력이 되죠.

기존에 table class만 적용했을 때와 다른 점은 홀수 줄이 약간 회색 바탕화면이 생겼다는 겁니다.

회색 바탕화면이 생김으로서 뭔가 게시판의 가독성이 높아지는 기분을 얻으실 수 있을거에요.

그럼 다른 것도 살펴볼까요?

# 2. table table-bordered

이번엔 table table-bordered 입니다.

bordered의 특징은 앞서본 striped와 달리 홀수 줄에 배경이 없습니다.

대신에 표의 각 칸마다 줄이 생성되어서

각진 느낌의 게시판을 자아냅니다.

# 3. table table-hover

이번엔 table table-hover 입니다.

이를 적용해서 실행하면 아래와 같이 출력됩니다.

table-hover의 특징은 table-striped와 비슷한 레이아웃을 가지고 있지만

마우스를 특정 줄에 가져가면 그 부분이 회색으로 빛(?)이 납니다 ㅎㅎㅎ

저는 개인적으로 table-hover랑 table-striped를 많이 씁니다.

그럼 이정도 배웠으면 응용을 해보아야겠죠? ㅎㅎㅎ

앞서 제일 처음 보여드렸던 워드프레스 게시판 같이 비슷하게 만들어보겠습니다.

물론 완전 비슷하게는 아니지만요.

먼저 저는 table-striped를 선호하므로 table class를 위와 같이 바꾸어 주었습니다.

Pagination 넣기!

게시판의 묘미는 페이지네이션이죠.

페이지네이션이 뭐죠???

페이지네이션이란 게시판의 하단에 위치한 일련의 숫자 버튼을 뜻합니다.

이 숫자 버튼 중 하나를 클릭하면 다음 페이지 혹은 이전 페이지의 게시물을 읽을 수 있도록 도와주는 것이죠.

Bootstrap에서는 세심하게도 페이지네이션 디자인까지 사용할 수 있도록 해놓았습니다.

그래서 위와 같이 코드를 table 태그 밑에다가 넣어주시면 아래와 같이 출력 됩니다.

어떤가요? ㅎㅎㅎ 그럴듯 한가요?

이왕 하는 김에 글쓰기 버튼도 넣어봅시다.

코드를 위와 같이 추가 합니다.

46번째 줄을 보시면 <a class=”btn btn-default”>글쓰기</a>를 넣을 것을 확인 하실 수 있을 겁니다.

그럼 크롬으로 다시 실행해봅시다.

왼쪽 편에 글쓰기 버튼이 생성되었습니다.

근데 새로 생긴 버튼으로 인해서 페이지네이션이 밑으로 쭉 빠져버렸네요.

그리고 글쓰기 버튼도 오른쪽에 위치하고 싶구요.

그렇다면 아래와 같이 <a> 태그의 class를 바꾸어 줍니다.

여기서 pull-right는 특정 태드를 강제로 오른쪽(pull-right) 혹은 왼쪽(pull-left)으로 붙일 수 있도록 도와줍니다.

그리고 생성된 버튼으로 인해 한 줄 통채로 생기는 공백을 제거할 수 있죠.

크롬으로 실행해볼까요?

어떤가요?

이전엔 페이지네이션이 글쓰기 버튼으로 인해서 저 밑에 있었는 데 pull-right class를 쓰니

그 공백이 줄어든 것을 보실 수 있을 겁니다.

근데 여기 또 문제가 있습니다.

크롬 화면 전체에 table이 가득 차니깐 뭔가 없어보입니다.

그렇다면 자동으로 좌/우 공백을 맞추어 주기 위해 container 라는 것을 써보도록 하겠습니다.

container 이건 뭔가요?

나중에 grid system 강좌를 진행할 때 자세히 설명 드릴 예정입니다.

다만, 여기서 간단히 설명 드리면 좌/우 여백을 자동으로 생성 해줘서

내가 만든 내용물들이 가운데 이쁘게 정렬이 이루어 집니다.

그래서 저는 아래 사진과 같이 10번째 줄에 <div class=”container”>를 적어주고

58번째 줄에 </div> 태그를 닫아주었습니다.

그럼 실행 해볼까요? ㅎㅎㅎ

짠! 아래와 같이 동일하게 나오시면 container가 정상 적용된 것입니다.

좌/우 여백이 생성이 되어 비교적 그럴듯한 게시판 디자인이 나왔습니다.

약간 스크롤의 압박이 있었지만 오랜만에 bootstrap 강좌라서 쫌 더 신경써서 작성해 보았습니다.

하지만, 부족한 면은 어디서나 발견할 수 있죠.

그래도 이 부족한 글을 읽어주시는 독자, 블로그 방문자 여러분들이 있기에 오늘도 이 밤 늦게 강좌 포스팅을 적습니다.

여튼 오늘도 긴 글 읽어주셔서 감사합니다.

[Bootstrap] 3. Helper 클래스를 이용하여 텍스트 꾸며보기
Bootstrap

[Bootstrap] 3. Helper 클래스를 이용하여 텍스트 꾸며보기

오늘은 부트스트랩에서 지원하는 helper 클래스를 이용해 텍스트를 꾸며보도록 하겠습니다.

먼저 텍스트를 꾸미려면 텍스트가 있어야겠죠?

그냥 지어내도 되지만 그냥 쉽게 dummy text를 복사 해서 사용해보도록 하겠습니다.

구글에서 dummy text라고 검색해보세요.

구글 검색 결과 첫 번째, 웹 사이트로 들어가서 더미 텍스트를 복사 하겠습니다.

 

– Dummy Text Generater 사이트 모습 –

이 사이트에 나와있는 일정량의 텍스트를 마우스로 드래그해 선택해서 복사합니다.

그럼 기존에 사용했던 부트스트랩 소스에서 <p> 태그를 이용해 붙여 넣기 합니다.

그리고 ALT + F2를 눌러 크롬으로 실행 해봅시다.

그러면 위와 같이 텍스트가 출력됨을 볼 수 있을 것입니다.

저는 예제를 잘 보일 수 있도록 body 태그를 text-align:center; 한 상태라서 가운데 정렬되어 보일 것입니다.

그럼 이번엔 텍스트에 생상을 입혀볼까요?

단순히 color css를 이용해서 적용가능하지만,

부트스트랩에서 사용가능한 class를 통해서 텍스트 색상을 바꿔보겠습니다.

이전 시간에 배웠던 버튼과 동일하게 부트스트랩에서는 primary, success, warning, info, danger 등으로 색상을 지원하고 있습니다.

p 태그에 class를 text-primary라고 입력 하고 크롬으로 실행 해 봅시다.

– 파란색으로 표현된 텍스트 모습 –

이번엔 success, warning, info danger로 표현해봅시다.

위 소스에서 보실 수 있듯

부트스트랩에서 텍스트 색상 표현은 text-xxxxx 식으로 진행됨을 알 수 있습니다.

크롬을 통해서 결과를 출력해볼까요?

첫 번째는 text-primary

두 번째는 text-success

세 번째는 text-warning

네 번째는 text-info

다섯 번째는 text-danger 입니다.

색상에 안목이 있으신 분들은 아마 아실겁니다.

앞서 버튼 색상 구현과 약간 다르다는 것을요 ㅎㅎㅎㅎ

# 색상 꾸미기 이외 텍스트 꾸미기 class들

이번엔 부트스트랩에서 제공하는 helper 클래스들 중 색상을 변경해주는 클래스 이외에 다른 꾸미기 방법들을 알아보겠습니다.

간단한 텍스트를 준비합니다.

– 간단 텍스트 예제 –

앞서 테스트 한 텍스트 보다 짧은 것으로 준비해보았습니다.

이렇게 짧은 텍스트를 준비한 이유는 텍스트가 어떻게 변화하는 지 잘 표현하기 위해서 입니다.

그럼 크롬으로 테스트 해봅시다.

– 크롬에서 P태그를 표현한 모습 –

이 기본 텍스트들을 제일 앞 단어만 대문자로 바꾸어 보겠습니다.

부트스트랩에서는 text-capitalize 라는 클래스를 이용하면

단어 하나하나 제일 앞에 있는 글자를 대문자로 변환이 가능합니다.

– text-capitalize 적용된 코드 – 

이를 크롬에서 테스트 해볼까요?

보시면 각 단어마다 제일 첫 글자만 대문자로 변환 되었습니다.

그럼 한글은요?

한글은 대소문자 구분이 없기 때문에 아무런 변화가 없습니다.

영문자 표현일 경우 각 단어의 제일 앞 글자만 대문자로 변환이 됩니다.

또는

abcdefg…

이런식으로 표현된 텍스트는 단어가 아님에도 불구하고 제일 앞글자인 a 만 대문자가 됩니다.

이번엔 소문자로 바꾸어 봅시다.

text-lowercase 를 적용하면 아래와 같은 결과가 출력 됩니다.

기본 텍스트와 동일한 영문 소문자로 결과가 출력 되었습니다.

이번엔 모든 텍스트를 대문자로 표현해볼까요?

text-uppercase를 소스 코드에 적어줍니다.

기존에 텍스트가 모두 소문자였는 데 이제는 모두 대문자로 출력됨을 알 수 있습니다.

이번엔 텍스트 정렬을 해봅시다.

보통 css에서는 text-align:left 혹은 right , center 를 통해서 정렬이 가능합니다.

부트스트랩에서는 이를 class로 적용이 되도록 구현이 되어있습니다.

그래서 굳이 특별한 css 코드 작성 없이 단순 html 태그에 class 적용만으로도 충분히 텍스트 정렬이 가능합니다.

위와 같이 소스코드를 적고 크롬으로 테스트 해봅시다.

– 왼쪽, 중앙, 오른쪽 정렬된 모습 –

이로서 부트스트랩으로 텍스트를 꾸미는 방법을 알아보았습니다.

그러면 부트스트랩이 어떻게 내부적으로 html 태그를 조정하는 지 알아봐야겠죠?

아래의 소스코드는 앞서 쓴 class가 어떻게 구현되어있는 지 나와있는 소스코드 입니다.

위 소스 코드를 보면 어떻게 텍스트를 조정하는 지 대략적인 감이 올 것입니다.

오늘도 엄청 길게 적었네요.

사실 부트스트랩이 어려운 부분이 없지만 UI 프레임워크인지라 코드와 출력결과를 같이 보여줘야 하기에 쫌 장황하게 적었습니다.

다음시간엔 table 관련 부트스트랩 기능에 대해서 알아보도록 하겠습니다.

긴 글 읽어주셔서 감사합니다.

안뇽~

[Bootstrap] 2. 부트스트랩 버튼 사용하기
Bootstrap

[Bootstrap] 2. 부트스트랩 버튼 사용하기

오늘은 부트스트랩 2번째 시간으로 버튼에 대해서 알아보도록 하겠습니다.

흔히 HTML에서 버튼을 표현할 때는 아래와 같이 표현합니다.

<button type=”button”>버튼</button>

이를 HTML 페이지에 넣어 봅시다.

– button 태그를 추가한 모습 – 

그리고 이를 브라우저로 표현 하면 아래와 같이 표현됩니다.

브라우저로 테스트 하실 때는 ALT + F2를 입력하시면 브라우저 선택 메뉴가 나오는 데 이때 크롬이나 IE 어느것으로 띄우셔도 무방합니다.

한번 테스트 해보세요.

이는 브라우저에 따라 달리 표시가 될 수 있는 데 한국에서 많이 쓰는 Internet Explorer로 표현해볼까요?

어떤가요? ㅎㅎㅎ 비슷한거 같으면서도 약간 차이가 있죠?

어쨋든 기본 모양새는 비슷합니다.

근데, 보시다시피 사용자들은 이렇게 이쁘지 않은 버튼 모양을 선호하지 않습니다. 이쁜 버튼을 아주 좋아 하죠.

그러나, 우리와 같은 초보나 개인 개발자는 디자인을 이쁘게 하기 힘듭니다. 디자인에 안목이 별로 없기 때문이죠. 그래서 간단하게 부트스트랩의 힘을 빌리면 나름 이쁜 버튼을 구현할 수 있습니다.

그럼 부트스트랩으로 적용해볼까요?

부트스트랩으로 버튼을 꾸미는 방법은 간단합니다. button 태그에 class 를 적용해주는 것이죠.

clsss=”btn”을 추가 해줍니다.

그리고 출력 결과를 볼까요?

위 이미지에서 왼쪽은 기본 HTML 버튼이고

오른쪽은 Bootstrap이 적용된 버튼입니다.

단순 색상이 회색으로 적용된 버튼이죠.

부트스트랩 버튼의 특징은 버튼 끝이 둥글둥글하다는 것입니다.

근데 여러분도 느끼시겠지만, 색상이 마음에 들지 않을 겁니다.

색상은 원하시는 색상을 적용해도 되지만 우리는 부트스트랩을 공부하므로 부트스트랩에서 기본으로 제공하는 색상으로 버튼을 구현해봅시다.

# btn-primary 버튼

btn-primary 버튼은 파란색으로 구성된 버튼을 뜻합니다.

나중에 알게되겠지만, 부트스트랩에서는 primarysuccesswarninginfodanger 등으로 색상을 구분해놓았습니다.

그러면 일단 btn-primary를 구현해봅시다.

clsss 속성 부분에 btn btn-primary를 추가 해주세요.

그러면 위와 같이 버튼이 표현됩니다.

어떤가요? 쫌 이뻐졌는가요? ㅎㅎㅎㅎ

# btn-success, btn-info, btn-warning, btn-danger 버튼 구현하기

앞서 success, info, warning, danger도 있다고 했죠?

그럼 이들도 같이 구현해 봅시다.

위 소스를 보시면 btn btn-xxxxxx 이런식으로 진행된다는 것을 아실 수 있을 겁니다.

위와 같이 입력하시고

ALT + F2 를 눌러 크롬으로 실행해봅시다.

색상이 정말 이쁘죠? ㅎㅎㅎ

이들이 바로 부트스트랩에서 제공하는 기본 색상들입니다.

사실 우리가 색상을 선택해도 되지만, 저는 개인적으로 디자인에 막눈이라 제가 선택한 색은 영 별로 더라구요. ㅎㅎㅎ

아 그리고 한가지를 빠뜨렸는데

btn-default라는 것도 있습니다.

위 코드를 추가하고 크롬으로 실행해볼까요?

3번째 default 버튼이 생성되었습니다.

# 버튼 사이즈 조정하기

이번에는 부트스트랩에서 지원하는 버튼 사이즈 조정에 대해서 알아보겠습니다.

부트스트랩에서는 btn-lg, btn-sm, btn-xs 를 통해서 버튼 크기를 조정할 수 있습니다.

원한다면 개별적인 css를 적용해서 크기를 조절할 수 있습니다.

그럼 btn-lg부터 적용해볼까요?

위와 같이 코드를 넣고 브라우저에서 테스트를 해봅시다.

첫번째 줄에 있는 버튼들은 일반적인 부트스트랩 버튼 크기이고 두번째 줄은 btn-lg가 적용된 버튼들 입니다.

눈으로 봐도 확연히 크기가 커진것을 보실 수 있으실겁니다.

그럼 btn-sm과 btn-xs도 구현해보죠.

– btn-sm 적용 –

– btn-xs 적용 –

그럼 결과를 출력해볼까요?

기본, btn-lg, btn-sm, btn-xs 까지 한번에 모아서 비교해 봅시다.

첫번째 줄은 기본크기

두번째 줄은 btn-lg 크기

세번째 줄은 btn-sm 크기

네번째 줄은 btn-xs 크기 입니다.

이처럼 특별히 css 작업 없이 아주 이쁜 부트스트랩 버튼을 구현해보았습니다.

다음 시간엔 버튼과 비슷한 방식으로 텍스트를 부트스트랩으로 꾸미는 방법에 대해서 공부하도록 하죠.

오늘도 긴 글 읽어주셔서 감사합니다. ^.^

[Bootstrap] 1. 부트스트랩 시작하기
Bootstrap

[Bootstrap] 1. 부트스트랩 시작하기

Click the link to go to the site: 블로그 내용보러가기

===

1. 부트스트랩이란 무엇인가?

부트스트랩은 트위터(twitter)에서 개발한 UI 라이브러리 입니다.

 부트스트랩을 탄생한 이유

첫번째, 웹 사이트를 개발할 때 웹 사이트 디자인 때문에 개발 시간이 길어지는 문제를 해결하기 위해 만들어졌습니다.

두번째, 모바일 환경에 적합한 반응형 웹 사이트 개발을 위해 만들어졌습니다. 

개인적으로 생각하기에 가장 큰 이유는 첫번째 인것 같습니다.

정말 웹 사이트를 개발할 때 웹 사이트의 실제 기능 구현보다 디자인을 구현하는 데 시간이 엄청 오래 걸립니다. 웹사이트 기능이 더 중요함에도 불구하고 사용자들은 일단 웹 사이트 디자인을 보고 이 사이트의 첫 인상을 구축하기 때문이죠.

어느정도 규모가 있는 회사들은 디자이너에게 맡겨 유려한 웹 사이트 디자인을 구축할 수 있으나 개인 개발자 혹은 스타트 업에서는 디자이너의 힘을 빌리기가 힘들기 때문에 수준급의 웹 사이트 디자인을 뽑아내기가 힘들어 집니다.

그래서 부트스트랩이 각광 받는 이유라고 볼 수 있죠.

2. 부트스트랩 공식 사이트 방문하기

부트 스트랩 공식 사이트 주소는 다음과 같습니다.

http://www.getbootstrap.com

영문으로 된 사이트 이므로 영어 울렁증이 있으신 분들은 어려우 실 수도 있습니다.

그래서 한글화 번역된 사이트도 알려드립니다. 단, 이 사이트는 부트스트랩 공식 사이트에서 파생된 한글 사이트가 아님을 알려드립니다. (일반 개인 사이트)

http://bootstrapk.com/

3. 부트스트랩 공부를 위한 프로젝트 생성

부트스트랩 공부를 위해 웹스톰을 실행합니다.

– 웹스톰  첫 화면 –

첫 화면에서 Create New Project를 선택해서 새 프로젝트를 만들어 줍니다.

– 프로젝트 생성 화면 –

프로젝트 생성화면 왼쪽 메뉴에 보면 어러가지 프로젝트 생성을 할 수 있는 템플릿이 있습니다.

우리는 공부 차원에서 Twitter Bootstrap 템플릿을 사용하지 않고

Empty Project를 선택해 새 프로젝트를 생성 할 것입니다.

저는 프로젝트 이름을 bootstrapStudy라고 명명 하겠습니다.

그리고 Create 버튼을 클릭해 프로젝트를 생성합니다.

– 프로젝트 생성 후 첫 화면 –

프로젝트가 생성되면 위와 같이 화면이 나오게 됩니다.

프로젝트 주 폴더 명도 앞서 bootstrapStudy라고 설정했기 때문에 bootstrapStudy라고 출력됩니다.

4. 프로젝트 폴더 구성하기

HTML 프로젝트를 만들었을 때 가장 먼저 해야할 것은 폴더 구성을 하는 것입니다.

하지만, 이것은 어렵지 않습니다. 간단하게 먼저 말씀 드리면 CSS와 자바스크립트를 관리할 폴더를 생성해주는 것이죠.

그럼 만들어볼까요?

먼저 왼쪽 프로젝트 메뉴에서 bootstrapStudy라는 부분에 마우스를 올려 놓고 마우스 오른쪽 버튼을 클릭해주세요.

Directory 항목을 선택해 폴더를 만들어줍니다.

첫번째 폴더 명은 css로 적어주고 OK를 눌러주세요.

두번째 폴더도 동일한 방식으로 만들되 다만 이름을 js 라고 입력해주고 OK를 클릭합니다.

css 폴더에는 css 파일만 담을 예정이고 js는 자바스크립트 파일만 담을 예정이라 이렇게 폴더 구성을 해줍니다.

– 폴더 구성이 완료된 모습 –

그 다음 index.html을 추가 해줄 것입니다.

다시 프로젝트 메뉴에서 마우스 오른쪽 버튼을 클릭해서 New에서 HTML File을 선택해줍니다.

이름은 index라고 적어주고 OK를 눌러줍니다.

이때 이름 부분에 index.html이라고 입력하셔도 되고 그냥 index라고 입력하셔도 됩니다.

– 모든 구성이 완료된 모습 –

이제 기본 프로젝트 구성은 모두 완료가 되었습니다.

다음 단계로 넘어가볼까요?

5. 부트스트랩 라이브러리 추가 하기.

부트스트랩을 쓰기 위해선 라이브러리를 우리 프로젝트 내에 추가 해줘야 합니다.

부트스트랩 라이브러리는 getbootstrap.com 공식 홈페이지에서 다운로드 할 수 있습니다.

공식 홈페이지에 가셔서 Download Bootstrap을 클릭합니다.

이 화면에서 왼쪽에 보시면 Download Bootstrap을 클릭해줍니다.

그러면 압축된 파일을 다운로드 받게 될 것입니다.

다운로드 받은 파일이 압축 되어 있으므로 압축을 풀어주세요.

어떤 압축 프로그램을 쓰셔도 동일하게 풀 수 있으나 저는 윈도우 기본 압축 풀기를 시행하겠습니다.

– 압축 해제된 폴더의 모습 –

부트스트랩은 CSS, 자바스크립트(js), 폰트로 구성이 되어 있습니다.

그럼 이 파일들을 이제 프로젝트로 옮겨 봅시다.

사실 폴더 전체를 옮겨도 무방하나 배우는 과정이니 정석적인 방법으로 접근하겠습니다.

 파일들을 마우스로 드래그 해서 선택해주세요.

선택한 파일들을 모두 프로젝트의 css 폴더에다가 드래그앤 드롭 시켜줍니다.

단순히 ctrl + c & ctrl + v 하셔도 무방합니다.

js 폴더에 있는 것들도 동일한 방식으로 옮겨주세요.

파일 이동에 관한 확인 창이 나오면 특별히 수정할 것 없이 그냥 OK를 클릭합니다.

이번엔 폰트 폴더 옮기기 입니다.

앞서 html 프로젝트에서 폰트 폴더는 만들어주지 않았죠. ㅎㅎㅎㅎ

그래서 폴더 통채로 옮겨보도록 하겠습니다.

앞서 드래그앤 드롭 방식으로 옮겨주되 다만, 이번엔 bootstrapStudy 주 폴더에다가 옮겨주세요.

파일 이동 확인 창에서 특별한 수정 없이 OK를 클릭 합니다.

라이브러리가 모두 옮겨진 프로젝트의 모습입니다.

위와 같이 모두 옮겨져야 부트스트랩 공부를 하심에 불편함이 없을 것입니다.

6. index.html에 라이브러리 추가 하기

추가된 라이브러리도 HTML에서 사용하려면 index.html 내에 해당 라이브러리를 추가하겠다는 명령이 필요합니다.

– 빈 상태의 index.html 모습 –

위와 같이 빈 상태에서는 프로젝트를 실행해도 부트스트랩이 동작하지 않습니다.

그럼 부트스트랩을 추가 해볼까요?

먼저 <head> 태그에 <title> 태그 밑에 <link rel=”stylesheet” href=”css/bootstrap.css”> 라고 추가 해줍니다.

이는 부트스트랩에서 제공하는 css 파일을 사용하겠다는 뜻이죠.

그 다음 <body> 태그 마지막엔

1
<script type=”text/javascript” src=”js/bootstrap.js”></script>
cs

를 추가해줍니다.

이는 부트스트랩에서 필요한 자바스크립트를 사용하겠다는 뜻입니다.

근데 여기서 스크립트 파일을 body 태그 마지막에 적어준 이유는

브라우저가 스크립트 파일을 읽는 데 시간이 조금 걸리기 때문에 제일 마지막에 로드 하기 위해

body 태그 마지막에 적어준 것입니다.

7. jQuery(제이쿼리) 추가 하기.

부트스트랩의 bootstrap.js 는 내부적으로 순수 자바스크립트가 아닌 jQuery로 구성되어 있습니다. 그래서 반드시 제이쿼리를 추가 해줘야 부트스트랩을 사용할 수 있죠.


1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>cs
HTML

이 부분도 같이 추가 해줍니다.

이 때 주의 사항은 bootstrap.js 보다 앞에 적어줘야 합니다.

앞서 설명했듯이 부트스트랩 자바스크립트는 제이쿼리가 없으면 동작을 하지 않기 때문에 제이쿼리를 먼저 로드 시킨 후 bootstrap.js 를 로드해야 합니다.

– 모든 것이 적용된 index.html 모습 –

이로서 모든 것이 정상적으로 적용되었습니다.

이제 부트스트랩 공부에 있어 문제될 것이 없게 되었습니다.

[Bootstrap] 부트스트랩이란?
Bootstrap

[Bootstrap] 부트스트랩이란?

Click the link to go to the site: 블로그 내용보러가기

■부트스트랩 탄생배경

웹 페이지의 개발이 진행 될 때, 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 보통은 개발 시작전에 어느정도의 표준을 정해놓고 작업을 진행 하기도 한다. 그러나, 여러 이유로 이런 작업이 진행되지 않은 경우 각 개발자들이 개발한 결과물이 제각각이기 때문에, 페이지의 각 부분 또는 기능별로 부분적인 작업을 진행한 후 병합 하는데 있어서 상당한 어려움이 있다. 이런경우, 심지어는 표준을 정하는 단계부터 다시 개발에 들어가기도 한다.

 

 

 트위터에는 수많은 직원들이 각자가 맡은 부분의 프론트엔드 개발을 진행하기 때문에, 위와 같은 일관성 유지에 관한 문제에 항상 직면하곤 했다. 위와 같은 문제점을 해결하고자 트위터의 직원인 Mark Otto와 Jacob Thornton은 1년동안 업무외 시간과 주말에 프로젝트를 진행하면서, 정형화된 인터페이스 형태의 부트스트랩의 초기버전인 Twitter Blueprint를 개발했다. 초기 버전 개발 후 사내 개발자들에게 공개했는데, 폭발적인 반응을 얻었다. 이후로 점차 많은 개발자들이 프로젝트에 투입 됐고, 하나의 프레임워크 형태로 발전했다. 

Twitter Blueprint 프로젝트가 부트스트랩이라는 이름을 가지게 된 것은 2011년에 깃허브에 오픈소스로 발표되면서 부터 이다. 2011년 8월에 오픈소스로 등록 된 부트스트랩은 2014년 6월을 기준으로 깃허브에서 가장 인기있는 프로젝트가 된다. 글을 쓰는 지금의 시점에도 깃허브에 부트스트랩과 관련된 프로젝트는 수백개에 이르며, 수많은 개발자들에 의해 꾸준히 발전하고 있다.

■부트스트랩이란?

 

부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다.

‘프레임워크’ 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며, 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다. 따라서, 우리는 ‘부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.’라고 말 할 수 있다.

 

부트스트랩에 열광하는 이유는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고, 입맛에 따라 재사용 할 수 있기 때문이다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인이 뚝딱 만들어진다.

게다가 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원한다. 이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없다. 크로스 브라우징을 위한 각종 핵도 들어 있기 때문이다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 “그리드 시스템”을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있다. 즉 ‘반응형 웹 디자인’을 지원한다는 의미이다.

추가적으로 이게 오픈소스이며, 상업적으로 이용이 가능하다. 브라우저에 bootstrap template 키워드로 검색하면 어마어마한 양의 부트스트랩 템플릿이 존재하고, 무료로 제공하는 경우도 있으나 유료로 판매하는 경우도 많다. MIT 허가서를 사용하는데, 재배포 면에서는 GPL보다 휠씬 자유로운 라이선스이다.

 (여담이지만, 필자는 html5과 css3를 기반으로 개인적인 페이지 레이아웃을 구성하고 디자인 해보고 나서, 부트스트랩을 접했다. 그 이후론 절대로, 더욱더 부트스랩을 사용하고 있다. ㅎㅎ 예쁘고 세련된 페이지 만들기 진짜. 어렵다. 게다가 그에 맞는 UX,…,각종이슈 등 고려해야 할 것들이 태산이다. 그렇다고 해서, 무작정 부트스트랩만 사용하라는 이야기는 절대 아니다. 미래의 백엔드 개발자로서 프론트엔드 개발자들은 존경의 대상이다.)

출처: http://ict-nroo.tistory.com/21 [공대생의 개인공간]