MVC
모델 뷰 컨트롤
html css js
FORM과 이벤트
사용자에게 입력받을 항목을 정의
폼테그 내부에 여러 개의 컨트롤요소를 포함
서버에 전송하기위해서는 폼테그 하위에 위치해야함
필드셋으로 하나로 묶음
레이블을 통해 문자열 연결 for -> id
placeholder 회색으로 표시
value 값으로 표시
search 검색상자는 x표시가 있어 지우기 용이
라디오버튼은 name 속성이 모두 같아야함 속성이 같은 것중 하나 선택
체크박스는 name과 상관없이 다중 선택이 가능
셀렉트 옵션 드롭다운으로 표시 value값은 각 항목 값을 지정하기 위해 사용 optgroup를 사용해 레이블 가능
데이타리스트 인풋과 함께 쓰임 설명이 같이 표시가능함
여러줄입력할수있는 box textarea disabled 지정시 수정 불가능 열과 행을 지정해 크기 지정
progress 시작을 0 최종 완료 1.0 max 미지정시 value값은 0보다 크거나같고 max보다는 작거나 같아야한다
div 마진은 4방향 모두적용 div는 박스 형태 영역 설정
span의 마진은 양옆으로만 적용 span박스가 아닌 텍스가 노출되는 영역만 포함
인라인 형식 a span input 글자형식테그
블록방식 div h p 목록 table form
A태그 속성 이해
- href -> 이동할 문서나 url
현재 문서에서 이동 _self
새로운 문서에서 이동 _blank
부모프레임에 표시 _parent
프레임을 사용할때 프레임에서 벗어나 링크내욜을 전체화면으로 표시 _top
갯방식 포스트방식 설명
갯방식
주소 표시줄에 사용자가 입력한 내용이 표시 256 ~ 2048 byte의 길이 제한 적은양의 데이터 전송에 적합
포스트방식
전송양의 제약이 없다 바디에 담아서 전송하기 때문에 전송 내용의 길이에 제한이 없다
사용자가 입력한 내용이 표시되지 않는다.
CSS간단
<link rel="stylesheet" type="text/css" href="css파일위치">
@import url(위치) 사용시 스타일시트중 최상단에 위치해야함 media="screen" 속성을 통해 보여지는 미디어타입 설정
인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 순
인라인 스타일을 통해 각 원소별 스타일 적용할수있지만 유지보수에 용이 하지않음
CSS 선택자 활용
선택자 우선순위
전체 선택자< 타입 선택자 < 클래스 선택자 < ID 선택자
클래스 명은 기호나 숫자 시작 x 공백없이 대소문자 - _ 사용
*{} 전체
h1, h2,h3 {} 타입 선택자
.classname {} 클래스 선택자
#idname{} id 선택자
E1 E2 {} 하위 선택자 여러개 모두
E1 > E2 {} 자식 선택자 1단계 하위만
E1 + E2 {} 인접 형제 선택자 형제 여러개만 첫번쨰만
E1 ~ E2 {} 일반 형제 선택자 형제가 여러개면 모두
가상 클래스 선택자 요소
가상클래스선택자는 user agent가 제공하는 가상의 클래스 지정
사용법 :붙여서 사용
link 방문하지 않은 링크를 선택
visited 방문한 링크를 선택
hover 지정된 요소에 마우스가 올라간 경우
active 지정된 요소가 활성화된경우
focus 포커스를 가질경우
first-child 부모의 첫번쨰자식
last-child 마지맞 자식 선택
nth-child n번째 자식선택 ()안에 숫자 만약 n은 0부터
enabled 지정된 요소가 다음과 같은 경우
disabled
checked
가상엘리먼트 선택자
가상 엘리먼트 선택자는 보이지 않은 가상의 엘리먼트 선택
사용법 :: 가상엘리먼트 {}
after 지정된 요소 뒤 내용추가
before 지정된 요소 앞 내용추가
first-letter 지정된요소의 첫 번째 문자 선택
first-line 지정된 요소의 첫 번째 라인 선택
selection 사용자에 의해 선택된 요소의 위치 선택
속성 선택자 요소
특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
속성 선택자를 사용하기 위해서는 name이나 title 같은 속성값을 규칙적으로 정의
[A] A속성이 포함된 엘리먼트 선택
[A=V] A속성값이 정확히 V와 일치하는 엘리먼트 선택
[A~=V] A속성값이 V단어를 포함하는 엘리먼트 선택
[A^=V] A속성값이 V로 시작하는 엘리먼트 선택
[A*=V] A속성값이 V를 포함하는 엘리먼트 선택
[A$=V] A속성값이 V로 끝나는 엘리먼트 선택
[A|=V] A속성값이 정확이 V이거나 V으로 시작하는 엘리먼트 선택
같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선적용
CSS position, display의 이해 -> inline block
diplay
엘리먼트가 화면에 출려되는 방식 조정
none -> 안보임
block -> span 테그를 블럭형식으로 변경
inline -> div 테그를 인라인형식으로 변경
블록레벨의 경우 두개이상의 인접 수직 마진은 통합되나 수평마진은 통합되지 않는다
floated된 박스와 다른 박스의 수직 마진은 통합되지 않는다.
absolute와 relative로 위치된 박스의 마진들은 통합되지 않는다.
position
static 기본값으로 일반적인 내용물의 흐름. 상단과 좌측에서의 거리를 지정할 수 없다.
relative html문서에서의 일반적인 내용물의 흐름을 말하지만 top,left 거리를 지정
absolute 자신의 상위 box속에서의 top,left,right,bottom등의 절대적인 위치를 지정.
fixed 스크롤이 일어나도 항상 화면상의 지정된 위치에 있다.
overflow 상위엘리먼트에 속한 내용이 엘리먼트의 크기보다 클 경우 어떻게 처리할 것인지 설정
속성값을 visible로 설정하면 box속의 내용을 모두 표시. 내용의 크기에 따라 box의 가로,세로 폭이 늘어남.
hidden으로 설정하면 box의 width,height를 지정했을 경우 넘치는 내용은 보이지 않는다.
auto로 설정하면 지정된 범위를 넘치는 내용은 스크롤바를 이용하여 표시
float
박스가 화면의 어느 위치에 배치할 것인지를 설정하기 위해 사용
left 설정 시 그림이나 박스가 왼쪽 배치 글씨는 박스의 오른쪽
right 설정 시 그림이나 박스가 오른쪽 글씨는 왼쪽
none 설정시 그림이나 박스가 왼쪽 배치 글씨는 첫줄만 박스의 오른쪽으로 흐른다.
clear
float속성이 가지고 있는 값을 초기화 하기 위해 사용
left,right 왼쪽 또는 오른쪽 float속성값 취소
both 설정시 양쪽 모두의 float속성값을 취소
none 설정시 clear 하지 않은것과 같다
자바스크립트에서 CSS 스타일 적용이해
visibility와 display none 차이
visibility공간을 잡은 상태로 보이지 않게 설정
display none은 공간을 잡지 않고 보이지 않게 설정
시멘틱테그
브라우저 검색엔진 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할
header nav aside section article footer가 존재
헤더 사이트제목 로고 검색창 등이 있는 헤더
본문 본문 section + articles로 구성
사이드바 본문 외 내용
푸터 저작권 정보 및 제작자 정보
z index 큰 값을 더 위에 표시해 보여준다
자바스크립트
개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
html, css와 같이 웹을 구성하는 요소 중 하나
헤드나 바디 안 어느곳에서나 선언가능 <script> 사용
헤드에 위치한 자바스크립트는 브라우저의 각종 입출력 이전에 초기화되므로 브라우저가 먼저 점검
바디에 위치한 자바스크립트는 html부터 해석하여 화면에 그리기 떄문에 사용자가 빠르다고 느낄수있음
한줄 주석 // 블록 주석 /* */ 사용
자바스크립트는 동적타입언어 숫자형이든 문자형이든 모두 var 사용에 선언
값이 할당되는 과정에서 자동으로 변수의 타입이 결정
변수명은 낙타표기법 사용 특수문자 _와 $ 사용가능
키워드난 공백문자 포함하거나 숫자로 시작할수 없다
자바스크립트 문자열의 숫자 변환
parseInt -> 문자열의 처음 숫자까지 숫자를 변환
숫자가 아니라면 NaN 오류
언더플로우 오버플로우 0으로 나눌떄는 infinity 예외발생 x
js에서 문자열은 유니코드 문자 사용
boolean형에서 비어있는문자열,null,undefined,숫자0은 false로 간주
null은 값이 없거나 비어있음을 뜻함
undefined는 값이 초기화 되지 않았음을 의미함
호이스팅
var 선언문이나 function 선언문 등 모든 선언문이 해당 스코프의 처음으로 옮겨진 것처럼 동작하는 특성
즉 js는 모든 선언문이 선언되기 이전에 참조가 가능
for 반복문
in 키워드 사용하는 for 구문은 배열 또는 객체가 가진 프로퍼티를 순회하면서 키값 조회
js에서의 객체
객체는 이름과 값으로 구성된 프로퍼티의 집합
문자열 숫자 boolean null undefined를 제외한 모든 값은 객체
전역 객체를 제외한 js 객체는 프로퍼티를 동적으로 추가하거나 삭제가능
프로퍼티값으로 함수를 사용가능
객체생성법
1.객체리터럴
var student = {
name : 'asd',
age : 3,
data: function(){
console.log(name+" "+age);
},
};
2.오브젝트 생성자 함수
var student = new Object();
student.name = 'asd';
student.age = 3;
student.data = function(){
console.log(name+" "+age);
};
3. 생성자 함수
function student(name, age){
this.name = name;
this.age = age;
this.data=function(){
console.log(name+" "+age);
};
}
객체 속성 값 조회
.를 사용하거나 대괄호[]를 사용해서 속성값에 접근
대괄호에 들어가는 프로퍼티 이름은 반드시 문자열이어야한다.
객체에없는 송성 접근하면 undefined를 반환
ex) student.age student["age"]
속성명에 연산자가 포함된경우 대괄호 표기법만 사용가능
ex) student.student-age x student["student-age"] O
객체에 값을 할당하는 속성이 없을 경우 속성이 추가됨
student.area ='서울'
delete student.area; 딜리트 연산자를 이용해 속성제거 가능
함수 선언문과 함수 표현식의 호이스팅
선언문으로 생성된 함수는 함수 호이스팅이 일어나
어느곳이든 호출이가능하지만
표현식의 경우 변수 호이스팅이 일어나
호출이 불가능 하다
함수를 호출할때 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능
콜백함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을때 시스템에 의해 호출되는 함수를 말함
일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행됨
주로 setTimeout(),setInterval()과 함께사용
location.reload() 현재 페이지를 새로고침
location.href 값이 할당돼있다면 url로 이동
jQuery DOM 관련 함수
createElement(tagname) element생성
createTextNode(text) text 노드생성
appendChild(node) 객체에node를 자식으로추가
setAttribute(name,value) 객체의 속성을 지정
getAttribute(nam) 객체의 속성값을 가져옴
객체 가져오기
getElementById(id) 태그의 id속성이 일치하는 element 객체얻기
getElementsByClassName(className)
document.body.removeChild(객체) 객체 삭제
jQuery 이벤트
마우스 이벤트
onclick 마우스로 element를 클릭했을때
ondblclick 마우스로 element를 더블클릭했을때
onmouseup 마우스로 element에서 마우스 버튼을 올렸을때
onmousedown 마우스로 element에서 마우스 버튼을 눌었을때
onmouseover 마우스를 움직여서 element 밖에서 안으로 들어올때
onmouseout 마우스를 움직여서 element 안에서 밖으로 나갈때
onmousemove 마우스를 움직일때 발생
키보드
onkeypress 키보드가 눌러졌을때 아스키
onkeydown 키보드를 누르는 순간 키코드
onkeyup 키보드를 누르고 있던키를 뗄때
Frame 이벤트
onload 문서 이미지 프레임등이 모두 로딩되었을때
onabort 이미지등 내용을 로딩하는 도중 취소 등으로 중단 되었을때
onerror 이미지 등 내용을 로딩 중 오류가 발생했을때
onresize document, element의 크기가 변경 되었을때
onscroll document, element가 스크롤 되었을 때
onselect 텍스트를 선택 했을 때 발생
폼 이벤트
onsubmit from이 전송될때
onreset 입력 form이 reset될 때
oninput input이나 textarea값이 변경되었을때
onchange select box,checkbox,radio button상태가 변경되었을때
onfocus 입력 포커스가 들어 올때
onblur 입력 포커스가 다른곳으로 이동할때
onselect 입력 값 중 일부가 마우스 등으로 선택될때
인라인 이벤트 핸들러
최근에는 사용하지 않음
여러개의 함수를 한번에 호출가능
이벤트 핸들러 프로퍼티방식
js에서 이벤트 핸들러를 등록하는 방법
이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할수있다는 단점이있음
addEventListener 메소드 방식
전달 인자 첫번째에는 이벤트 이름 두번째에는 이벤트 핸들러 세번째에는 캡쳐링 여부
이벤트 이름에서 on을 제거한 이름을 사용
프로퍼티방식은 하나만 바인딩 가능하지만 리스너 메소드 방식은 하나이상의 핸들러 추가가능
콜백 함수를 지정하여 사용
localStorage 방식 이해
데이터를 사용자 로컬에 보존하는 방식
저장 덮어쓰기 삭제등 조작가능
js로만 조작 가능
모바일에서도 사용가능
쿠키와의 차이점
유효기간이없고 영구적으로 이용가능
5MB까지 사용가능 쿠키는 4KB
쿠키와는 다르게 네트워크 요청시 서버로 전송되지 않음
서버가 HTTP헤더를 통해 스토리지 객체를 조작할수 없음
웹스토리지는 origin(프로토콜,도메인,포트)이 다르면 접근 불가
키와 값을 하나의 세트로 저장
도메인과 브라우저별로 저장
값은 반드시 문자열로 저장
setitem (key,value) key-value쌍으로 저장
getitem(key) key에 해당하는 값을 리턴
removeitem(key) key에 해당하는 값 삭제
clear() 모든값 삭제
key(index) index에 해당하는 key
length 저장된 항목의 개수
sessionStrorage
현재 떠있는 탭에서만 유지
페이지 새로고침시에는 데이터 유지 닫고 열었을때는 제거
사용법은 local과 동일 get set clear remove
부트스트랩 그리드 방식 이해
최대 12개의 열을 허용
부트스트랩 row
하나의 열을 나눠서 쓸때 한열로 묶을때는 row 사용
java 순수 아작스
AJAX 통신
웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법
화면 갱신이 없으므로 사용자 입장에서는 편리하지만 동적으로 DOM을 구성해야 하므로 구현이 복잡함
readyState
0 UNinitialized 객체만 생성
1 Loading open 메소드 호출
2 Loaded send 메소드 호출 status헤더가 아직 도착하기전
3 interative 데이터를 일부 받은상태
4 Completed 데이터를 전부 받은상태
status성공코드
200 ok 요청성공
403 forbidden 접근거부
404 Not Found 페이지 없음
500 InternalServerError 서버오류발생
JQ
$("선택자").css("속성","값");
로드되었을떄
$(function{
});
DOM 탐색
Web/시험정리
댓글