고양멍멍이

<한줄요약>

Servlet : java에 html을 포함시켜서 동적으로 page 생성, 전달

JSP : html에 java를 포함시켜서 동적으로 page 생성, 전달

1. Servlet이란?

-  JAVA + HTML

-  JAVA를 사용해서 웹 페이지를 동적으로 생성한다.

-  Client가 Server에 request를 보내면, WAS는 DB를 조회, 결과 data를 이용해 페이지를 구성한다

-  이 page를 Client에 전송

-  JAVA 내부의 HTML코드는 문자열로서 표현한다

-  주요 method

-  service() : 요청 내용에 따라 doGet() / doPost()를 호출한다

-  doGet() : get일때의 요청 처리

-  doPost() : post일때의 요청 처리

2. JSP란?

-  Java Server Page

-  HTML + JAVA

-  서버에서 동적으로 웹 페이지를 생성한다

-  서블릿과 기능적으로 유사하지만, JAVA가 아닌 HTML 기반

-  내부적으론 JSP를 servlet으로 변환해서 사용한다

-  HTML내부에서 자바 코드를 사용하기 위해 스크립팅 영역을 제공한다

-  선언 <%! %>

-  변수 / 메소드를 선언한다

<%!
String var;

public void func(){
	var="value";
}
%>

-  스크립트릿 (Scriptlet)  <% %>

-  내부의 java 코드를 실행한다

<%
for(int i=0; i<10; i++) {
	out.println("<div>"+i+"</div>");
}
%>

-  표현식 <%= %>

-  데이터를 웹 페이지에 출력한다

<%!
String var="world";
%>

//Hello world!!
Hello <%= var =>!!

-  주석 <%-- --%>

3. JSP 지시자

Page 지시자

-  현재 JSP page에 대한 정보를 컨테이너에 알린다

<%@ page language="java", contentType="text/html;charset=ISO-8859-1", .... %>

include 지시자

-  특정 JSP 파일을 페이지의 특정 부분에 포함시킨다

-  ex) 반복 사용되는 상단 Navi부분을 별도 JSP파일로 분리 한 후, 다른 page에서 호출해 사용

<%@ include file="파일경로" %>

taglib 지시자

-  JSTL 등 태그 library 이용시 사용한다

4. JSP의 기본 객체

기본 객체의 Scope (영역, 유효 범위)

-  setAttribute, getAttribute, removeAttribute 등으로 JSP 페이지 간에 data전달/공유가 가능하다

5. 웹 페이지 이동

<한줄요약>

JDBC : JAVA에서 Database에 관계 없이 DB연결 및 조작이 가능하다

1. JDBC란?

-  Java 코드에서 DB에 연결해 SQL문을 실행하고, 결과를 받을 수 있는 API

-  Database 종류에 상관없이, 독립적으로 돌아간다 ( Database별 driver만 바꾸면 된다 )

-  java.sql 내부에 작성되어있다

2. DB에 연결

-  DataBase별 driver 설정

-  DBMS와 연결

-  SQL 생성, 전처리

-  SQL 실행

-  DBMS 연결 종료

-  위 5단계로 진행된다

-  insert, update, delete 요청은 executeUpdate로 실행, 변경 데이터 갯수를 int로 반환

-  select 요청은 executeQuery로 실행, 검색 데이터를 ResultSet으로 반환한다 

-  ResultSet의 데이터는 while(rs.next())로 주회 가능하며, rs.getInt | getString ("DB 컬럼명") 으로 얻을 수 있다

// insert 예제

//id, depary, salary는 인자로 넘어온다고 가정

String URL = "database URL";
String ID = "db ID";
String PW = "db PW";
Connection conn = null;
PreparedStatement pstmt = null;
int rs=0;
try {
	//1. driver 설정
	Class.forName(com.mysql.cj.jdbc.Driver); //mysql 기준 driver
	//2. DBMS 연결
	conn = DriverManager.getConnection(URL,ID,PW);
	//3. SQL 생성, 전처리
	StringBuilder insertMember = new StringBuilder();
	insertMember.append("insert into emp (id, depart, salary) \n");
	insertMember.append("values (?, ?, ?)");
	pstmt = conn.prepareStatement(insertMember.toString());
	//SQL문의 ?부분을 변수의 값으로 치환한다 
	pstmt.setString(1, id);
	pstmt.setString(2, depart);
	pstmt.setString(3, salary);
	//4. SQL실행, 결과반환
	rs=pstmt.executeUpdate();
	if(rs==1){
		System.out.println("성공");
	}
}finally {
	//5. 종료 
	close(pstmt, conn);	
}

