<Bootstrap>부트스트랩 (Bootstrap)

지금 학원에서 프로젝트를 중인데 게시판 형식의 페이지를 만들어야 해서 테이블 태그를 이용해서 화면을 꾸며야 한다. 물론 꾸밀수는 있지만 개인적으로 가장 귀찮고 손이 많이 가는 블록이라 꺼려했었다... 그런데 주위에서 그럼 부트스트랩 써보면 되지 않냐고 해서 강의를 듣게 됬는데 간단하게 정리해보겠다.

 

부트스트랩이란?!

 

 

간단히 내 식대로 정리하자면

"이미 남이 정리해놓은 CSS 를 갖다가 쓰는 것이다."

제이쿼리와도 매우 비슷한데 그 대상이 HTML CSS 로 바뀐것이다.

이 한마디로 표현 할 수 있겠다 간단히 사용방벙과 부트스트랩을 이용해서 버튼하나를 나타내 보겠다.

 

검색창에 bootstrap cdn 이라고 입력한 뒤에 

 

 

화면이 보이는 곳으로 간뒤 

 

 

CDN 링크를 복사 해준뒤에l

 

 

 

 

편집기를 열고 링크를 걸어주면 된다. 물론 다운받아서 다운받은 경로를 작성해주어도 되고 cdn 링크를 이용해도 된다

 

그리고 부트스트랩 사용법은 간단한데 그것은 바로 다른 사람이 이미 정해둔 CSS파일들이 있기 때문에 그에 해당하는 클래스명만  입력해주면 된다. 나도 처음이어서 아직 사용버은 미숙하지만 위의 화면처럼 a 태그에 클래스이름을 저렇게 붙여주면 

 

이런식으로 알아서 스타일이 먹어져서 나온다 

 

간단히 정리하자면 

 

!. 어떤 클래스 이름이 어떤 스타일을 먹고 있어야지 쓰기 편할것 같다. 

2. 알고 있다면 HTML, CSS 에 소요되는 시간을 많이 줄일 수 있을 것 같다.

3. 아직 강의 초반부여서 정해져있는 스타일에서 조끔 바꾸고 싶은 부분이 있을 떄 바꿀 수 있는지 궁금하다 

 

요정도로 정리 할 수 있겠당><!

 

그리고 버전의 차이가 있는데 사진처럼 나는 3버전을 사용했는데 3버전과 4버전의 차이는 화면에서의 길이 단위가 3은 "PX" 4는 "EM"  그리고 4 버전은 익스플로러 8 버전 이하 부터는 지원을 하지 않는다.

 

그렇기 때문에 4가 더 가볍다고 볼 수 있고 좋아 보이는데 왜 3를 쓰냐고하면 여러 템플릿혹은 플러그인들이 아직까지는 3 버전으로 더 쓰이고 있기 때문에 나도 일단은 3를 사용해주도록 하겠다.