web
-
[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..
-
[MongoDB] 1. MongoDB 시작하기CSE/MongoDB 2015. 6. 13. 11:36
MongoDB를 Windows 환경에서 구축해서 시작해봅시다! 이 포스팅은 "MongoDB NoSQL로 구축하는 PHP 웹 애플리케이션" 서적을 참고하여 작성하였습니다. 1. MongoDB 설치 및 구동, PATH 설정 먼저, 1.http://www.mongodb.org/downloads 로 이동합니다. 2.자신의 windows에 맞게 다운받으세요.(저는 64-bit 환경으로 받았음) 3. 내려받은 zip 파일을 C드라이브에서 압축을 푼 뒤, mongodb로 바꾸세요. 4. cmd 창을 열어서, 아래 명령어를 cmd에 입력해주세요. cd \mongodb\bin mongod 5. 또다른 cmd창을 열어서, 아래 명령어를 cmd에 입력해주세요. cd \mongodb\bin mongo 두개의 cmd를 열어주세..
-
[Web Building] 9. Web DaaS - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:39
Web Building - Data as a Service (DaaS) 1. What We Will Do 이번 장에서: - SQL이 구동중인 웹 서버로 부터 유동적인 데이터 인출을 합니다. 2. Using a PHP Server Running MySQL customers.html을 수정합니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 Customers Customers var xmlhttp = new XMLHttpRequest();var url = "http://www.w3schools.com/website/customers_db_mysql.php"; xmlhttp..
-
[Web Building] 8. Web AppML - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:39
Web Building - AppML 1. What We Will Do 이번 장에서: - AppML을 이용한 인출(fetch)과 웹 사이트에 데이터 표시하기 입니다. customers.html에 아래 코드를 입력해주세요: 12345678910111213141516171819202122232425262728293031323334Customers Customers Name City Country {{Name}} {{City}} {{Country}} Colored by Color Scriptercs * W3School을 통해 제작된 강좌입니다.
-
[Web Building] 7. Web Http - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:38
Web Building - Fetching Data with Http 1. What We Will Do 이번 장에서: - Http를 이용한 서버로부터의 데이터 인출(fetch)을 해보겠습니다. 2. The Data 아래 주소에서 PHP server에 의한 데이터가 제공됩니다. http://www.w3schools.com/website/customers.php * 파일은 JSON 형식입니다. 3. Change the Customers Page to use Http demoweb 폴더에서, customers.html을 수정합니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 ..
-
[Web Building] 6. Web Navigation - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:37
Web Building - Adding Navigation 1. What We Will Do 이번 장에서: - 네비게이션 메뉴를 추가합니다. 2. Add a Navigation Menu demoweb 폴더에, script.js 파일을 수정합니다. 123456document.getElementById("nav01").innerHTML ="" +"Home" +"Data" +"About" +"";Colored by Color Scriptercs 3. Edit The Style Sheet demoweb 폴더에, site.css 파일을 수정합니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445body { font-..