public static void close(AutoCloseable ... closeables) {
	try {
		for(AutoCloseable autoC : closeables)
			if(autoC != null)
				autoC.close();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

// select 결과 처리 예제

List<EmpDto> list = new ArrayList<>();
rs = pstmt.executeQuery();
while(rs.next()) {
	EmpDto empdto = new EmpDto();
	empdto.setArticleno(rs.getInt("id"));
	empdto.setUserid(rs.getString("depart"));
	empdto.setSubject(rs.getInt("salary"));
	list.add(empdto);
}

<한줄요약>

BootStrap : 반응형 웹을 class로 쉽게 지원 가능한 framework

1. 반응형 웹

viewport

-  모바일 기기에서 화면에 표시되는 영역을 말한다

-  같은 HTML/CSS로 웹, 모바일, 태블릿 등 다양한 규격의 화면을 자동 지원

-  viewport를 지정해 기기별로 맞춤 표시한다

//가로 길이를 device의 width로 설정하고, 기본 확대 배율은 1로 한다
<meta name="viewport" content="width=device-width, initial-scale=1">

media query

-  미디어 타입, 조건식을 지정해 CSS를 반응형으로 조작한다

.title {
  font-size: 40px;
}
//width가 600 이하이면 font-size를 40이 아닌 20으로 출력 
@media (max-width: 600px) {
  .title {
    font-size: 20px;
  }
}

2. Bootstrap

-  반응형 디자인을 쉽게 생성 가능한 frontend framework

-  class로 지정 가능한 다양한 디자인 제공

container / container-fluid

-  반응형 컨테이너 제공.

-  fluid : viewport의 가용 너비 전체를 사용하는 컨테이너 제공

grid system

-  container 내부에서 row class를 사용해 열을 분리한다

-  각 열은 기본적으로 12개의 column으로 구분되어 있다.

-  해당 grid들을 n개씩 묶어서 사용한다

<div class="container">
	<div class="row">
		//전체의 1/6 차지
		<div class="col-2"></div>
		//전체의 1/3 차지
		<div class="col-4"></div>
		//전체의 1/2 차지
		<div class="col-6"></div>
	</div>
</div>

-  화면의 크기에 따라 grid 표현 여부를 조절 가능하다

-  <div class="col-sm-3"></div> 태그를 4개 만들었다면, 화면 크기가 576 이상일때는 3/12 grid를 차지하는 4개의 div가 가로로 나오고, 576 이하일때는 각 div가 1줄씩 나오게 된다

<한줄요약>

AJAX : 페이지의 비동기적 처리를 가능하게 해준다 ( 특정 부분만 로드, 갱신, 변경 )

1. AJAX란?

-  Asynchronous Javascript and XML

-  비동기적으로 데이터를 전달, 결과를 처리하는 방법

-  화면 갱신이 필요하지 않다

-  일반 페이지 이동 : data를 전달하면 서버에서 대상 page 전달, client에선 page 전환 발생

  -  page는 서버에서 된다된다

-  AJAX : data를 전달하면 서버에서 XML/JSON등 데이터 전달, client는 해당 data로 동적 화면 변경

  -  page는 client에서 구성된다 (서버가 보내준 data를 활용하여)

2. JavaScript에서 AJAX 사용

-  서버로 데이터를 전송할 객체 필요

  -  XMLHttpRequest 사용

-  XMLHttpRequest의 onreadystatechange 함수로 AJAX요청에 대한 callback 함수를 지정한다

-  open / send 함수로 서버로 데이터 전달 시작

//https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

function makeRequest() {
    httpRequest = new XMLHttpRequest();
	//예외처리
    if(!httpRequest) {
      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
      return false;
    }
    //callback함수 지정
    httpRequest.onreadystatechange = alertContents;
    //server에 요청 전달
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }
  //callback함수
  function alertContents() {
  	//요청이 정상 수행됬다면 alert
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
  }

3. JQuery에서 AJAX 사용

-  $.ajax() 함수 사용

-  옵션만 지정하는 간단한 코드로 쉽게 사용 가능하다

-  url, 요청 type, 성공/실패 함수를 지정하면, 실행시 지정 url로, 지정된 type의 요청을 보내 성공/실패에 따라 처리한다

$.ajax({
	//서버 요청 경로
	url:"url",
	//요청 type (get/post 등)
	type:"GET",
	//post는 data를 본문에 포함한다 
	success:function(response){
		//성공했을 때 호출
	},
	error:fuction(xhr, status, errormsg){
		//에러발생 시 호출
	}
});

-  $.get() / $.post() 함수

-  위 $.ajax함수를 get방식 / post방식으로 type을 미리 지정해놓은 함수

-  내부 인자는 type 제외 동일

-  GET / POST방식이란?

-  $(selector).load(url, data, function(~~){} ) 함수

-  selector를 통해 탐색한 DOM객체에, load함수가 가져온 html data를 넣는다

-  .load("test.html #id") 같은 식으로, 호출하려는 html에서 특정 id/class/tag를 추출할 수 있다.

4. 데이터 전송 형식

-  Server / Client가 주고받는 data의 형식이 일치해야 원활한 처리가 가능하다

-  1. CSV

-  Comma Separated Values. 직역하면 "콤마(,) 로 구분된 값"

-  말 그대로 데이터들을 ,으로 구분한다. (홍길동,19세,도적,..)

-  장점 : 데이터의 크기가 작다.

-  단점 : 데이터의 의미 파악이 힘들다. server-client간에 완벽히 데이터의 순서까지 일치해야한다

-  2. XML

-  eXtensible Markup Language

-  tag로 data의 의미를 표시한다, 사용자 정의 tag 사용가능

-  데이터의 순서가 달라져도 tag가 일치하면 지장 없다

<people>
	<person>
		<name>홍길동</name>
		<age>19></age>
		<job>도적</job>
	</person>
	<person>
		....
	</person>
</people>

-  3. JSON

-  JavaScript Object Notation

-  객체의 형식으로 data를 표현한다.

people[
	{
		"name" : "홍길동",
	    "age" : 19,
	    "job" : "도적"
	},
	{
		...
	},
]

5. Event 관리

-  ajax가 어느정도 진행중인지 확인할 수 있다

-  진행 단계에 따라 함수 호출

-  ex) ajax 실행시 loading창(기본 hide)을 보여주고, ajax완료시 숨길 수 있다

$(document)
.ajaxStart(function(){
	$("#loading").show();
})
.ajaxStop(function(){
	$("#loading").hide();
})

<한줄요약>

JQuery : CSS생성자를 기반으로 DOM 조작 / event처리를 간편히 하는 JS 라이브러리

1. JQuery란?

-  CSS생성자를 사용, 기본 JS보다 간편하게 DOM/이벤트 처리 가능

-  모든 브라우저에서 동일하게 동작, 호환성 고려할 필요가 없음

-  Event, Ajax를 쉽게 사용 가능

2. JQuery 기본 구문

-  CSS의 selector를 사용해 DOM을 탐색, 반환값으로 함수 수행

-  $(selector).action(); 의 구조이다.

-  DOM 탐색 전에 문서가 다 로드되어 있어야 한다

-  $(document).ready(function() {   });

-  $(function() {  });

-  2가지 방법으로 문서 로드 후 시작 가능

<script>
	$(document).ready(function() {
    	$(".button").click(function(){
        	$("#id").css("background", "orange");
        });
    });

</script>

-  .button class를 가지는 element 클릭시, #id id를 가지는 element의 css를 변경

-  css의 속성 선택자도 똑같이 이용 가능하다

-  $(selector[attr="value"]).action();

3. JQuery 선택자

-  css의 선택자 외에 추가된 선택자

-  필터 선택자

-  DOM 탐색한 결과 중 원하는 요소를 찾기 위해 사용

-  위치기반 필터 선택자

-  함수기반 필터 선택자

-  래퍼세트

-  JQuery는 선택자를 통해 찾은 DOM 객체들을, 래퍼세트에 담아 반환한다

-  래퍼세트는 다양한 메소드를 지원해 DOM 처리를 돕는다

-  요소 반복

-  $.each(array, function(index, item) { } );

-  array의 각 요소들마다 foreach를 돈다. index : 배열 인덱스, item : array의 각 객체들

-  $(selector).each( function(index, item) { } );

-  $(selector)의 결과가 array역할을 한다

-  filter() : 기존 래퍼세트에서 DOM요소를 추가로 거른 후 반환

-  내부에 선택자 / 함수가 온다

-  필터 선택자로도 불충분한 경우, 함수를 사용해 필터링 조건 명시

-  find() : 래퍼세트에 대해 find 선택자를 만족하는 모든 자손요소 반환

4. DOM 객체 제어

속성 제어 메소드

-  attr(name) name에 해당하는 속성 값을 반환

-  attr(name, value)는 해당 속성에 값을 설정

-  removeAttr(name) 해당 속성 제거

-  addClass(className) class 추가

-  removeClass(className) class 제거

-  toggleClass(className) 클래스가 있으면 제거, 없으면 추가

-  css(styleName) css값 조회

-  css(name, value) css 값 설정

-  html() html 반환 (태그 포함)

-  html(value) html 설정

-  text() text반환 (태그 제외)

-  text(value) text설정

-  DOM 객체 추가

-  $("<h2>hello world!</h2>").css(~~).appenndTo("body");

-  $() : DOM객체를 바로 생성

-  DOM 객체 삭제

-  $(selector).remove() 모든 요소를 삭제

-  $(selector).empty() 모든 요소, 하위 자식요소까지 삭제

-  DOM 객체 삽입

-  이미 존재하는 객체에 다른 객체 삽입

-  $(A).append(객체) A의 자식 맨 뒤에 객체 삽입

-  $(A).prepend(객체) A의 자식 맨 앞에 객체 삽입

-  $(A).after(객체) A의 형제 바로 앞에 객체 삽입

-  $(A).before(객체) A의 형제 바로 뒤에 객체 삽입

-  appendTo, prependTo, insertAfter, insertBefore : A와 B의 입장이 반대

-  $(B).appendTo(A);

5. JQuery Event

-  이벤트 핸들러를 할당,해제하는 메소드 제공

-  click함수로 클릭 처리 등

Event bind하기

-  bind(eventType, data, listener)

-  eventType : 핸들러를 할당할 이벤트 종류

-  data : 핸들러 함수에서 사용할 data

-  listener: 수행되는 핸들러 함수

-  unbind(eventType, handler)

-  bind된 핸들러 제거

-  on(eventType, listener)

-  동적 DOM 객체에도 적용 가능

-  기존 연결 방식은 동적 DOM 객체에는 적용되지 못한다

-  $().on("click", selector, function() { } );

-  selector에 해당하는 DOM 객체들도 이벤트 바인드 가능

-  off()

-  이벤트 등록 제거

Simple Event Bind

-  on함수 대신, eventType을 직접 사용할 수 있다

-  .on("click"~~)는

-  .click(~~)와 같다

MouseEvent

Keyboard Event

-  버튼 누름 -> 글자 입력됨 -> 버튼 떼짐 의 순서로 발생한다

Window Event

Input Event

버블링이란?

-  div - ul - li 구조의 태그가 있다고 할 때, 버블링이 적용되어 있으면

-  li에서 발생한 이벤트에 대해 ul -> div의 핸들러도 처리를 한다

-  ex) li에 포커스 발생시, ul div의 포커스 핸들러도 처리하는 식

