이번에는 부트스트랩에 대해 한번 알아봐요!
부트스트랩 한국어 페이지 에서는 다음과 같이 정의하고 있습니다.
"부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS1 프레임워크입니다."
부트스트랩은 CSS/Java Script가 합쳐진 라이브러리입니다.
이 부트스트랩을 이용하면, Html로 다져진 웹사이트에 레이아웃등 꾸밀 수 있죠.(용이 해짐)
부트스트랩이 오픈소스로 이루어져있기 때문에, 많은 소스들과 기법들이 널려있어요! 웹사이트 꾸미기에 유용하겠죠?
부트스트랩에 정의되어 있는 스타일리스트에는 약 7000여개의 라인이 있기 때문에, 여기서 그냥 가져다 쓰시면 되고(복붙...) 내 맘대로 고쳐 쓰면 돼요!
특히 어떤 기기로 접속을 하든 그에 맞춰주는 반응형이라는 말 들어 보셨나요? 바로 그! 반응형을 지원 한다는게 큰 장점인거 같습니다!
http://bootstrapk.com/ <== 한국어 부트스트랩
1. 부트스트랩 적용법!
우선 나의 홈페이지에 적용을 해줘야 사용할 수 있겠죠?
일단 부트 스트랩 사이트에 들어 주세요.
그런 다음에는 부트 스트랩을 다운로드 받아줍니다.
그러면, 압축된 파일이 다운로드 되었을 것 인데요.
압축을 풀어 줍니다.
그 다음 bootstrap폴더에 가보면 CSS , JS , fonts 라는 폴더가 있는데, CSS에 들어가서 모두 복사!
모두 내 개인 홈페이지의 CSS/Html 탭에 들어가서, 업로드 해줍시다.
(저는 Tistory를 기본으로 합니다.)
이렇게 다 넣으시고, 저장 클릭 하면! 적용완료 입니다.
2. 부트 스트랩 사용법.
사용 하기 위해서 우선 코드를 이해하고, 종류도 알아야합니다.(내가 필요한게 뭔지 생각!)
물론, 부트스트랩은 제가 CSS와 JS를 사용한다고 했는데, 저는 CSS를 사용하겠습니다.
아까, 자신의 티스토리 관리도구에 가보면, CSS/Html관리에 가셔서 원하는 자리에 원하는 소스코드를 입맛대로 바꿔 사용하심 됩니다.!
제가 저번에 이 부트스트랩을 적용하게 되면, 기존의 버튼에 사용되던 디폴트(기본)값이 휜색으로 변경된다고 했죠?
그걸 설정하기 위해 이런 코드가 사용됩니다.
<버튼 코드>
<button class="btn btn-default" type="submit">Button</button>
일반 적인 예시!
<a class="btn btn-default" href="#" role="button">Link</a>
<a를 사용하면 href 안의 링크를 적어 사용할 수 있고, Link라는 부분에 버튼에 나올 이름을 선택 해준다면 멋진 버튼이 만들어 질것 입니다.
특히, 저기 디폴트 부분에는 다른 단어를 사용해 색깔을 구현할 수 있습니다.
이와 같이 많은 소스코드들을 해당 부트스트랩 본 사이트에서도 보실 수 있습니다.( 해당 사이트에 CSS페이지와 JS페이지가 있는데, 저는 CSS를 쓰겠습니다. 어려워요..)
http://www.w3schools.com/ <==
이사이트에 가보 시면, 여러가지 정보와 적용법들이 많이 나와 있습니다.
참고 해 두시길 바랍니다.
다음 시간에는 코드 사용법과 이미지 적용법 및 라이브러리 코드를 알아봅시다.!
이전글 : http://limetimeline.tistory.com/6
다음글 : http://limetimeline.tistory.com/8
- Java Script [본문으로]
