카테고리 없음

40일차 공부 반응형 웹 디자인 MediaQuery, ViewportMeta태그, JavaScript

이즈라핀 2020. 6. 3. 18:21

1 교시

 

** Dynamic Web Project

=> Java Resources

         src : 컴파일을 할 수 있는 파일 - 이 디렉토리의 내용만 컴파일

         src 디텍토리에서 만든 것을 제외하고는 나중에 WebContent 디렉토리로 이동된다.

=> WebContent : 웹 프로젝트에서 사용하는 파일

         WenContent/WEB-INF/classes: src에서 만든 소스 파일의 클래스 파일

 

 

** Media Query

=> 조건에 따라 sytle을 다르게 설정하는 것

=> 조건에 디바이스, 화면 크기, 물리적은 크기 등

=> 하나의 웹 애플리케이션을 구현하고 상황에 따라 컨텐츠를 다른 방법으로 보여지도록 구현하기 위해서 등장

 

** Viewport Meta 태그

=> 화면에 대한 옵션을 설정하는 태그

 

** 반응형 웹 디자인(면접시 대답가능 수준으로 암기)

=> 창의 크기에 상관없이 컨텐츠를 사용할 수 있도록 하는 것

=> 미디어 쿼리와 유동형 레이아웃을 이용해서 생성

유동형 레이아웃 : 컨텐츠의 크기를 절대단위를 사용하지 말고 상대단위를 이용

미디어 쿼리 : 디바이스나 브라우저의 크기를 이용해서 다른 디자인을 적용

=> 한계 : 반응형 웹 디자인이 스마트폰과 같은 작은 크기의 디바이스에서도 동일한 컨턴츠를 사용하는 것을 별도의 페이지 없이 지원하기 위해서 출발했는데 스마트폰에서는 단지 보기만 하는 것이 아니고 스마트폰만의 별도의 기능을 사용하기도 하기 때문에 별도의 웹사이트를 구현해서 지원하거나 native app 등을 생성해서 지원을 하기도 한다.

 

=> 유동형 레이아웃을 사용할 때 주의할 점은 브라우저 창이 너무 작어지거나 너무 커지면 컨텐츠의 내용이 정확하게 보이지 않을 수 있으므로 max-width나 min-width 등의 속성을 이용해서 크기에 제한을 둘 필요가 있다.

 

 

** CSS (공부해야 할 것들)

=> 스타일 시트 적용 방법

=> 스타일 시트 작성 방법

=> Media Query

=> viewport

=> 절대 단위와 상대 단위의 차이점과 사용 용도

=> 반응형 웹 디자인 (여기까지는 꼭 알아두자.)

 

=> 선택자

=> 속성

 

 

2~3 교시

 

** Java Script

=> 웹 브라우저가 해석해서 실행하는 스크립트 언어

=> HTML5 API의 기반 언어

 

1. 특징

=> 대소문자 구별

=> 동적 바인딩(Dynamic Binding) : 실행 될 때 값을 결정

=> HTML에 혼합해서 사용

=> 확장자는 일반적으로 js

 

2. 라이브러리나 프레임워크

=> TypeScript : JavaScript에 객체 지향의 개념을 도입한 언어

=> jQuery : Cross Browsing을 쉽게 구현하도록 해주는 라이브러리

jQueryUI.js(UI 처리를 추가), jquerymoblile.js(모바일 웹을 쉽게 개발)도 지원

다양한 플러그 인을 가지고 있어서 웹 페이지 개발에서 가장 많이 사용하는 라이브러리

 

=> d3js : 시각화 지원 라이브러리

 

=> react, vue, angular(TypeScript 사용) : MVC 구현을 위한 라이브러리

=> ionic, react-native : 스마트폰 애플리케이션 구현을 위한 라이브러리

=> node, express : 웹 서버 구현을 위한 라이브러리

=> tensorflow : 머신러닝(AI - 인공지능) 라이브러리

 

3. java와 JavaScript

=> java는 일반 애플리케이션 구현을 위한 프로그래밍 언어

=> JavaScript는 웹 브라우저 안에서 동작하는 애플리케이션 구현을 위한 프로그래밍 언어

=> Java의 모든 예약어가 JavaScript 에서도 예약어이고 Math 와 Date클래스는 Java의 것을 가져다가 JavaScript에서 구현

 

4. JavaScript 작성 방법

1) external

=> 외부에 JavaScript파일을 만들고 가져와서 사용

<script src="javascript 파일의 url"></script>

 

2) internal

=> html 파일 안에 작성