<한줄요약>

JavaScript : 웹 페이지의 동적 요소(추가, 삭제, 사용자 입력)을 처리하기 위하여

1. JS란?

-  브라우저는 JS를 HTML과 함께 다운로드, 실행

-  브라우저의 JS엔진을 이용해 웹상에서 동작하는 프로그래밍 언어

2. HTML에서 JS 사용하기

-  HTML에서는 <script type="text/javascript"> 태그로 JS를 선언한다. (최신버전 기준 type 생략 가능)

-  외부의 JS파일을 src속성으로 import할 수도 있으며, 직접 작성할 수도 있다.

-  head, body어디에 있어도 상관 없지만, head에 둘 경우 body 출력 전 점검사항이 늘어나 느려질 수 있다.

3. JS 문법

-  주석 : Java와 동일, //와 /* */

-  변수 : type이 없다, var로 선언, 값이 할당되는 중 자동으로 type이 결정된다.

기본 자료형

-  숫자를 정수/실수로 구분하지 않는다

-  소숫점 연산시 기본적으로 오차가 발생

-  기본 연산자 : 자바와 같다. + - * / %

-  Infinity : 무한대. 0으로 나누는 행동을 했을때 발생

-  NaN : 계산 결과가 숫자가 아닐때 발생

-  문자열과 문자를 구분하지 않는다

