‘부트스트랩’ 활용 웹디자인 실습 – 온오프믹스

강력한 UI 프레임워크 ‘Bootstrap’

부트스트랩은 트위터의 개발자 Mark Otto와 Jacob Thornton이 개발한 오픈소스 UI 프레임워크입니다. HTML5와 CSS3, 자바스크립트 툴킷으로 구성되어 있으며, 웹디자인에 필요한 모든 요소들이 템플릿으로 미리 만들어져 있어 이를 선택해 웹사이트를 디자인할 수 있게 해주는 툴입니다.

부트스트랩을 이용하면 웹개발자는 디자이너의 도움없이도 멋진 반응형 웹사이트를 디자인하고 개발할 수 있습니다. 이러한 편의성과 뛰어난 기능으로 부트스트랩은 발표 이후 깃허브에서 최고의 인기를 누리고 있으며, 관련 프로젝트만 해도 수백 개에 이르고 계속 추가되는 추세입니다.

“디자이너 없이도 멋진 웹사이트를 만들 수 있다면 얼마나 좋을까요.” 웹개발자들은 늘 이런 상상을 해보겠죠. 코딩을 통해 기능을 구현할 수 있지만 최종 사용자에게 보여질 UI 디자인은 혼자서는 해결할 수 없는 일이었습니다.

 

부트스트랩은 이런 고민의 해결사로 등장해 현재 큰 인기를 누리고 있는 웹디자인 프레임워크입니다. 부트스트랩은 웹디자인에 필요한 거의 모든 요소를 담고 있는 스타일시트가 템플릿으로 제공되며 자바스크립트도 제공합니다. 이 스타일시트를 선택해 이용하기만 하면 멋진 웹사이트를 만들 수 있습니다. 물론 사용자가 원하는 스타일로 맞춤화할 수 있는 기능도 제공됩니다.

 

웹개발자에게는 디자이너의 능력을 제공해주고, 디자이너에게는 스타일시트 제작에 드는 시간과 노력을 크게 줄여줍니다. 이 때문에 현재 많은 웹사이트가 부트스트랩으로 개발되고 있습니다.

 

는 웹개발자, 디자이너, 웹관리자 등을 대상으로 한 부트스트랩 기초 입문 과정입니다. 기본적인 부트스트랩의 기능과 특징, 구조를 이해하는 것을 넘어 실제 웹디자인 제작 연습까지 포함하고 있어 중급 수준의 활용 지식까지 습득할 수 있도록 구성했습니다.

 

정말 쉬운 웹디자인 프레임워크 부트스트랩의 세계에 도전해보세요.

• 부트스트랩 활용 웹디자인 실습

• HTML, CSS의 기초를 알고있는 디자이너, 개발자
• 디자이너없이 깔끔한 홈페이지를 만들고자 하는 개발자
• 빠르게 웹페이지를 개발하고자 하는 분
• 워드프레스 등과 연계하여 UI를 손쉽게 꾸미고자 하는 모든 분

• 인트로
• • 강좌소개
  • 부트스트랩이란?

• 강의내용
• • 부트스트랩의 장점과 단점
  • 부트스트렙의 특징
  • 부트스트랩 프로젝트
  • 부트스트랩 환경 구축
  • 부트스트랩 실습 1
  • • 부트스트랩 파일 구조
    • 부트스트랩 레이아웃
  • 부트스트랩 실습 2 ? 기초 CSS
  • 부트스트랩 실습 3 ? 부트스트랩 컴포넌트
  • 부트스트랩 실습 4 ? 부트스트랩 자바스크립트
  • 메인페이지 제작하기
  • 서브페이지 제작하기
  • 각종 플러그인 적용하기

• 최종리뷰
• • 실습 결과물 리뷰
  • 질의 및 응답

• 윤가희 : IT 전문서적 출판사 위키북스 테크니컬 에디터,  애플리케이션 개발사 모빌스 대표.
• 위키북스에서 트위터 부트스트랩 서적 검수. 부트스트랩으로 위키북스 사이트 구축.
• 기타 다수의 부트스트랩 기반 사이트 구축 및 강의

• 실습 과정이 포함되어 있어. 수강시 인터넷이 가능한 노트북을 반드시 지참하셔야 합니다.
• 수강생 전원 교재 제공. “트위터 부트스트랩” ? 위키북스
• 필수 소프트웨어
• • 에디터툴 : 압타나(이클립스 플러그인 또는 스탠드얼론)
  • 브라우저 : 크롬, 파이어폭스