<script>

          내용

</script>

 

3) inline

=> 태그 내부에 작성

<태그 이벤트="script:내용"></태그>

=> script: 는 생략가능

 

4) 주의

=> 스크립트 코드는 HTML 태그들을 읽으면서 수행되기 때문에 아직 만들어지지 않은 객체는 사용할 수 없다.

=> 스크립트 코드들은 에러가 없다.

한 줄 씩 읽으면서 수행하기 때문이다.

문법에 맞지 않는 코드를 작성하면 그 문장 이전까지 실행하고 멈추기도 한다.

 

=> ; 은 하나의 명령어 종료를 의미하는데 줄바꿈도 동일한 기능을 제공

한 줄에 하나의 명령문만 작성하면  ; 은 생략해도 되지만 한 줄에 2개 이상의 명령문을 작성할 대는 구분하기 위해서 ; 을 반드시 작성해야 한다.

python, kotlin, swift 모두 동일

=> 문자와 문자열 구분이 없으면 작은 따옴표와 큰 따옴표 모두 사용이 가능하지만 하나의 문자열에서 작은 따옴표와 큰따옴표가 모두 사용되면 나중에 사용한 것을 먼저 닫아야 한다.

 

=> 제어문자 사용 가능

\n : 줄 바꿈

\t : 탭

\\ : \

\'

\"

 

5. 주석

// : 한 줄 주석

/* */ : 한 줄 이상의 주석

 

6. 출력

=> document.write(내용) : 모아서 한꺼번에 출력

=> document.writeln(내용) : 명령문을 만날때마다 출력

 

=> alert(내용) : 대화상자에 출력

 

=> console.log(내용) : 브라우저의 검사 창에 출력

디버깅을 위해서 사용

 

7. 스크립트 출력 연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 출력</title>
<script>
	document.writeln("<h3>본문에 출력</h3>");
	
	 //팝업창이 차단되어 있으면 나오지 않는다. 모달이라서 이 창을 해결하지 않으면 다음 코드로 안넘어간다.
	// 여기까지는 아무런 문제가 없다는걸 확인할 용도로 사용하기도 한다.
	alert("대화상자에 출력");
	
	//브라우저의 콘솔에 출력 : 디버깅에 많이 이용
	console.log("콘솔에 출력");
</script>
</head>
<body>
	
</body>
</html>

 

 

4 교시

 

8. 변수 선언과 사용

1) 변수 선언

var 변수명;    // 이렇게 만들면 지역변수가 된다.

지역변수(local variable) : 만들어진 영역 내에서만 사용이 가능

 

변수명;  // 이렇게 만들면 전역변수가 된다.

전역변수(globla variable) : 만들어지고 나면 영역에 상관없이 사용이 가능

 

=> 변수를 만들 때 자료형에 상관없이 var를 붙이는데 이유는 자바스크립트에서는 모든 자료형이 전부 참조형이기 때문이다.

실제 자료형은 데이터를 대입할 때 결정한다.

이렇게 데이터를 대입할 때 자료형을 결정하는 것을 동적 바인딩이라고 하며 동적바인딩 언어는 변수를 만들면 다른 자료형의 데이터도 대입이 가능하다.

 

=> 변수의 이름은 영문과 숫자 그리고 특수문자(_) 를 이용해서 생성

숫자로 시작할 수 없고 중간에 공백이 들어갈 수 없다.

 

2) 변수의 사용

=> 변수는 =의 왼쪽에 있을 대는 데이터를 저장할 공간을 의미하지만 그 이외의 경우는 저장하고 있는 값이다.

=> 출력하는 메소드에 변수이름을 대입하면 toString()의 결과가 리턴된다.

var a = 10;

alert(a);  // a의 내용을 출력한다?? X    // a의 toString()의 결과를 출력한다. O

=> 변수에 값을 대입하지 않고 사용하면 undefine이 출력되거나 오류가 발생

 

3) Literal

=> 사용자가 직접 입력하는 데이터

Boolean: true, false

Number : 정수와 실수

Strinf : 작은 따옴표나 큰 따옴표 안에 작성

null : 가리키는 데이터가 없다.

undefined : 변수가 없다.

 

4) 자료형 확인 연산자

typeof 데이터 : 자료형을 문자열로 리턴

 

 

 

 

5 교시

 

5) 배열 - 다른 언어의 LinkedList

=> 생성

