bootstrap
-
[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌Web/AngularJS 2016. 1. 15. 16:52
AngularJS 부트스트랩(Bootstrap) 1. ng-app 지시자를 이용한 부트스트랩 AngularJS 웹 app이 되는 조건은 단순히 Script 태그로 angular.js 파일을 로드하는 것으로 충족되는 것이 아닙니다. 특정 태그에 ng-app 속성을 추가해서 AngularJS 부트스트랩을 적용해야 합니다. 아래 예제는 간단한 AngularJS 웹 app 예제입니다. * simpleajs.html 123456789101112 Simple Angular JS App Hello {{name}} world ! Colored by Color Scriptercs ng-app은 AngularJS 웹 app의 범위를 제한하는 지시자이자 제한자입니다. ng-app 지시자를 추가한 노드가 루트 노드가 되어 하..
-
[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 3) - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 11. 16:22
연결된 강좌이므로 아래 링크대로 따라주시면 이해가 더 쉬우실 것 입니다. =========================================== 1. 개발환경설정 2. CSS & Bootstrap 3. CSS 선택자(Selector) 4. CSS 요소(Element) 5. Bootstrap Part. 1 6. Bootstrap Part. 2 7. 실전 예제 - 개인용 포트폴리오 페이지 제작 8. Python & Django 9. Django 10. 장고(Django) 프로젝트 11. JavaScript & jQuery 12. 실전 웹 프로젝트(예제) 13. 실전 웹 프로젝트(Timeline) Server Part.114. 실전 웹 프로젝트(Timeline) Server Part.215. 실전 웹 ..
-
[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 2) - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 11. 15:13
이전 장에 이어서 이번 장에서는 타임라인(Timeline) 서비스에 대해 클라이언트를 구현하겠습니다. 연결된 강좌이므로 아래 링크대로 따라주시면 이해가 더 쉬우실 것 입니다. =========================================== 1. 개발환경설정 2. CSS & Bootstrap 3. CSS 선택자(Selector) 4. CSS 요소(Element) 5. Bootstrap Part. 1 6. Bootstrap Part. 2 7. 실전 예제 - 개인용 포트폴리오 페이지 제작 8. Python & Django 9. Django 10. 장고(Django) 프로젝트 11. JavaScript & jQuery 12. 실전 웹 프로젝트(예제) 13. 실전 웹 프로젝트(Timeline) Se..
-
[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 1) - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 9. 14:48
이제 클라이언트(Client)를 개발할 차례입니다. 연결된 강좌이므로 아래 링크대로 따라주시면 이해가 더 쉬우실 것 입니다. =========================================== 1. 개발환경설정 2. CSS & Bootstrap 3. CSS 선택자(Selector) 4. CSS 요소(Element) 5. Bootstrap Part. 1 6. Bootstrap Part. 2 7. 실전 예제 - 개인용 포트폴리오 페이지 제작 8. Python & Django 9. Django 10. 장고(Django) 프로젝트 11. JavaScript & jQuery 12. 실전 웹 프로젝트(예제) 13. 실전 웹 프로젝트(Timeline) Server Part.114. 실전 웹 프로젝트(Tim..
-
[WebPage] 2. 실전 예제 - 개인용 포트폴리오 페이지 만들기 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 20. 15:39
Intro. 지금까지 CSS, Bootstrap을 알아보았습니다. 여태까지는 각각의 요소를 알아보는 시간이었다면, 이제는 직접 실습을 진행해보겠습니다. 지금부터는 개인을 위한 포트폴리오 페이지를 만들어 보도록 하겠습니다. 1. 프로젝트 이해 이 프로젝트는 간단한 개인용 포트폴리오 웹 페이지 입니다. 2. 프로젝트 생성하기 - File -> New -> Project -> Web Project를 선택하여, default Project를 선택합니다. - 프로젝트 명은 Mini-proj 으로 지정합니다. - 이전 챕터에서 다운받아논 bootstrap 파일들을 프로젝트에 Drag & Drop 해서 옮겨둡니다. - 다음 프로젝트 오른쪽 클릭하여 New from template -> HTML -> Blank Fil..
-
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 20. 13:42
5. 부트스트랩에서 제공하는 Base CSS 5-1. 타이포그래피 (Typography) 타이포그래피는 문자에 관한 디자인 관련된 부분입니다. 1) 텍스트 강조하기 - 웹 화면의 텍스트 중 강조를 위한 여럿 요소들을 제공하고 있습니다. - 문단 내에서 특별한 문장을 눈에 띄게 해주는 lead, 텍스트 중에서 강조가 필요한 단어에 이탤릭이나 볼드 속성을 부여하는 strong, em이 있습니다. 2) 텍스트 눈에 띄게 하기 (lead) - lead 클래스는 문단 내에서 눈에 강조를 하여 눈에 띄게 하는 효과를 줍니다. - 사용법은 또는 태그로 감싸 준 뒤, 해당 태그의 클래스를 "lead"로 지정해주면 됩니다. 아래 예제를 통해 확인 가능 합니다. 12345 This is normal text. This i..
-
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 17. 15:57
1. 부트스트랩 구조와 이해 - 부트스트랩을 직접 사용하는 방법도 중요하지만, 부트스트랩을 잘 사용하기 위해서는 구조에 대해서 알아 두는 것도 중요합니다. 2. 글로벌 스타일 (Global Styles) 처음으로 알아볼 것은 부트스트랩 전체를 관통하는 글로벌 스타일 입니다. 글로벌 스타일에 해당하는 Doctype, CSS Reset, Typography에 대해서 알아보는 것으로 시작하겠습니다. 2-1. HTML5 문서 타입 - 부트스트랩은 html5, css3, jQuery를 기반으로 작성되었습니다. - 따라서 html5 doctype을 요구합니다. ( * Doctype이란, 해당 문서에 대한 형식을 의미합니다) - HTML5 로 들어서서 아래와 같은 형식으로 간편하게 정의할 수 있게 되었습니다. 12 ..
-
[WebPage] 2. CSS & Bootstrap - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 16. 16:05
Chapter 2 CSS & Bootstrap 1. Bootstrap은 무엇인가? - 부트스트랩(Bootstrap)은 오픈소스(Open Source) 기반의 웹 UI 프레임워크입니다. - 개발자는 부트스트랩이 제공하는 각종 컴포넌트를 이용하여, 트위터와 같은 심플한 UI를 구현할 수 있습니다. - 부트스트랩은 기본 형태를 벗어나서 어느 정도까지 개발자 입맛대로 바꿔서 쓸 수 있도록 커스터마이즈(Customize) 할 수 있는 기능이 있습니다. => 종합적으로 웹의 기본 프레임을 부트스트랩이 형성하고, 나머지 세세한 부분에서 웹 개발자의 노력을 더하면 UI 관점에서 깔끔하면서 강력한 퍼포먼스를 자랑 할 수 있는 사이트를 만들 수 있게 되는 것 입니다. 2. CSS 2-1. CSS란? - CSS(Cascad..