-  '' "" 둘다 사용 가능. \를 사용한 특수문자도 지원

-  boolean은 true/false중 하나를 가진다

-  null, undefined, 빈 문자열, 숫자0은 false와 같다

-  undefined : 시스템 레벨에서 할당되지 않은 변수

-  null : 코드의 결과값이 없음

자동 형 변환

-  자료형이 다른 변수들끼리 연산해도 자동으로 변환되어 적용된다.

-  string + int : int가 string으로 변환

-  '1'+23 = '123'

변수 호이스팅

- 호이스팅 : 모든 선언을 해당 Scope의 처음에 처리하고 본문을 진행한다

-  var a = 123; 의 경우,

-  var a가 먼저 선언되고, 진행 중 var a=123;의 위치에 도달했을때 123으로 초기화된다.

-  그 이전에 참조할경우 undefined로 참조된다.

let과 const

-  상수는 const로 선언 ( ex. const LIST_SIZE=10; )

-  var는 기본적으로 전역 Scope

-  let, const는 해당 block을 Scope로 가진다

-  let, const는 호이스팅시 undefined로 초기화되지 않아 참조할 수 없다

-  let은 var와 달리 동일 Scope에서 재선언 불가

비교연산자

-  == : value가 동일한지 확인, '1'==1 은 true이다

-  === : type까지 동일한지 확인 '1'==='1'은 false이다 (string과 number로 다름)

조건문

-  if(조건식) else if(조건식) else 자바와 같다

-  switch-case 자바와 같다

반복문

-  while(조건식). 자바와 같다

-  do/while 최초 1회는 반드시 수행. 자바와 같다

-  for( ; ; ) 자바와 같다

-  for(var key in list) 객체의 key에 대한 foreach로 동작.

-  for(var value in list) 객체의 value에 대한 foreach로 동작. ES6 추가문법, iterator 속성 필요

-  array.foreach( function(item) {} ) array의 각 원소에 대해 foreach로 동작. ES6에선 set/map 지원

4. 객체

-  이름(key)과 값(value)으로 구성된 property들의 집합

-  기본 자료형을 제외한 나머지 모든 값들은 객체이다.

-  JS에서는 함수 또한 객체로 취급한다

객체 생성

-  1. 객체 리터럴

var player = {
	name : "player1",
	level : 50,
	class : "warrior",
	info : function(){
		console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
	},
};

-  직접 {}안에 각 property들을 명시하여 생성

-  2. Object 생성자 함수

var player = new Object();

player.name = "player1";
player.level = 50;
player.class = "warrior";
player.info = function(){
    console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
};

-  Object로 생성 후 property를 할당

-  3. 생성자 함수

function Player (name, level, class){
	this.name = name;
    this.level = level;
    this.class = class;
    this.info = function(){
    	console.log(name+ "의 레벨은 " +level +"이며 직업은 " + class+ "입니다.");
    };
}

var player1 = new Player("player1", 50, "warrior");
var player2 = new Player("player2", 30, "mage");

-  생성자 함수를 만든 후 활용. 중복코드 감소

객체 속성 조회, 변경, 추가, 제거

-  1. 객체.속성명으로 접근

-  2. 객체["속성명"]으로 접근

-  속성명에 특수문자, 공백, 연산자 등이 있다면 2번방법으로 조회

-  접근한 속성에 값을 할당하면 속성의 값이 새로운 값으로 변경된다

-  ex. player1.level = 10;

-  ex2. player1["level"]=10;

-  값을 할당한 속성이 없다면 신규 property로 추가된다

-  ex. player1.money= 5000;

-  delete연산자로 속성 제거 가능

-  ex. delete player1.money;

5. 함수

-  JS에서 함수는 first-class 객체이다