[데이터 나열[

new Array(초기개수)

=> 값을 대입

배열이름[인덱스]= 값

 

=> 값을 사용

배열이름[인덱스]

 

=> 배열의 데이터 개수 : length

 

=> toString이 재정의 되어 있어서 toString을 호출하면 배열을 요소 각각의 toString을 호출해서 [결과, 결과...] 리턴

 

9. Type Casting(형 변환)

1) 자동 형 변환

=> 데이터의 자료형이 자동으로 변환되는 것

=> 문자열 데이터와 숫자 데이터를 + 연산을 하게 되면 숫자데이터를 문자열로 변환해서 이어붙이기를 해준다

=> 문자열로 만들어진 숫자 데이터를 * 연산을 하게 되면 숫자로 변환해서 수행

 

2) 강제 형 변환

=> 데이터의 자료형을 강제로 변환하는 것

=> 문자열로 변환할 때는 toString()의 결과 사용

=> 문자열 데이터를 숫자로 변환할 때는 Number(문자열)

=> 문자열 데이터를 Boolean으로 변환 할 때는 Boolean(문자열)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형 변환</title>

<script src="js/typecasting.js"></script>
</head>
<body>

</body>
</html>

 

.js 파일을 같은 레벨에 폴더를 만들고 그 안에 생성

// 순자와 문자열을더하기 때문에 앞의 숫자를 "100"으로 변환
document.writeln(100 + "200" + "<br/>");
// 문자열과 숫자는 곱하기가 안되는데 문자열을 100으로 변환해서 수행
document.writeln("100" * 200 + "<br/>");

// 강제 형 변환
document.writeln(100 + Number("200") + "<br/>");
var n =100
// 숫자를 문자열로 변환해서 사용
document.writeln(n.toString() + 200 + "<br/>");

 

 

 

10. 404 에러

=> 잘못된 url을 입력

=> css, js, image 등의 외부 자원의 경로가 맞는지 확인

=> 브라우저의 URL을 직접 입력한 경우에는 URL을 확인

 

11. Operator - 연산자

1) Operand(피연산자 - 연산에 사용하는 데이터)의 개수에 따른 분류

=> Unary(단항 - 피연산자가 1개)

=> Binary(이항 - 피연산자가 2개)

=> Thenary(삼항 - 피연산자가 3개)

 

2) 기능에 따른 분류

( ) : 연산의 우선순위를 변경하기 위한 연산

[ ] : 배열의 크기나 인덱스를 설정하기 위한 연산자

 

! : not - Boolean 데이터에 사용해서 true와 false를 반대로 만들어주는 연산자

+ : 양수 부호

- : 음수 부호

typeof : 자료형 확인 연산자

 

++ : 변수의 값을 1증가

-- : 변수의 값을 1감소

=> 이 2개의 연산자는 특별하게 데이터의 앞과 뒤 모두 사용 가능

=> 앞에 사용하면 증감을 먼저하고 명령문에 사용하고 뒤에 사용하면 명령문에 변수의 값을 사용하고 증감을 수행

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>

<script>
	var n = 0;
	// ++ 가 앞에 붙으면 읽으면서 수행 : 동적 바인딩 언어
	// 정적 바인딩 언어  : 전부 읽 고 난 후 값을 대입하고 난 후 실행
	// ++나 -- 가 앞에 잇으면 증감을 하고 명령을 수행
	var result = ++n + ++n;
	document.writeln("<p>결과:" + result + "</p>");
</script>

</head>
<body>

</body>
</html>

위의 결과는 3

 

 

=> 산술 연산자

% : 너머지 구해주는 연산자 - 실수를 가지고 연산을 하면 이상한 결과

*,/ : 곱셈과 나눗셈을 위한 연산자

+, - : 덧셈과 뺄셈을 위한 연산자 - 문자열을 가지고 + 연산을 하면 문자열 이어붙이기 연산을 수행

 

=> 비트 연산자 : 정수 데이터를 가지고 연산을 수행하는데 2진수로 변환해서 수행하고 결과를 다시 10진수로 리턴하는 연산

 

~ : 1의 보수 연산자

부호- : 2의 보수 연산자

& : bit and - 둘다 1일 때만 1, 나머지 경우는 0

| : bit or - 둘 다 0일 때 만 0, 나머지 경우는 1

^ : bit xor - 두개가 같으면 0, 다르면 1

=> 그래픽 프로그래밍이나 시스템 프로그래밍 그리고 윈도우 프로그래밍에서 단축키 만들 때 많이 이용한다.

 

<<, >>, >>> : 비트 단위로 밀어내는 연산자

=> 왼쪽으로 1번 밀면 2배

=> 오른쪽으로 1번 밀면 1/2

 

