HTML & CSS & JavaScript

KoriSeung·2023년 6월 4일

CSS & HTML & JavaScript

목록 보기

1/1

HTML
-HT :HYPER TEXT, 문서와 문서가 링크로 연결되어있다.
-M :MARK UP, 테크로 이루어져있다.
-L :LANGUAGE
-> 웹사이트의 틀을 만들어주는 마크업 언어

DAY 04

Cascading Style Sheets
HTML 태그에 옷(=디자인)을 입혀주는 기법
문서 전체의 일관성을 유지할 수 있고, 세세한 스타일
지정의 필요를 줄여준다.

HTML문서에 CSS를 적용하는 방법

CSS는 HTML문서 내의어느 위치에나 올 수 있지만,
일반적으로 태그 안에 위치한다.

외부 파일 참조방법

CSS코드를 별도의 외부 소스파일에 작성해 두고
HTML에서 해당 파일을 참조하는 방법
이 방법은 한번 작성한 코드를 여러 페이지에서
재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길
경우 해당 파일을 참조하는 모든 웹페이지에 문제가
번질 수 있다는 위험도 있다.

HTML태그에 style 속성을 사용하는 방법

이 방법은 세밀한 조정이 가능하다.
전체적으로 소스코드 양이 지나치게 많아지고,
유지보수가 쉽지 않다.

CSS코드를 작성하는 기본 형식
selector {
속성1:값, 속성2:값, ...
}

selector는 {...} 범위안에 기술된 CSS구문이 적용될 대상을
의미한다.
속성의 이름은 실제 처리할 그래픽적인 속성으로, 폰트,
문단, 크기, 위치, 색상 등을 지정하며, 값은 해당 속성에
적용할 내용이다.
이러한 구조로 HTML페이지의특정 부분이나 여러 개의
요소를 selector로 지정하고 모양을 기술하는 것이 CSS의
표현 방식 이다.

기본 셀렉터의 종류

CSS에서 셀렉터를 작성하는 방법은 기본적으로 HTML의
태그이름, 클래스속성, id 속성에 대한 명시가 있다.

6-1. 태그이름
selector{...CSS본문...}
특정 태그를 가리킨다. HTML 내에 동일 태그가 존재할 경우
모든 태그요소를 일괄 처리한다.

6-2. 클래스
.selector{...CSS본문...}
셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML태그의
class속성에 점을 제외한 이름을 명시하여 지정한다.
태그의 종류를 가리지 않고 여러 요소에 복수 지정 가능하다.
재사용의 목적