-  함수는 변수, 배열, 객체등에 저장될 수 있고, 인자로도 전달되고, return값으로도 사용 가능하다

함수의 선언

-  1. 함수 선언문

function 함수명 (arg1, arg2 ...) {
	//내용
}

-  2. 함수 표현식

var 함수명 = function (arg1, arg2 ...) {
	//내용
}

-  3. 생성자 함수 이용

var 함수명 = new Function ("arg1", "arg2" .... "함수 내용");

함수 호이스팅

-  함수 선언문 : 호이스팅된다. 어디서든 호출 가능

-  함수 표현식 : 호이스팅되는건 var 변수. 초기화되기까진 undefined로 함수로 사용할 수 없다.

함수의 인자

-  인자의 갯수가 선언과 일치하지 않더라도 호출 가능하다

콜백함수

-  특정 이벤트 발생에 따라 자동으로 호출되는 함수

-  ex) 버튼 클릭시 특정 JS 함수가 작동하게 한다

-  주로 비동기식 처리를 위해 사용한다

6. Window 객체

-  웹 브라우저의 JS 최상위 객체

-  브라우저의 여러 객체, 속성이 존재한다

Window 객체 활용

-  alert() : 내부 문자열을 담아 경고창 호출

-  comfirm() : 내부 문자열을 담아 확인/취소창 호출

-  prompt() : 문자열을 입력할수 있는 창 호출

-  navigator는 브라우저의 정보를 담고있다. chrome인지, ie인지, firefox인지 구분 가능

-  location.href=url  : url로 이동한다

-  history.back()/forward() : 뒤로가기, 앞으로가기

-  window.open('url', 'name', 'attr', history) : 새 창을 연다

-  이 url에, 이 name으로, 이 attr특성으로, history 덮어쓰기 여부 등 조절 가능

-  window.close() 닫는다

-  window.opener() 이 창을 연 창, 즉 부모 창을 컨트롤할 수 있게 해준다.

7. DOM (Document Object Model)

-  문서의 요소들을 tree 계층구조로 표현

-  최상위 노드는 window객체의 document 객체가 위치한다.

-  문서 요소의 추가, 수정, 삭제 지원

신규 객체 생성하기

-  element를 만들고, text를 넣고, document에 넣는다

var h2 = document.createElement("h2");
var msg = document.createTextNode("hello world!");

h2.appendChild(msg);
document.body.appendChild(h2);

-  객체에 속성 추가/조회는 get/setAttribute함수로 할 수 있다.

var img = document.createElement("img");
img.setAttribute("src","img.jpg");
img.setAttribute("width", 160);
img.setAttribute("height", 250);

document.body.appendChild(img);

-  객체 하위에 HTML 추가는 innerHTML로 가능하다

-  객체 하위에 text 추가는 innerText로 가능하다

var div = document.createElement('div');
var div2 = document.createElement('div');

div.innerHTML = '<h1>hello world!!</h1>';
div.innerText = 'hello world!!';

문서에서 객체 찾기

-  id로 찾기 : getElementById(id) : element 한개 반환

-  class로 찾기 : getElementsByClassName(className) : element의 배열을 반환

-  tag으로 찾기 : getElementsByTagName(tagName) : 배열반환

-  name으로 찾기 : getElementsByName(name) : 배열반환

-  css의 선택자 사용

-  querySelector(selector) : 선택자에 맞는 element중 첫번째 하나

-  querySelectorAll(selector) : 선택자에 맞는 element 전부

문서에서 객체 제거

-  removeChild(node);

8. 이벤트 (Event)

-  웹 페이지에서 발생하는 여러 상호작용들을 event라 한다

-  마우스 클릭, 키보드 입력, 드래그 등등

-  일반적으로 이벤트-함수가 연결되고, 이벤트 발생시에 호출한다.

-  이벤트 발생시 호출될 함수, 이벤트 핸들러를 만들어 연결해줘야 한다.

이벤트 종류

-  마우스

-  onclick : 마우스로 클릭시 발생

-  ondblclick : 더블클릭

-  onmousedown : 마우스 버튼이 눌렸을 때

-  onmouseup : 마우스 버튼이 올라갈 때

-  onmouseover : 커서가 들어올 때

-  onmouseout : 커서가 나갈 때

-  onmousemove : 마우스가 움직일 때

-  키보드

-  onkeypress : 키보드가 눌렸을 때

-  onkeydown : 키보드를 누르는 순간

-  onkeyup : 눌린 키가 올라오는 순간

-  frame

-  onload : 모든 로딩이 끝났을때

-  form

-  onsubmit : 전송될 때

-  onreset : reset될 때

-  onfocus : 입력 포커스가 들어올 때

-  onblur : 포커스가 나갈 때

이벤트 핸들러 등록

-  1. 인라인 이벤트 핸들러

<div onclick="javascript:alert('hello world!');">클릭
// 2가지 함수 호출
<div onclick="func1(); func2();">클릭

-  클릭시 js가 호출되 hello world! 메시지의 alert 창이 뜬다

-  2. 이벤트 핸들러 property

-  JS상에서 DOM을 찾아 선택하고 이벤트 핸들러를 등록한다

<script>
document.getElementById("id").onclick = function () {
	alert("hello world!");
};
</script>

