★괴발개발★

프로젝트 구조 설계개발할 웹 앱의 전체 구조도는 앱의 전체를 한눈에 파악할 수 있기 때문에 개괄적으로라도 작성해두는 것이 좋음!예) my favorites 의 구조도mainfavorite moviesfavorite gamesfavorite books ▶ 명세서 작성페이지명파일명페이지가 표시하는 내용mainindex.html사이트의 개략적인 소개와 메인페이지에서 각 주요화면으로이동하는 네비게이션 바 제공moviess1.html좋아하는 영화의 개략적인 설명gamess2.html좋아하는 게임의 개략적인 설명bookss3.html좋아하는 책의 개략적인 설명  프로젝트 작성프로젝트의 뼈대를 작성한 후 보일러플레이트를 사용한 반응형 웹사이트 템플릿을 사용해서 각 페이지를 작성한다  실행 및 배포프로젝트를 화면의 크..

▶ 함수?  특정로직처리에 사용하며 재사용을 목적으로 만들어짐시스템이 제공하는 내장함수와 사용자가 만드는 사용자 정의 함수가 있음-함수가 하는 일 : 함수명-함수 인수의 개수와 타입 : 인수리스트-함수의 실행결과 타입(리턴타입) : return문 ▶내장함수 : 시스템이 제공예) 메시지 상자 호출 alert(메시지내용); ▶사용자 정의 함수var 함수명= function(){} 와 같은 형태 작성한 함수를 사용할 때는 함수명()과 같이 함수를 호출한다-일반함수1. 함수 선언문으로 정의하는 방식2. 함수 표현식으로 정의하는 방식 ---권장 -익명함수 : 이름없는 함수이름이 없다는 것은 특정 경우에만 사용하고 사용 후 자동으로 제거되기 때문에 메모리 관리에도 좋다주로 이벤트처리(콜백함수), 즉시실행 함수, 클..

: java의 제어문과 비슷-조건문 : 조건을 사용해서 프로그램 실행 순서 제어if문, switch문-반복문: 프로그램 실행을 반복문을 사용해서 제어for문, while문, do-while문-기타 제어문 : 그 밖의 프로그램 실행 순서 제어반복문을 탈출 또는 일시탈출 : break문, continue문객체생략 : with문예외처리 : try-catch-finally문 ▶조건연산자-간단한 조건문 구현에 사용-? : 연산자를 사용하면 문법은 (조건)? 참:거짓; 과 같이 구성예) var v1=(a>5)?5:a ; ▶for-in문: 객체내의 프로퍼티 수만큼 반복수행할 때 사용for(var 변수 in 객체명) {//처리할 문장} ▶for-of문 : 객체 반복 -객체 내의 객체를 반복할 때 사용즉, 객체의 모임(..

자바스크립트: 연산자와 제어문은 C/C++과 유사하며 객체지향의 상속 방식은 프로토타입 기반참고) 프로토타입이란?객체지향의 한 형태, 클래스가 없이 객체의 프로토타입(원형)을 복제해서 재사용하는 방식으로 상속함프로타입 기반은 클래스리스, 프로토타입 지향 또는 인스턴스 기반이라고 부른다 ▶ 자바스크립트는 웹상에서 html의 프로그래밍 언어프로그래밍 언어는 컴퓨터에게 어떤 동작을 수행시킬 수 있다는 뜻즉 , HTML 태그에 어떤 동작을 부여해서 작업을 처리함 ▶자바스크립트 사용방법1) HTML 페이지 내부에 포함해서 작성하는 방법 태그 사이에 자바스크립트 코드들을 기슬하며, 최신버전에는 속성을 쓰지 않음해당 html 페이지에서만 사용할 수 있으며, 다른 페이지에서는 재사용할 수 없다.2) 별도의 파일로 작성..

부트스트랩 : html, CSS, JavaScript 반응형 웹 사이트, 모바일 우선 웹 사이트를 쉽게 작성할 수 있도록 해주는 무료 프레임워크FOR 그리드기반의 디자인, 캐러셀, 모달 등을 쉽게 구현하기 위해-부트스트랩을 사용하려면 getbootstrap.com에서 부트스트랩을 다운받아서 웹 애플리케이션 프로젝트에 추가하는 방법과 부트스트랩 CDN을 HTML 페이지에 추가하는 방법이 있다 -CDN의 순서는 반드시 CSS를 먼저 기술하고  JS는 그 다음 기술한다 ▶ 그리드 시스템: 부트스트랩의 그리드 시스템은 12개의 칼럼을 필요에 따라 합쳐서 모양을 구현함.1칸의 크기는 col-sm-1 이며, 2칸을 합친 크기는 col-sm-2 ▶.이미지class 속성 값의미rounded라운드 이미지rounded-c..