>, >=, <, <= : 비교 연산자

=> 숫자와 문자 모두 크기 비교 가능

=> 문자는 맨 앞글자부터 한글자 씩 코드 값을 비교하는 방식

Hello > hello : false

Hello World > Hello : true

 

연산자 본연의 기능에 새로운 기능을 추가시컨 것을 연산자 오버로딩(Overloading)

 

==, ===, != : 항등 연산자

== 는 값만 확인해서 값이 같으면 true 그렇지 않으면 false

=== 는 값과 자료형 까지 확인해서 값과 자료형 모두 같으면 true 그렇지 않으면 false

!= 는 다른 경우 true이고 그렇지 않으면 false

 

"200" == "200" : true

"200" === 200 ; false

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>

<script>
	var n = 0;
	// ++ 가 앞에 붙으면 읽으면서 수행 : 동적 바인딩 언어
	// 정적 바인딩 언어  : 전부 읽 고 난 후 값을 대입하고 난 후 실행
	// ++나 -- 가 앞에 잇으면 증감을 하고 명령을 수행
	var result = ++n + ++n;
	document.writeln("<p>결과:" + result + "</p>");
	
	var n1 = 20; // 00000000 00010100
	var n2 = 17; // 00000000 00010001
	
	console.log(n1 & n2) //16
	console.log(n1 | n2) //21
	console.log(n1 ^ n2) //5
	
	console.log("200" == 200) // 값만 확인하므로 true
	console.log("200" === 200) // 자료형이 달라서 false
	var x1 = null; //null
	var x2; // undefined
	console.log(x1 == x2) // 값만 확인해서 true
	console.log(x1 === x2) // 자료형이 달라서 false	
	
</script>

</head>
<body>

</body>
</html>

 

 

&& : 논리 and - 두개의 데이터 모두 true 인 경우만 true, 하나라도 false가 있으면 false

|| ; 논리 or - 두개의 데이터 모두 false인 경우만 false, 하나라도 true가 있으면 true

=> &&는 앞의 결과가 false이면 뒤의 결과를 확인하지 않음

=> || 는 앞의 결과가 true이면 뒤의 결과를 확인하지 않음

 

var su = 289;

 

// su가 3의 배수이고 4의 배수는 아닌지 확인

console.log(su %3 ==0 && su% 4!=0);

 

// 1-1000까지에서 3의 배수이고 4의 배수인 수를 출력

// 3의 배수일 확률은 33%이고 4의 배수일 확률은 25%이므로 4의 배수를 먼저 확인하는 것이 알고리즘 상 유리.

 

for(var i=1; i<=1000; i=i+1){

       if( i%3==0 && i%4==0){

               system.out.println(i);

       }

}

for(var i=1; i<=1000; i=i+1){

       if( i%4==0 && i%3==0){

               system.out.println(i);

       }

}

결과는 같겠지만 아래것이 걸러질 확률이 더 적어서 좋다.

 

표현식? 참일 때 내용: 거짓일 때 내용 : 삼항 연산자

=: 왼쪽의 변수에 오른쪽의 결과를 대입

+=: 왼쪽의 변수에 왼쪽의 변수에 저장된 값과 오른쪽의 값을 더해서 대입

 

=> new : 생성자를 호출해서 인스턴스를 생성하고 그 참조를 리턴하는 연산자

=> this : 생성자나 메소드에서 인스턴스 자신을 가리키는 참조연산자

=> typeof : 인스턴스의 자료형을 문자열로 리턴해주는 연산자

 

=> delete : 변수가 저장하고 있는 영역을 삭제해버리는 연산자

자바스크립트에서는 배열의 요소도 삭제할 수 있다.

자바스크립트의 배열은 LinkedList이다.

지워지면 undefined 가 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자</title>

<script>
	var n = 0;
	// ++ 가 앞에 붙으면 읽으면서 수행 : 동적 바인딩 언어
	// 정적 바인딩 언어  : 전부 읽 고 난 후 값을 대입하고 난 후 실행
	// ++나 -- 가 앞에 잇으면 증감을 하고 명령을 수행
	var result = ++n + ++n;
	document.writeln("<p>결과:" + result + "</p>");
	
	var n1 = 20; // 00000000 00010100
	var n2 = 17; // 00000000 00010001
	
	console.log(n1 & n2) //16
	console.log(n1 | n2) //21
	console.log(n1 ^ n2) //5
	
	console.log("200" == 200) // 값만 확인하므로 true
	console.log("200" === 200) // 자료형이 달라서 false
	var x1 = null; //null
	var x2; // undefined
	console.log(x1 == x2) // 값만 확인해서 true
	console.log(x1 === x2) // 자료형이 달라서 false
	
	var ar = ["Java", "C", "C++", "Python", "JavaScript", "C#", "Swift", "Kotlin", "Ruby", "PHP", "SQL", "Closure", "Rust", "Haskell", "Golang", "Scala"]
	console.log(ar);
	
	// 9번 삭제
	delete ar[9];
	console.log(ar);
	console.log(ar[9]); //undefined
	