-  하나의 DOM에 2개의 핸들러를 등록할 수 없다.

-  3. addEventListener방식

-  이벤트 이름, 핸들러를 전달하면 등록해준다

<script>
document.getElementById("id").addEventListener("click", openAlert, false);

function event(){
	alert("hello world!");
};
</script>

-  하나의 이벤트에 하나 이상의 핸들러 추가 가능

9. 브라우저 저장소

-  사용자 로컬에 데이터를 보관한다.

-  JS로 조작 가능

-  Cookie와의 차이 : 유효기간이 없으며, 가용 용량이 더 크다

-  key - value pair로 저장된다.

-  localStorage에 데이터 저장하기

<script>
	function storage(){
    	localStorage.Data = "testData";
    	localStorage["Data"] = "testData";
    	localStorage.setItem("Data", "testData");
    };
</script>

-  localStorage의 데이터 획득하기

<script>
	function storage(){
    	var val = localStorage.Data;
    	var val = localStorage["Data"];
    	var val = localStorage.getItem("Data");
    };
</script>

-  localStorage의 데이터 삭제하기

<script>
	function storage(){
    	localStorage.removeItem("Data");
        //전체삭제
        localStorage.clear();
    };
</script>

<한줄요약>

HTML : 웹 문서 구조를 표현하기 위한 언어

CSS : HTML로 짜여진 구조를 어떻게 화면에 띄울지 결정

1. HTML

-  hypertext markup language

-  웹을 표현하는 문서 양식

-  tag를 사용해 문서 표현

-  시작태그 <tag> 와 종료태그 </tag> 사이에 내용을 정의

-  각 tag별 의미가 있으며, 이에 해당하는 내용을 화면에 표시한다

Web의 작동 원리

-  client가 서버에 요청

-  서버는 요청을 분석 후 결과를 HTML로 전송

-  client는 받은 HTML을 브라우저에 표시

웹 브라우저 : tag를 해석하여 이를 화면에 표시

2. CSS

-  HTML문서가 화면에 나타나는 양식을 정의

-  동일한 HTML 구조에 다른 CSS를 적용 가능

-  CSS 규칙 - 선택자 / 선언 2 part

-  선택자 : style이 어디에 적용될 것인지

-  선언 : 어떤 style이 적용될 것인지

-  선언은 속성:값; 의 형식으로 이루어진다.

-  속성 : 바꾸고 싶은 요소

-  값 : 바뀔 value

ex) .img { display:none; } = img class를 표시하지 않겠다

-  여러 선택자에 같은 style 적용 : 선택자를 , 로 나열한다

3. HTML문서에 CSS 적용 방법

외부 스타일 시트

-  <link rel="stylesheet" type="text/css" href="css파일경로">

-  @import url("css파일경로");

-  등 외부의 css 파일을 호출

-  장점 : 여러 페이지에 동일한 스타일 쉽게 적용. 한번 수정하면 전체 다 변경 가능

내부 스타일 시트

-  <style> 태그를 이용해 페이지 내부에 css 규칙을 작성

-  <style>은 <head>안에 위치한다.

-  단점 : 여러 페이지에 중복적용해야하면 ctrl c+v해야

inline 스타일 시트

-  각 tage 내부의 style attribute에 css를 적용

-  style의 값은 css규칙

-  가장 적용 우선순위가 높은 방법

4. HTML 개요

모든 tag에 있는 global attribute

-  class="classname" : 클래스 이름을 지정. 여러 클래스 지정 가능. 다른 tag의 class값과 중복 가능

-  id="idname" : ID를 지정. 다른 tag의 id와 중복 불가(에러는 나지 않는다)

-  style="" : css지정

-  title="" : title 지정. 마우스 갖다댔을때 나오는 텍스트

-  dir="" : 텍스트 방향 지정. 기본적으로 ltr(left to right)

주석

-  <!-- 주석내용 -->

html문서의 전체 구성

-  html, head, body

<html> : HTML문서임을 정의한다. head와 body로 구성

<head> : HTML문서의 사전 처리 부분, 대부분 화면에 나타나지 않는다

-  <title> : 브라우저 탭의 이름(이건 화면에 나타난다)

-  <meta> : 메타데이타 (문서 작성자, 일자, 인코딩 정보 등등)

-  <style> : 내부 스타일 시트

-  <linke> : 외부 파일 참고

등을 기술한다

<body> : HTML문서의 본문. 브라우저에 표시되는 부분

-  id속성을 이용해 tag의 식별 가능

-  class속성을 이용해 CSS 부여

-  <h1~6> 속성으로 글자의 크기 지정

-  <section> 태그로 문서의 영역을 구분. <h1>의 크기도 상대적으로 작아진다

HTML에서 특수문자 입력하기

-  <, >, &등의 문자는 HTML에서 의미를 가지는 문자들로, 단순히 사용할 수 없다

-  다음과 같이 변경해 표현

5. HTML 마크업 요소

텍스트 포맷 관련

-  <b> 굵은 글씨로표시

-  <strong> 굵은 글씨 + 중요한 부분을 알림

-  <i> 이탤릭

-  <s> 취소선

-  <u> 밑줄

목록(list) 관련

-  <ul> 번호 없는 목록 (심볼)

-  <ol> 번호 있는 목록 (숫자, 알파벳, 로마숫자 등)