6-3. id
#selector{...CSS본문...}
셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML태그의
id속성에 샵(#)을 제외한 이름을 명시하여 지정한다.
id속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.

6-4. 조합형 셀렉터
tag.calss{...CSS속성...}
tag#id{...CSS속성...}
id값이나 calss값을 태그 이름과 함께 명시하여 적용하는 형태
셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로
적용된다.

AND의 의미를 갖는 콤마(,) 사용하기
selector1, selector2, ...., selectorn{
... CSS 적용 ...
}

여러 개의 요소에 동일한 css내용을 적용하기 위해 셀렉터를
콤마(,)로 구분하여 일괄 처리 할 수 있다.
태그, class, id 등 모든 형태의 CSS셀렉터가 가능하다.

가상클래스

HTML태그에서 특정 상황이 발생했을 경우에만 적용되는
CSS셀렉터
가상클래스는 CSS의 셀렉터 이름뒤에 ":상황"의 형식으로 명시한다

복잡한 형태의 셀렉터

자식셀렉터 -> ">" 로 구분하기
자손셀렉터 -> 공백(" ")으로 구분하기
속성셀렉터 -> HTML태그의속성에 따른 구분

9-1. 자식셀렉터
">"로 구분한 구조적 표현
">"는 HTML의 계층 구조의 표현을 의미한다.
A > B일 경우 B의 요소는 반드시 A의 1depth안에 존재해야 한다.

9-2. 자손셀렉터
공백으로 구분하여 태그의 구조를 표현
자식 셀렉터가 반드시 1depth안에 존재해야 했다면,
자손 셀렉터는 depth를 제한하지않는다.
명시 과정에서 중간 단계를 생략해도 된다. 몇 depth를 더
내려가던, 지정한 태그의 범위 안에 존재하기만 하면 된다.

9-3. 속성셀렉터
태그의 속성에 따른 표현
스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이
있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라
태그 요소를 좀 더 구체적으로 가리킬 수 있다.

text-align

left
right
center
justify

text-shadow

글자에 그림자를 추가하는 속성
셀렉터 {
text-shadow : x-offset y-offset blur-radius color;
}

박스

가로축 : 부모를 가득 채운다
세로축 : 자신이 포함하고 있는 내용만큼 설정된다. 내용이 없는
경우, 높이가 형성되지 않는다.

12-1. 박스의 크기를 구성하는 속성의 종류
- width : 가로
- height : 세로
- border : 박스의 테두리
- padding : 테두리와 내용여역 사이의여백
  여백 사이즈에 대한 px단위
12-2. padding 속성
값의 지정 형식
1개의 값
-> 상/하, 좌/우 모두 같은 크기의 여백을 지정한다.
2개의 값
-> 공백으로 구분하여 2개의 값을 지정할 경우
첫 번째 값은 "상/하", 두 번째 값은 "좌/우"로 지정된다.
4개의 값
-> 공백으로 구분하여 4개의 값을 지정할 경우
첫번째 값이 상단여백, 그후 우측, 하단, 왼쪽의순서로
시계방향으로 적용된다.

상속

상속은 부모 엘리먼트의 속성을 가진 자식 엘리먼트가 물려받는
것을 의미합니다. 상속은 CSS에서 생산성을 높이기 위한 중요한
기능이다.

포지션

엘리먼트의 위치를 지정하는 4가지 방법
static
relative
absolute
fixed
bottom vs top : top이 우선
right vs left : left가 우선
css각각의 엘리먼트는 각각의 위치가 정적으로 존재한다.
즉 static 하게 위치하게 된다.여기서 me 기준으로 부모 엘리먼트
안에 존재해야 하기 때문에 left, top 등등의 옵션이무 시된다.
position을 static 이 아닌 relative로 변경해야 한다.

DAY 05

float

float는 편집 디자인에서 이미지를 삽화로 삽입할 때
사용하는 기법이다. 또한 레이아웃을 잡을 때도
사용하는 기능이기 때문에 꽤 중요하다.

multicolumn
background

background-size
-> cover : 이미지를 공간안에 꽉 채운다
-> contain : 이미지의 삭제없이 다 채운다

미디어 쿼리

미디어 쿼리는 화면 크기에 따른 각각의속성 값을 지정
하여, 여러가지 화면을 구성하는 기술이다.

@media only all and (조건문){실행문}
@media : 미디어 쿼리가 시작됨을 표시
only : 미디어 쿼리 구문을 해석하라는 명령어(생략 가능)
all : 미디어 쿼리를 해석해야할 대상을 나타냄(생략 가능)
and : 압과 뒤의 조건을 나타낸다(생략 가능)
(조건문) : 해당 조건을 설정,
max-width:이하, min-width:이상
{실행문} : 조건에 따라 실행할 스타일 설정

link와 import

외부로 파일을 빼는 방법
: html 태그로 하는 법
: css로 style태그에서 하는 법

cache

cache : 자주 접근하는 데이터를 복사 해놓는 임시 저장소
browser cache : 서버 지연을 줄이기 위해 사용하는 웹
캐시의 일종

bootstrap
바닐라 스크립트(Vanilla JS)

바닐라 자바스크립트란 플러그인이나, 라이브러리를
사용하지 않은 순수 자바스크립트를 이야기한다.
즉 바닐라 스트립트 = 자바스크립트라고 생각하면 된다.

8-1. 자바스크립트에 영향을 준 언어
java
scheme
self

8-2. 자바스크립트 버전
ECMA
ES6

변수의 사용방법

변수를 사용하기위해서는 '선언'과 '할당'의 두 영역으로
구분해야 한다.
변수의 선언
var num;
var hello;
변수의 할당
num = 12345;
hello = "안녕하세요";
hello = '안녕';

변수의 종류

javascript의 변수는 표현하는 값의 종류에 따라서
형식이 구분된다.

이러한 변수의 종류를 데이터 형이라고 한다.

	Number(정수, 실수)
	-> 숫자를 표현하거나 산술 연산을 하는데
	사용되는 데이터타입
	String(문자열)
	-> 문자열을 표현하는데 사용되는 데이터 타입.
	쌍따옴표나 홑따옴표로 감싸진 문자을 의미한다.
	Boolean(참,거짓)
	-> true, false 값을 가지는 논리 데이터 타입
	Object(객체)
	-> 객체를 저장하기 위한 데이터타입이다.
	브라우저 제어 기능, Form 제어, HTML 태그 
	요소에 대한 제어 등이 가능하다.
	Null(값 없음)
	-> 개발자가 의도적으로 변수의 공간을
	비워 놓은 상태를 의미한다.
	undefined(정의되지 않음)
	-> 처음부터 변수가 선언만 되고 아무런 값도
	할당되지 않은 상태를 의미한다. 이 상태의 변수는
	어떠한 처리도 불가능하다.

10-1. Null과 undefined의 차이

java :
-> 변수의 선언시에 자료형이 결정
-> 객체의 경우 null, 숫자형태의 변수는 0,
boolean은 false로 기본값이 할당되었다고
간주한다.
javascript
-> 변수의 선언시에는 변수의 존재 여부와
스코프(범위)만 결정되고 자료형은 값을 할당할때
자동으로 결정이된다.
-> 자료형이 결정되지 않은 상태이기 때문에
기본값이 할당될 수 없다. 무조건 undefined로
할당된다.
-> javascript는 할당되지 않은 변수에 대하여
자동으로 기본값이 적용되지 않는다. 기본값을
설정하기 위해서는 개발자가 직접 값을 할당해
주어야 하는데, null은 이 때 사용하는 객체 변수에
대한 기본값으로 사용된다.
-> 즉, null은 기능이 부여되지 않은 비어있는
객체 상태를 의미한다.

DAY 06

일치 연산자(===)

일치 연산자로 === 좌항과 우항이 '정확', '엄격'하게 같을 때
true, 다르면 flase가 된다.
일치 연산자의 부정 : !==

document.write(출력내용)

HTML페이지의 태그 안을 javascript에서는 document라고
부른다.
태그 안에 새로운 내용을 출력하자 할 경우 자바스크립트에게 "쓰다"라는 명령어를 전달한다.
HTML태그안에 출력되는 내용이므로, 다른 HTML태그를 포함하여
출력할 수 있다.
document.write("
출력할 내용
");

조건문
삼항연산자
condition ? expTrue : expFalse

condition : 조건문으로 들어갈 표현식
expTrue : 참일 때 실행할 식
expFalse : 거짓일 때 실행할 식

반복문

DAY 07

함수
1-1. 함수란

함수의 사용은 함수의 정의(선언)과 함수의
호출로 나뉜다.

함수의 정의(선언)방법

	function  함수이름(){
		... 실행할 구문..
	}

함수 호출 방법
```
	함수이름();
```
1-2. 파라미터(Parameters)
자바스크립트에서는 함수의 이름뒤에 위치한
괄호() 안에 파라미터를 기술한다.
```
	function 함수이름(파라미터){
		.. 실행할 구문..
	}
```
파라미터가 있는 함수 호출
```
	함수이름(파라미터);
```
1-3. 다중파라미터
자바스크립 함수의 다중 파라미터

function 함수이름(파라미터1, 파라미터2, ..){
... 실행할 구문 ..
}
다중 파라미터가 있는 함수 호출
```
	함수이름(파라미터1, 파라미터2, ...);
```
1-4. 리턴값
결과값 되돌려 주는 값

function f(x){
return x + 1;
}
호출
```
	var y = f(5);
```
1-5. 함수의 실행 중단
자바스크립트 함수는 처리 도중 return 문을
만나게 되면 그 즉시 실행을 중단한다.
이러한 특성을 이용하여 특정 조건이 충족되지
않을 경우등에 대한 처리중단을 목적으로
return 문을 사용할 수 있으며, 리턴값 없이 처리를
중단하고자 하는 경우에는 return 키워드만 사용한다.
이때, 값이 없이 리턴 결과를 변수에 대입한 경우,
정의되지 않은 값인 "undefined"가 대입된다.

1-6. 함수간의 호출
자바스크립트에서도 어떤 함수 안에서 다른
함수를 호출할 수 있다.
현재 함수 암에서 호출한 다른 함수의 리턴값을,
현재 함수 안에서 다른 계산을 처리하는데 활용할
수 있다.

추가된 변수 선언 방식

let, const

2-1. let, const차이점
let
-> 변수에 재할당이 가능
-> 변수 재선언 불가능
const
-> 변수 재할당 불가능
-> 변수 재선언 불가능
-> 재할당이 필요 없는 상수와 객체에는
const를 사용한다.

주요 내장함수
배열
4-1. 배열이란

변수를 그룹으로 묶는 형태의 한 종류로써, 사물함
같은 형태를 갖고 있다.
하나의 배열안에는 같은 종류(데이터 형)의 값들만
저장될수 있지만, javascript는 데이터형의 선언을
별도로 하지 않기때문에 데이터 형에 대한 제약은
없다.

4-2. 배열을 만드는 방법

let myrray = new Array(값1, 값2, ...);

let myrray = [값1, 값2, ...];

4-3. 인덱스 번호를 갖는 데이터 저장소
생성된 배열은 각가의 칸은 0부터 일련번호가
지정된다.(일련번호 = 배열의 인덱스)

let myarray = ["웹표준", "HTML5/CSS3" , "반응형 웹"];

4-4. 배열 데이터의 접근
배열이름[일련번호]

DAY 08

배열
1-1. 2차배열

행열

1-2. 2차 배열의 생성 방법
2차 배열을 1차 배열을 생성하면서 각각의 요소로 새로운 배열을
포함시키는 형태로 생성한다.

let myarray = new Array(
new Array(값1, 값2, ...),
new Array(값1, 값2, ...)
);

let myarray = [
[값1, 값2, ..],
[값1, 값2, ..]
];

1-3. 배열의 사용
배열이름[행][열]
인덱스값은 0 부터 시작된다.

1-4. 배열의 길이
행 : 배열이름.length;
열 : 배열이름[n].legnth;

DAY 09

웹브라우저와 javascript

웹브라우저에 올라가는 것은 html, css, javascript
HTML : 정보
CSS : 디자인
Javascript : 웹브라우저 HTML 제어, 액션

inline 방식

inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다.
장점은 태그에 연관된 스크립틑가 분명하게 드러난다는 점이다.
하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가
떨어진다.

Object Model

웹브라우저의 구성요소들은 하나하나가 객체화 되어있다.
자바스크립트로 이 개게를 제어해서 웹브라우저를 제어할 수 있게
된다.

3-1. window객체
window 객체는 DOM을 포함한 브라우저의 창을 나타낸다.
자바스크립트이 모든 객체, 전역 함수, 전역 변수들은 자동으로
window객체의 프로퍼티가 된다. window객체의 메소드는 전역함수
이며, window 객체의 프로퍼티는 전역 변수가 된다.

3-2. DOM
document object model

3-3. BOM
browser object model
웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로
제어할 수 있도록 제공하는 수단이다.

3-4. 최상위 객체 사용
모든 객체는 window객체의 하위 객체로써 존재한다. 내장객체 접근은

window.내장객체이름.함수이름(파라미터);
하지만, 모든 객체가 window안에 내장되어있기 때문에, window객체를
명시적으로 선언하는 것은 생략이 가는ㅇ하다.
```
	내장객체이름.함수이름(파라미터);
```
3-5. window.open()
새로운 창 열기 : 새로운 브라우저 창을 열 경우

window.open("페이지 url");
팝업창 형태로 창을 열 경우

window.open("페이지 url", "창이름:", "옵션");
현재 창 닫기
```
	window.close();
	self.close();
```
3-6. 기본 이벤트 적용 방법
링크 처리하는 태그에 대한 이벤트 처리 방법 역시
다른 HTML태그에 대한 이벤트 처리 방법과 마찬가지로 이벤트 이름을
의미하는 태그 속성을 사용한다.

href와 onclick 속성의 충돌 방지
-> 링크는 클릭했을 때, 자체적으로 페이지를 이동하기 위한
href 속성과 이벤트 처리를 위한 onclick 속성 양쪽 모두
동작하는 과정에서 서로 충돌이 발생하게 되는 경우가 있는데,
이벤트가 동작 전이나 후에 페이지가 이동해 버리는
현상이 발생하기도 한다.
-> 두 속성의 충독을 방지하기 위하여 onclick속성에 이벤트
함수를 호출 한 뒤, return false 구문을 추가하여 실행을
중단하도록 처리한다.

	<a href="#" onclick="opne1(); return false;"></a>

3-7. location 객체 개요

location객체는 웹 브라우저의 주소 표시줄을 제어한다.

주소를 변경하게 되면, 웹 브라우저는 페이지를 이동시킨다.

주소표시줄의 현재 주소 혹은 일부를 조회할 수 있다.

페이지 새로 고침
-> location 객체 안에 포함된 reload() 함수는 현재 페이지를
새로고침한다.

3-8. navigator

브라우저의 정보를 조회하기 위한 속성들을 가지고 있는 객체

navigator 객체를 사용하여, 하나의 웹 서비스로 다양한 브라우저를
지원할 수 있도록 처리하기 위한 기준이 되는 정보를 추출한다.

크로스 브라우징(cross browsing)

크로스 브라우징이란?
: 웹 페이지 제자 시에 모든 브라우저에서 깨지지 않고 의도한 대로
올바르게(호환성) 나오게 하는 작업을 말한다.
크로스 브라우징이 필요한 이유
: 브라우저 마다 랜더링 엔진이 다르기 때문이다.

document
5-1. 특정 HTML요소를 객체형태로 가져오기

document 객체는 HTML 문서를 제어하기 위하여 특정 HTML태그
요소(Element)를 id값에 의하여 객체 형태로 가져오는 기능을 제공
```
	let somel = document.getElementById("ID속성값");
```
5-2. HTML 요소의 내용 제어
객체화된 HTML 요소의 innerHTML 속성을 사용하면 해당 태그에
속해 있는 내용을 새롭게 설정하거나, 현재의 내용을 읽어올 수 있다.
```
	somel.innerHTML = "<h1>Hi</h1>"
```
5-3. Element 객체의 style 하위 객체
style 객체는 css속성에 대응되는 변수들을 내장하고 있으며,
이 변수에 특정 값을 대입하는 것으로 javascript를 통한 특정 요소의
css 제어가 가능해진다.
```
	let somEle = document.getElementById("id값");
	somEle.style.CSS대응속성 = "CSS적용값";
```

이벤트
6-1. 이벤트란?

특정한 상황이 발생했을 때 호출되도록 사용자가 정의하는 함수들
특정한 상황, 특정한 동작

6-2. this
이벤트가 발생한 대상을 필요로하는 경우 this를
통해서 참조할 수 있다.

6-2. 프로퍼티 리스너
프로퍼티리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로
이벤트를 등록하는 방식이다.

6-3. 이벤트 객체
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.

6-3. addEvnetListener()
이벤트를 등록하는 가장 권장되는 방식이다.

DAY 10

기본 동작의 취소

폼에서 submit 버튼을 누르면 데이터가 전송,
a태그를 클릭하면 href 속성의 url로 이동한다.
이러한 기본적인 동작들을 기본 이벤트라고 하는데
사용자가 만든 이벤트를 이용해서 이러한 기본
동작을 취소할 수 있다.

form태그
2-1. 입력양식에 대한 객체 획득 방법 소개

DAY 11

jQuery

라이브러리

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를
라이브러리라고 한다.

DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록
돕는 도구다

https://jquery.com/
javascript 구현에 필요한 상당수의 기능들을 미리 구현해 놓은
함수들의 집약체
이처럼 프로그래밍에 필요한 함수들을 언제든지 필요할 때 참조할 수
있도록 집약해 놓은 형태를 '라이브러리' 라고 한다.
HTML 요소 제어
요소의 탐색과 생성
ajax 통신처리
익숙한 구문
다양한 플러그인

jQuery 제어의 대상 찾기

$('li').css('color','red');$ -> jQuery
('li') -> css선택자
.css('color','red') -> 선택된 객체들에게 style을
color:red로 변경한다.
축약된 코드

innerHTML
-> 선택자.html("문장");
window.onload = function(){....}
-> $(document).ready(function(){...});
-> $(function(){...})

jQuery 제어할 대상에 접근하는 방법

jQuery는 제어할 요소를 획득하기 위하여 $() 함수 안에 제어할 대상을
가리키는 CSS셀렉터를 파라미터로 전달한다.
태그 요소
let tag = $('h1');
css클래스 요소
let mycss = $(".hello");
hello라는 id 속성을 갖는 요소
let myid = $("#id");
조합형
let my = $("a, b");
자식 항목
let my = $("a b");

이벤트

id가 btn이라는 버튼에다가 click 이벤트를 바인딩하는 방법

$("#btn").click(function(event){
.....
});

$("#btn").bind('click', function(event){
....
});

$("#btn").on('click', function(event){
....
});

keyevent

keypress 이벤트는 영문, 특수문자에 대해서는 동작하지만
한글에 대해서는 동작하지 않는다.
그러므로 균등한 키 이벤트 구현을 위해서는 keyup 이벤트를 사용해야
한다

6-1. keyCode
키보드가 자신의 어떤 키가 눌러졌는지 컴퓨터에게 보내는 데이터.
키보드의 키 하나하나에 각각 일련의 숫자값들이 할당되어 있다.
키보드는 눌러진 키에 대응되는 숫자값을 컴퓨터에게 전달한다.
javascript keycode

JSON
7-1. JSON 표기법이란?

JSON(javascript Object Notaion)은 경량의 데이터 교환형식으로
프로그래밍 언어로부터 완전히 독립적이기 때문에, 서로 다른
프로그래밍 언어간에 데이터를 교환하는데 가장 널리 사용되는
표기법이다.

7-2. JSON 표기법의 중요성
문법으로서의 사용
javascript에서는 하나의 객체안에 함수와 변수를 함께 그룹화
하여 포함시키기 위한 문법의 형태로서 JSON 표기법이 사용된다.
jQuery에서의 기본 문법 체계는 JSON으로 구성된다.
javascript 소스코드 안에서 여러개의 변수값들을 계층적으로 표현하기
위해 사용된다.
Ajax에서 사용되는 데이터 규격으로 JSON이 사용된다.

7-3. 표기법의 기본 구조
이름(key)과 값(value)의 쌍으로 이루어진 객체 구조
빈 객체('{}') 안에 배열과 같이 콤마(,)로 구별하여 여러개의 값을
하나의 객체 안에 포함시킨다. 이 때 "이름:값"의 형태로 할당한다.
```
	let 객체이름 = {
		이름 : 값, 이름 : 값
	};
```
데이터에 접근

객체이름.이름;

DAY12
1. JSON을 포함하는 JSON
1-1. JSON을 포함하는 JSON 표현

JSON 데이터의 각 항목에는 어떠한 형식의 데이터든지 할당할
수 있기 때문에, 새로운 JSON데이터를 할당하여 각각의 JSON
데이터들이 하나의 그룹 안에서 계층을 형성하도록 구성할 수
있다.
```
	let 계층이름 = {
		하위객체이름 : { 이름 : 값, 이름 : 값 },
		하위객체이름 : { 이름 : 값, 이름 : 값 }
	}

	let korea = {
		"seoul" : { "people" : 54321, "desc" : "수도" },
		"jaeju" : {  "people" : 12345, "desc" : "섬"  }
	}
```
1-2. 하위 JSON 데이터의 접근
JSON데이터에서 하위 데이터로 접근하고자 할 경우에는
점(.)을 사용해 계층을 표현한다.

객체이름.하위객체이름.값의이름;

let description = korea.seoul.desc;

1-3. 배열 JSON
일반적인 배열

let 배열이름 = [1,2,3];
배열 원소를 JSON으로 변경
javascript는 변수의 데이터 타입이 유동적이기 때문에
배열의 원소 역시 다양한 형태의 값을 저장할 수 있다.
즉 JSON 객체도 배열의 원소가 될 수 있다.
```
	let 객체이름 = [{...},{....},{...}];

	let 객체이름 = [
		{ "people" : 54321, "desc" : "수도" },
		{  "people" : 12345, "desc" : "섬"  }
	];
```
배열 JSON의 데이터 접근
배열의 index를 통한 데이터 접근에는 변함이 없다.

객체이름[0].people;
객체이름[0].desc;

이벤트 처리 함수 안에서 자기 자신을 판별하기

이벤트에 의해서 실행되는 함수 영역 안에서는 특수 키워드 this를
사용할 수 있다. 이 키워드를 jQueyr의 $()함수에 전달하면
이벤트가 발생한 자기 자신을 감지할 수 있다.
```
	$("css셀렉터").이벤트함수(function(){
		$(this)
	});
```
나는 몇번째 요소인가?
-> 특정 객체에 대하여 index() 함수의 리턴값을 사용하면
자신이 속한 부모 태그 안에서 태그 종류의 구분 없이
자신이 몇 번쨰 요소인지를 알 수 있다.
-> index()함수는 요소를 0부터 카운드 한다.
-> 태그 종류에 상관 없이 무조건 부모 요소 안에서
몇 번째 항목인지를 판별한다.

HTML 요소의 속성값 제어
3-1. 속성값 읽기

HTML 태그 요소의 특정 속성값을 얻기 위해서는 attr()함수를
사용한다.

	let 변수 = $("요소").attr("속성이름");

<img id="k" src="hello.png" >
	let src = $("#k").attr("src");
	src : hello.png

3-2. 속성값 변경/추가

HTML 태그 요소의 특정 속성값을 지정할 경우에도 attr()함수 사용
$("요소").attr("속성이름","값");
$("#k").attr("src", "world.png");

3-3. 다중처리
$("요소").attr({
"속성이름1" : "값",
"속성이름2" : "값",
"속성이름3" : "값"
});

DAY13

요소의 CSS 속성 제어
1-1. HTML태그 요소에 적용된 특정 속성값을 얻기
위해서는 CSS()함수를 사용한다.
```
	$("요소").css("속성이름", "값");
```
1-2. 속성값 변경/추가하기

HTML태그 요소에 특정 CSS값을 지정할 경우, attr()
함수와 용법이 동일하다.
```
let 변수 = $("요소").css("CSS속성이름");
```
1-3. HTML 태그 요소의 특정 클래스 적용 여부
HTML태그 요소의 특정 클래스 적용 여부는
hasClass() 메서드의 리턴값(boolean)으로 파악할 수 있다
```
	let 변수 = $("요소").hasClass("클래스이름");
```
1-4. 클래스 적용과 해제
요소에 특정 CSS클래스를 적용할 경우, addClass()
두 개 이상의 클래스를 한번에 적용할 경우 공백으로
구분해서 지정
```
	$("요소").addClass("클래스이름");
```
HTML태그 요소에 적용된 특정 CSS클래스를 제거할
경우 removeClass()함수를 사용한다.
두 개 이상의 클래스를 한번에 제거할때 공백으로 구분
```
	$("요소").removeClass("클래스이름");
```
1-5. 적용과 해제의 반복 처리

어떤 요소에 특정 클래스의 적용과 해제를 반복적으로
처리하는 것을 토글처리라고 한다.

	if( $("요소").hasClass("클래스") ){
		// class가 적용
		$("요소").removeClass("클래스");
	} else {
		// class가 미적용
		$("요소").addClass("클래스");		
	}

	-> toggleClass();

	$("요소").toggleClass("클래스이름");

DAY 14

this
1-1. this의 용법

여러개의 요소를 의미하는 css셀레터를 사용하여
이벤트를 정의 한 경우, 대상 요소들은 모두 동일한
이벤트를 발생시킬 수 있다.
이때 $(this)는 현재 이벤트가 발생한 단 하나의
요소를 가리킨다.

1-2. this를 부정하는 not(this)
$("요소")객체의 not(this)함수는 여러 HTML요소들
중 이벤트가 발생한 자신을 제외한 나머지 객체들을
가리킨다.

1-3. not()함수의 기능은 "~중에서 대상은 제외"라는 의미
".btn" 클래스를 갖는 요소 중에서 "#mybtn"만 제외

let mybtn = $("#mybtn");$ (".btn").not(mybtn).css(....);

$(".btn").not($ ("#mybtn")).css(....);

애니메이션
each

each() 메소드는 객체나 배열에서 모두 사용할 수 있는
범용적인 반복 함수이다.
length속성이 있는 배열이나 배열과 같은 객체를
전달받아, 그 길이만큼 반복해서 콜백함수를 실행한다.
객체의 경우는 객체가 가지고 있는 프로퍼티의 개수만큼
반복해서 콜백함수를 실행한다.

엘리먼트 제어
4-1. 자식으로 삽입
append(), appendTo(), html(), prepend(), prependTo(),
text()

4-2. 형제로 삽입
after(), before(), insertAfter(), insertBefore()

4-3. 부모로 감싸기
unwrap(), wrap(), wralAll(), wrapInner()

4-4. 삭제
detach(), empty(), remove(), unwrap()

4-5. 치환
replaceAll(), replaceWith()

4-6. 클래스
addClass, hasClass, removeClass, toggleClass()

4-7. 속성제어
attr(), prop(), removeAttr(), removeProp(), val()
탐색(traversing)

java, javaproject, dbms
html, css, javascript, jQuery, csproject

웹 서버 프로그램이란
90년대 CS의 주류에서 이젠 2000년 이후에는 급격하게
web으로 전환이 되었으나, 두가지의 경우 서로 장단점이 있다
Client Server 모델

간단한 구조로 되어 있다.대부분 Server에서 데이터를 처리
하고 클라이언트는 UI를 담당한다.
구조가 간단하여 속도가 좋은 특징이 있으나, 확장성은
조금 떨어진다.
장점
-> 속도가 빠르다
단점
-> 구조상 확장의 어려움이 있다.
-> Client 프로그램을 다운로드 받아 PC에 설치해야
하는 배포의 번거로움
-> 버그를 수정하여도 배포가히가 어려움
-> 특정 OS 및 하드웨어에 종속적인
Socket통신
-> 소켓통신이란 서버와 클라이언트 양방향
연결이 이루어지는 통신으로, 클라이언트도 서버로
요청을 보낼 수 있고 서버도 클라이언트로 요청을
보낼수 있는 통신
-> 클라이언트와 서버 양쪽에서 서로에게 데이터를
전달하는 방식의 양방향 통신

KoriSeung

풀스택 개발자를 목표로 합니다!

HTML & CSS & JavaScript

CSS & HTML & JavaScript

출력할 내용

0개의 댓글