|
강의 목록은 Bootstrap! 
이번 강의는 이두희님께서 처음으로 육성으로 강의를 해주셨습니다. 자신은 코딩으로 먹고 살아서 말하는 것이 서툴다고 하셨는데 중간중간에 혼잣말도 하시고 강의하는 내내 재밌게 들을 수 있었어요!!  강의 시간은 위의 그림과 같이 42분이나 되지만 저는 개인적으로 육성으로 진행하시는 강의가 더 좋았습니다. 사실, 이전 강의에서 만들었던 페이지는 홈페이지를 만들었다고 하기에는 너무 부실한 디자인이었습니다. 그래서! CSS를 조금 덜 고생하고 더 이쁘게 만들 수 있는 것이 바로 부트스트랩입니다. 부트 스트랩에 앞서, 같은 디자인이 반복되어야 할 때에는 "id" 대신 "class"를 사용하고 CSS에서는 "#" 대신 클래스명 앞에 "."을 붙이면 됩니다. http://getbootstrap.com/ 부트스트랩 영문 사이트 http://bootstrapk.com/BS3/ 부트스트랩 한국어 사이트  위의 사이트에 들어가시면 부트스트랩에 관한 자세한 설명과 사용방법, 그리고 참조할 수 있는 소스들이 있습니다. 영문 사이트가 더 최신이므로 영문으로 읽는 것이 익숙하시면 영문판 사이트를 좀 더 권장합니다. 
사이트 상단에 보시면 "Components" 탭이 있습니다. 아래로 내려가 보면 Bootstrap CDN 이라는 링크가 있습니다. 이 내용을 Copy하셔서 HTML의 <head> 태그에 복사시켜주면 부트스트랩을 사용하실 수 있습니다. 링크에 "//"로 시작하는데, CSS가 안먹히면 "http://"로 변경하시면 됩니다. 이제 부트스트랩을 시작할 준비가 되었습니다. Components 탭에서 Navbar, Well 등의 예제와 소스들을 이용하여 홈페이지의 화면을 꾸밀 수 있습니다. 
위의 그림은 Navbar의 예제입니다. 이 소스를 <body>태그에 붙여넣으셔서 사용하고 싶으신 대로 수정해서 사용하면 됩니다. 다음은 "CSS" 탭의 Grid System이라는 것이 있습니다. 이 기능이 부트스트랩에서 가장 중요한 기능이라고 합니다. 화면을 특정 영역으로 잘라서 꾸미기 편하게, 채우기 편하게 사용가능한 것입니다. 
예를들면, 위의 그림의 클래스 명마다 각자의 위치가 다른 것을 볼 수 있습니다. 저 클래스들을 잘 사용하면 원하는 위치에 쉽게 배치해서 사용할 수 있는 것입니다. "."은 클래스를 나타내기 위한 표시이므로, class명을 줄 때 반드시 제외해서 적용하시기 바랍니다. col-md-6 col-md-offset-3에서 숫자를 변형시키면 원하는 크기와 위치를 조정할 수 있고, md는 미디움의 약자인데 홈페이지에 자세히 설명되어 있으니 참조바랍니다. 이 내용들을 기반으로 첫 시간에 만들었던 메인 페이지를 만들었습니다. 
정말 많이 공들이지 않아도 이렇게 어느정도 홈페이지를 만들었다 할 수 있는 디자인이 나왔습니다!! 앞 시간에 만들었던 페이지들과 비교를 해봅시다. 
위 그림은 첫 시간에 MockingBirds로 만든 페이지 디자인입니다.
그리고 위 그림은 첫 시간에 만든 것을 보고 HTML과 CSS만으로 틀을 따라 만든 것 입니다. 이렇게 비교해서 보니 부트스트랩이 정말 편하게 사용할 수 있는 언어인 것 같습니다.  나머지 페이지들도 꼭 만들어 보라는 말씀을 남기며 강의가 끝났네요. BUT!! 여기에서 큰 단점이 있습니다. 저렇게 같은 예제들을 복사해서 쓴다면 모든 페이지의 디자인 구성이 똑같다는 것입니다. 이를 방지할 수 있는 방법이 있습니다. 
http://bootswatch.com/ 페이지에 들어가면 무료로 부트스트랩의 테마를 사용할 수 있습니다. 이 것을 이용하면 다른사람들과 같은 디자인이 되는 것을 조금이나마 피할 수 있겠죠? 이번 강의는 처음 접하는 Bootstrap을 배워서 후기가 내용정리가 되어버렸네요. 다른 분들도 자세히 올리시는 것 같아서 별 문제가 되지 않을 것 같으니 정리겸 후기겸 포스팅을 하게 되었습니다. |