-  <li> ul/ol의 하위에 들어가는, 리스트 각 줄 태그

-  ol 속성

  -  1 : 숫자 (기본값)

  -  a, A : 알파벳 (소, 대문자)

  -  i, I : 로마숫자 (소, 대문자)

표(Table) 관련

-  thead, tbody, tfoot으로 행들을 구분

-  <tr> : 각 row를 나타낸다.

-  <td> : tr내부에서, 각 cell을 나타낸다.

-  <caption> : 테이블의 제목을 지정한다, 기본 : 가운데 정렬

-  <thead> : 머리글

-  <tbody> : 본문 내용

-  <tfoot> : 꼬리글

-  위의 태그들은 최소 하나 이상의 <tr>태그를 가져야 한다

열 단위의 접근

-  <colgroup> 열 그룹을 만든다

-  <col> 열 단위로 묶어 그룹을 만든다.

행/열 병합

-  <td>내부 속성으로 colspan="병합할 갯수", rowspan="병합할 갯수" 로 지정 가능

Image 관련

-  <img>태그로 삽입

-  src속성으로 이미지의 경로를 지정한다 - 상대경로/URL 다 가능

-  height/width속성으로 size지정

하이퍼링크

-  <a>태그를 사용

-  href 속성으로 클릭했을때 이동할 URL/문서 지정

-  target속성으로 현재 창 / 새창에서 열기 / 부모 창에서 열기 등 지정 (_self, _blank, _parent)

-  href="#idname" 으로 지정시, 해당 id의 태그 위치로 이동한다

-  <map>으로 이미지에 link 지정

-  <area>태그로 영역을 지정해서, 한 이미지라도 누르는 위치에 따라 다른 경로로 안내한다

-  <area>는 href / target / shape등의 속성을 지닌다.

-  shape로 rect, circle 등 모양을 지정 후 coords로 세부 사항 지정

-  <link> 태그로 외부 자원 연결 (위에서 본 css 등)

-  <head>내부에서 정의한다

-  rel속성 : 어떤 관계로 연결된 자원인지 (js, css 등)

프레임

-  현재 문서의 일부에 다른 문서를 띄운다

-  <iframe> 태그 사용

-  src : 띄울 문서의 경로

-  height, widht : 크기

Form 요소

-  client와 server간에 데이터를 주고받기 위한 용도

-  client는 form에 데이터 입력 후 서버로 전송한다

-  서버는 이에 따른 처리

데이터 입력

-  <form> form을 정의

-  <input> 데이터를 입력받기 위함

-  <textarea> 여러줄의 text 입력

-  <button> 버튼

-  <select> selectbox

  -  <option> selectbox 내부의 각 값들 (위의 한국/일본/중국)

-  <label> 입력값에 라벨 달기, label을 클릭해도 input으로 포커스 지정

-  <fieldset> form 요소를 그룹으로 묶는다

-  <legend> 묶은 그룹에 제목 지정

전송 방식 결정

-  form의 속성값으로 정한다

-  method="GET / POST" (후술)

-  name : form의 이름을 지정

-  action : 이 form을 전송했을때 처리할 server 스크립트 지정

-  target : action에서 지정한 server 스크립트를 어디에서 열 것인가

input 종류

-  type에 따라 여러가지 형태로 나타난다

-  number / range의 속성 : min, max, step, value (최소값, 최대값, 값들 사이의 간격, 기본값)

-  checkbox / radio의 속성 : radio의 name속성 = 그 값들이 다 같아야한다

                                    checkbox는 name 관계없이 다중선택

-  button의 속성 : value = 버튼 안의 글자, onclick = 눌렀을때 일어날 동작

-  image의 속성 : src = 이미지 주소

-  file의 속성 : multiple = 여러 파일을 업로드 가능

공통속성

-  placeholder : 기본값. 회색글자로 표시. 클릭시 사라짐

-  readonly : 수정 불가

-  required : 필수입력항목

여러 data중 선택

-  <select> 태그 사용

-  내부의 <option> 태그로 각 항목을 지정한다

-  option 태그의 속성

  -  value : 각 항목의 값

  -  selected : 기본 선택값

-  <optgroup> 로 옵션들을 그룹화한다

여러 줄 입력

-  <textarea> 태그 사용

-  cols rows속성으로 박스의 크기 지정

기타 태그

-  <button>

-  <input type="button">과 거의 동일하다. submit, reset, button 3종류가 있는것도 동일

-  차이점 : CSS/img등으로 자유롭게 디자인 변경 가능

-  <progress>

-  작업의 진행률 게이지 바

-  value 속성으로 현재 진행중인 값, max 속성으로 완료(최대)값 설정

공간 분할 태그

-  <div>

-  block형식으로 공간 분할

-  <span>

-  inline형식으로 분할

6. CSS선택자

-  HTML문서에서 CSS의 적용 대상을 선택하기 위한 selector

일반 선택자

전체 선택자

-  * { }

-  모든 element를 선택한다

-  거의 사용하지 않는다

타입 선택자

-  typeName {}

-  div {} 으로 모든 div에 CSS를 적용한다

-  div, span {} 이렇게 2가지 이상의 타입에 적용

클래스 선택자

-  .className {}

-  .target {} 으로 class="target"이 있는 모든 element에 적용