▶현재 CSS는 실렉터, 박스모델, 배경과 테두리, 이미지 관련, 텍스트 효과, 2D/3D 트랜스폼, 애니메이션, 폰트, 다단기능을 제공함 ▶ Advanced CSS사용할 때는 속성에 벤더 프리픽스를 추가하고 스타일 구문의 마지막에 표준규약을 기술함벤더 프리픽스해당 웹 브라우저-ms-인터넷 익스플로러-o- 오페라-moz-파이어폭스-webkit-크롬, 사파리 ▶ 테두리와 배경 : border-radius, box-shadow, border-image, backgroun-size 속성, 배경 이미지 중첩 기능 등이 추가됐으며, 텍스트 효과에는 텍스트에 그림자를 주는 text-shadow속성이 추가 ▶ 그래디언트를 사용할 수 있도록 선형 그래디언트 linear- gradient와 원형 그래디언트 radial-..

미디어쿼리 : 미디어 및 화면의 크게 따라 다른 스타일시트가 적용되도록 지원함지금까지의 스타일시트들은 모두 미디어의 타입이나 화면크기를 고려하지 않고 작성된 것그렇다면 미디어 쿼리를 어디에 작성하는 것이 좋은지를 결정하는 미디어 쿼리 작성 위치와 미디어 쿼리 구문을 작성하는 방법을 알고 있어야 함▶미디어 쿼리를 학습하기 전첫번째: 미디어 쿼리는 CCS로 구현두번째 : CSS구문들간의 순서를 알고 있어야 효율적으로 기술 가능 ▶CSS구문들간의 순서첫번쨰 : 가장 기본적인 스타일로 태그들에 공통적으로 적용할 내용을 기술두번째 : 특정 태그에만 적용되는 스타일을 기술마지막 : 미디어 쿼리를 기술 - 화면의 크기별로 각각 지정 ▶미디어 쿼리는 작성위치에 따라 html 페이지에 태그를 사용해서 기술하는 방법과 ..

참고) www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification www.w3.orgbackground, border,color,display,float,font,padding,position,pause,volume 등등이 있다 1. 색상과 배경지정-color속성: 문자열 글자색-background-color 속성 : 배경색 지정-background-image 속성 : 태그의 배경 이미지 지정-background-repeat 속성 : 배경이미지가 있는 경우, 이것을 반복해서 화면에 표시할 지 여부 결정-background-attachment 속성 : 배경 이미지가 있을 때, 화면의 스크롤이 이동하더라도 이미지..

CSS란? Cascading Style Sheets 의 약자로 html태그를 화면상에 어떻게 표현할 지 설정함▶ css사용하는 이유css는 디자인, 레이아웃, 다양한 기기 및 화면 크기에 따른 디스플레이의 다양성 문제를 포함한 웹 페이지의 스타일을 정의할 때 사용함화면의 크기에 따라 다른 모양의 사이트를 일일이 만든다는 것은 매우 힘들고 비용이 많이 든다그런데 이것은 CSS로 해결됨CSS의 미디어쿼리를 사용해서 화면 크기에 자동으로 반응한 사이트를 만들 수 있다(반응형 웹)그리고 방대한 웹 사이트에서 매 페이지마다 폰트 정보와 색상 정보를 추가한다는 것은 많은 시간이 필요한 작업이고,결국 웹 사이트 개발비를 상승시킴 => 이런문제를 해결하기 위해 W3C에서 CSS를 만들게 됨결국 체계적인 웹 사이트 개발..

HTML5 문서구조 및 주요태그시맨틱태그 : 의미적태그로, 태그명이 표현되는 데이터를 설명-HTML : 문서의 내용과 구조를 기술하는 곳으로 문서구조는 , , , 태그등을 사용해 각각의 영역을 표현함헤더 태그(네비게이션 태그)내용 : 셋 중 하나 사용 : 문서의 내용을 표시하는 태그: 주로 블로그의 글이나 기사: 문서의 영역을 나누는 블록요소사이드바푸터 : 사이틔 제작자, 주소, 저작권 정보 등엘리먼트 : 태그는 태그 그 자체를 말하며 엘리먼트는 태그를 구조적 문서 개념에서 설명할 때 주로 쓰인다 그외 태그들- : 설명글을 붙일 대상 정의- : 피규어와 유사- : 텍스트에 형광펜(강조효과)- :측정값- : 작업의 진행상태를 막대로 표시 ▶웹 폼 태그(엘리먼트) : 입력폼을 구성하는 태그: 모든 폼 태그..