</script>

</head>
<body>

</body>
</html>

 

=> instance of

인스턴스 instance of 클래스 : 인스턴스가 클래스로 부터 만들어졌는지를 리렅ㄴ

=> in

배열이나 객체의 속성을 순서대로 접근하기 위한 연산자

for(임시변수 in 배열이나 객체){

}

배열의 경우는 인덱스가 임시변수에 대입되고 객체의 경우는 속성이 임시변수에 순서대로 대입된다.

 

 

 

8 교시

 

** 제어문 : Control Statement

=> 프로그램의 흐름은 왼쪽에서 오른쪽으로 위에서 아래로 내려가지만 제어문을 이용하면 분기(선택)를 할 수 있고 반복할 수 있다.

 

1. 제어문의 종류

1) 분기 - condition

if          : 조건에 의한 분기

switch    : 값에 의한 분기

 

2) 반복 - loop, iteration

for

while

do~while

 

3) 기타 제어문

break      : switch와 반복문에서 사용

continue  : 반복문에서만 사용 가능

return     : 함수나 메소드에서만 사용 가능

 

4) expression : 표현식

=> 변수, 연산, 메소드 호출 모두 표현식인데 표현식이라고 할 때는 대부분의 경우 결과가 리턴되는 경우이다.

 

2. if

=> 조건에 의한 분기

if(boolean이 나오는 표현식){

        ()의 결과가 true일 때 수행할 내용;

}else if{boolean 이 나오는 표현식){

        위의 boolean 식이 false이고 이번 블럭의 표현식이 true인 경우 수행할 내용;

}else{

        앞에 나옴 모든 표현식이 false인 경우 수행할 내용;

}

=> if는 필수이고 else if는 선택인데 개수 제한이 없으며 else도 선택인데 else는 1번만 나와야 한다.

 

3. switch

=> 값에 의한 분기 -프로그래밍 언어마다 다르게 적용

=> switch에 사용할 수 잇는 자료형 : 숫자와 문자열 모두 가능

=> fallthrough : break가 없을 때 어떻게 동작

javascript에서는 break가 없으면 break를 만날 때까지 모든 문장을 수행

 

switch(변수 또는 표현식){

          case 값1:

                     표현식의 결과가 값1일 때 수행할 내용;

                     break;

          case 값2:

                     표현식의 결과가 값2일 때 수행할 내용;

                     break;

          ...

          default:

                     앞의 모든 표현식과 일치하는 값이 없을 때 수행할 내용;

                     break;

}

=> switch로 구현할 수 있는 것들은 if로 전부 구현 가능하지만 if로 구현한 모든 것이 switch로 구현할 수 있지는 않다.

일반적으로 switch가 if보다는 수행속도가 빠르고 가독성이 좋다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제어문</title>

<script>
	var score = 87;
	// score가 60이상이면 합격 아니면 불합격이라고 출력
	// document.write("합격":<br/>);
	if(score >= 80){
		document.write("합격<br/>");
	}else{
		document.write("불합격<br/>");
	}
	// score가 80이상이면 우수
	// score가 80보다 작고 60이상이면 보통
	// score가 60미만이면 부진이라고 출력
	if(score >=80){
		document.write("우수<br/>");
	}else if(score <80 && score >=60){
		document.write("보통<br/>");
	}else{
		document.write("부진<br/>");
	}
	
	var menu = 3;
	// menu의 값이 1이면 해장국
	// menu의 값이 2이면 육개장
	// menu의 값이 3이면 냉모밀
	// menu의 값이 4이면 돈가스
	// 나머지는 설렁탕
	// switch를 이용해서 해결
	var china = 4;
	switch(menu){
		case 1:
			document.write("해장국<br/>");
			break;
		case 2:
			document.write("육개장<br/>");
			break;
		case 3:
			document.write("냉모밀<br/>");
			break;
		case china:
			document.write("돈가스<br/>");
			break;
		default:
			document.write("설렁탕<br/>");
		break;
	}
	
</script>

</head>
<body>

</body>
</html>