-  div.target {} 으로 class="target"이 있는 div들에 적용

ID 선택자

-  #IDName {}

-  #target {} 으로 id="target"인 element에 적용

-  id는 1개이므로, 다른 조건 제한 옵션은 필요 없다

선택자의 우선순위

-  전체 < 타입 < 클래스 < ID

복합 선택자

하위 선택자

-  element element {}

-  div p {} 로 div에 포함되는 모든 p 태그에 적용

-  div와 p 사이에 몇개의 다른 태그가 있어도 적용된다 (n단계 하위 요소까지 다 적용)

자식 선택자

-  element > element {}

-  div>p {} 로 div의 모든 자식 p 태그에 적용

-  div와 p 사이에 다른 태그가 존재하면 적용되지 않는다

인접 형제 선택자

-  element + element {}

-  div + p {} 로 div 이후 계층이 같은(형제) p 태그중 첫번째에 적용

-  여러 형제 element들 중 첫번째만 선택

일반 형제 선택자

-  element ~ element {}

-  div ~ p {} 로 div 이후 계층이 같은 p 전체에 적용

가상 클래스 선택자

-  가상의 클래스를 선택한다

-  element:selector 형식으로 사용

   ex) a:link {}

가상 엘리먼트 선택자

-  가상의 엘리먼트 선택한다

-  element::selector 형식으로 사용

   ex) p::selection {}

속성 선택자

-  특정 속성 / 속성값을 가지는 element를 선택

-  [속성A = 값B] A속성의 값이 B인 element를 선택한다

선택자들의 우선순위

-  동일한 element에 여러 선택자가 적용될 경우,

-  1. css문서 상 더 아래에 기술된 선택자

-  2. 더 구체적인 선택자

-  3. !important를 가지는 선택자

-  가 우선 적용된다

7. CSS 태그별 세부 속성

Font 속성

-  font-family : 글꼴, 이름에 공백이 있을경우 ""으로 감싸준다,

                    여러개 입력시 앞에서부터 확인, 설치되지 않은 폰트면 넘어간다

-  font-size : 글자 크기, px, pt, 150%등으로 표현

-  font-style : 글자 스타일, 이탤릭 등

-  font-weight : 글자굵기, bold, bolder 등

-  font : font 속성 일괄설정

Text 속성

-  text-align : text 정렬 방식 지정, left, right, center, justify

-  text-ident : 첫 line 들여쓰기 지정

-  text-transform : 대/소문자화, uppercase, lowercase 등

-  vertical-align : 수직 정렬

-  color : 색 지정

-  line-height : 줄간격 지정, pt, px, %등으로 표현

디자인 속성

-  cursor : 마우스 모양 변경

-  display : 표현 방식 조정, inline, block, none

-  background-color : 배경색, color값 혹은 transparent 지정

-  background-image : 배경이미지, url

-  background-repeat : 배경 이미지 끝나면 반복 여부

-  background-position : 배경 이미지 위치 지정

-  background : 배경 속성 일괄설정

Table 속성

-  width, height : 너비, 높이

-  text-align : 내부 정렬(수평)

-  vertical-align : 내부 정렬(수직)

-  border-width : 외곽 너비

-  border-style : 외곽 스타일

-  border-color : 외곽 색, 4방향 각각 다른 색 가능

-  border : 외곽 속성 일괄설정, 4방향 다른 색 불가능

박스모델 속성

-  CSS는 모든 element를 어떠한 상자에 들어있는 상태로 생각한다

-  박스안에서 element의 위치, 박스와 박스의 간격 등을 조정 가능

-  margin : Box의 외곽거리를 지정, 4방향 지정 가능, 속성값 auto로 상/하 좌/우 균등 분배 가능

-  padding : element와 Box의 간격을 조정, 4방향 지정 가능

-  min-height : 최소 높이를 보장, 브라우저 크기가 작아져도 최소치를 유지

포지션 관련 속성

-  width, height : 높이, 너비. auto로 설정시 가능한 크기만큼 채운다

-  position : static (top/left로부터의 거리), absolute (상위 box 기준 top,left,right,bottom 등 위치 지정)

-  overflow : 상위 element보다 지금 element가 클 경우 처리법. visible, hidden, auto

-  visiblility : 화면에 보일지 말지를 결정. display:none과는 달리 표시하지 않아도 영역은 차지한다

-  z-index : 여러 element를 겹쳐 표시. z-index값이 큰쪽이 위로 온다.

8. semantic tag

semantic tag란?

-  <h1>태그와 <font size="xx"> 는 그 의미가 동일하다

-  하지만 font태그는 아무 의미도 없지만, h1태그는 header, 그중 최상위 태그라는 의미를 내포

-  자기 자신이 나타내는 바를 알림으로서, 어떠한 의미를 가지게 한다

-  콘텐츠의 의미를 내포하는 이러한 태그를 semantic tag라 한다.

-  form, table, img 등도 각각 나타내는 바가 명확한 semantic tag이다.

-  header : 보통 nav, search form등이 들어가는 머리 부분으로 사용하는 태그

-  nav : 다른 문서/사이트로 연결하는 링크가 모여있는 태그

-  section : 같은 주제를 가지는 element의 묶음

-  aside : 왼쪽/오른쪽의 사이드 내용

-  footer : 웹사이트정보, 연락, copyright 등을 표현