Web/WebPage
-
[WebPage] 3-3. 서버개발을 빠르게, 웹 프레임워크 DjangoWeb/WebPage 2015. 6. 26. 10:50
3.3.1 장고(Django)란 ? 장고는 파이썬으로 작성된 오픈소스 웹 어플리케이션 프레임워크입니다. 간단한 사용법과 수많은 내장 기능 덕분에 쉽고 빠르게 고품질의 홈페이지를 만들 수 있게 도와주는 프레임워크입니다. 웹 어플리케이션을 만들 때 자주 반복하는 많은 귀찮은 일을 모아서 함수나 클래스 등으로 만들어 놓았기 때문에 사용자들은 필요할 때 그 기능을 쓰면됩니다. 3.3.2 장고 시작 해 보기 본격적으로 장고를 이용한 개발에 대해 배워보기 위해 먼저 장고를 이용하여 아주 간단한 예제를 통해 장고를 알아보겠습니다. 간단한 예제를 실행해 보고 장고에 대한 설명에 본격적으로 들어가도록 하겠습니다. 1. 프로젝트 만들고 설정하기 1) 콘솔에서 장고 프로젝트 생성하기 - cmd 창을 열고 원하는 장고 프로젝..
-
[WebPage] 3. 서버 프로그래밍을 위한 Python과 Django - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 21. 14:11
3.1 Server와 Python 3.1.1 서버란 무엇인가? 앞에서 우리는 HTML, CSS를 이용하여 멋진 홈페이지를 만드는 법에 대해서 배웠습니다. 하지만 게시판이나 트위터, 페이스북처럼 여러 사람들과 같이 실시간으로 데이터를 공유하고 어딘가에 정보가 저장되어 있어야 하는 경우에는 그 동안 배운 내용으로는 만들 수가 없습니다. 왜냐하면 HTML과 CSS는 서버가 아닌 사용자의 컴퓨터에 저장되고 실행되기 때문이죠. 이는 Javascript도 마찬가지입니다. 사용자의 컴퓨터가 아니라 인터넷을 통해 연결되어 있는 서비스를 제공하는 컴퓨터에서 실행되고 그 결과를 사용자에게 넘겨주는 프로그램을 서버 프로그램이라고 합니다. 이러한 웹 서버 프로그래밍을 위해 널리 쓰는 웹 프로그래밍 언어로는 java/jsp, ..
-
[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 요소(Elements) - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 17. 11:52
3. CSS Elements 3-1. CSS3 보더(Borders) - 보더란 쉽게 말해서 테두리에 지정되는 속성을 말합니다. 1. 모서리가 둥근 보더 - 기존 CSS2에서는 모서리가 둥근 보더를 사용하기가 매우 난감했습니다. 보더를 쪼갠 뒤, 각 모서리마다 서로 다른 이미지를 배치해서 모서리가 둥근 보더를 표현해야만 했습니다. - But, CSS3에서는 모서리가 둥근 보더가 기본 스타일에 포함되어 있으므로 해당 프로퍼티를 이용하여 생성해 주면 됩니다. 실습을 위해 기존의 작성한 FirstPage.html에 아래 코드를 입력합니다. 1234 This box has rounded corners. Colored by Color Scriptercs 다음으로 보더를 지정하기 위한 CSS를 작성하겠습니다. 123..
-
[WebPage] 2. CSS 선택자(Selector) - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 16. 17:46
2-2-2. CSS 선택자(Selector) - CSS 선택자는 CSS를 사용함에 있어 매우 중요한 요소입니다. - 만약 페이지 상의 요소를 타겟으로 삼는 선택자가 없다면 요소의 CSS 속성을 수정하는 유일한 방법은 style 속성을 이용해 스타일을 인라인으로 선언해야합니다. 1. 선택자 기초 - 선택자의 구조는 아래와 같습니다. - 선택자(Selector)로 H1 - 선택자의 선언부(Declaration)는 여러 개 일 수 있습니다(위 예제에선 2개의 선언부) - 선언부은 속성(Property)과 값(Value)으로 구성되어 있습니다. 2. 타입 선택자(Type Selector) - 처음 알아 볼 선택자는 타입 선택자 입니다. - 특정 태그 명을 가진 엘리먼트 전체를 제어하기 위해 사용합니다. CSS ..
-
[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..