ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 221128. JS
      스타터스 백엔드 3기 2022. 11. 28. 14:03

      하루입니다.

      CSS - viewport.html mediaquery_size, screen_print_css, myscreen, myprint

      JS - var_let_const, inout, start, operator, test

       

      오늘 배운 것

      1. 저번 주 정리 (html, css)

      2. flex를 사용한 중앙정렬

       

       

       

       

      저번 주 리뷰

      • 색 표현:        #16진수 6자리, rgb(0-255 10진수, , ), 색상명
      • 크기 표현:    px, 2em, %, wv
      • 모든 html 요소들은 가로, 세로, 외부여백, 내부여백, 선이 있다. 
      • - width, height, margin, padding, border-width
      • - display: block, inline, inline-block
      • - inline은 마진 세로 높이 줘봤자 소용 없다. inline은 무조건 한 줄에 여러 개라서 전혀 적용되지 않는다. 그래서 인라인 방식으로 나란히 나타낼 거지만, 블록의 가로 세로 속성도 들고오고 싶을 때 사용한다. 
      • 배경
      • background-xxxx
      • background-color
      • background-image: url('http:// ... /a.jpg')

       

       

      중앙정렬 방법 두 가지

      // 1. 리스트를 inline-block 속성으로 변경 후, ol의 text-align을 center로 준다.
	#mainmenu li {
		display: inline-block;
		background-color: navy;
	}
		
	ol {
		text-align: center;
	}
      // 2. list를 inline-block으로 준 다음, 
//    display: flex; flex-direction: rox; justifi-content: center; 로 준다.
	#mainmenu li {
		display: inline-block;
		background-color: navy;
	}
		
	#mainmenu {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

       

       

       

      VIEWPORT

      반응형 웹

      뷰포트: 실제 내용이 표시되는 영역

       

      뷰포트 지정하기

      • name="viewport" : 설정 해야 함
      • content="width=device-width" : 컨텐츠 넓이를 디바이스 넓이에 맞춘다
      • user-scalable=no : 확대 / 축소 가능 여부
      • initial-scale=1 : 초기 확대배율 값
      • vw: viewport의 width의 1%와 같다. 
      • vh: viewport의 height의 1%와 같다. 
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

       

       

      미디어 쿼리 문법

      접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

      • @media screen and (max-width:500px)
      • 핸드폰으로 볼 때는 최대 가로가 500px가 되면 좋겠다. 
      • @media tv and (max-width:500px)
      • @media audio and (max-width:500px)
      • @media print and (max-width:500px)

      // 뷰포트 설정 후 해야 한다.
// screen에서 볼 때, 최대 가로가 500px 이하라면 폰트를 10pt로 만들고 중앙정렬한다.
@media screen and (max-width:500px) {
	h1 {
		font-size: 10px;
		text-align: center;
	}
}

       

       

       

       

      화면 크기에 따라 배경 달라지게 하기

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1">
<title>Insert title here</title>
<style type="text/css">
/*여기는 미디어쿼리 지정하지 않은 기본이다.*/
	body {
		background-image: url('/html/images/google.png');
		background-position: top center;
		background-repeat: no-repeat; 		// 이미지 반복 안 함
		background-attachment: fixed; 		// 이미지 상단고정
	}
	
/* 큰 크기 설정부터 적는다.
   작은 크기부터 적으면 가장 큰 크기에 다 먹힌다.
   바로 아래처럼 min-width와 max-width를 적어주면 상관없다.
*/
@media screen and (min-width:801px) and (max-width:1000px) {
	body {
		background-image: url('/html/images/html5.jpg');
		background-position: right center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}

@media screen and (max-width:800px) {
	body {
		background-image: url('/html/images/google.png');
		background-position: right center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}

/* 가로로 볼 때만 활성화된다. 이 경우 굳이 width 속성을 적지 않는다. */
@media screen and (orientation:landscape){
	body {
		background-image: url('/html/images/google.png');
		background-position: bottom center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}

</style>
</head>
<body>
</body>
</html>

       

       

      화면 설정에 따라 다르게 보이게 하기

      <meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="myscreen.css" />
<link rel="stylesheet" href="myprint.css" />
      @charset "UTF-8";
@media print {		// 인쇄 페이지에서 배경색은 핑크색
    body {	background-color: pink;	}
}

@charset "UTF-8";
@media screen {		// 스크린에서 배경색은 녹색
    body {	background-color: green;	}
}

       

       

       

      자바스크립트

      자바스크립트의 기본 입출력 방법

      • alert alert("팝업창 출력메세지"); : 가장 먼저 보인다, 모달의 성격을 띈다, 확인을 눌러야 사라진다
      • document.write() : 현재 브라우저 파일 body 안으로 출력된다.
      • console.log : 개발자 도구창의 콘솔로 출력된다. 
      • 자바가 원조고 자바스크립트가 자바의 문법을 모방했다.
       // 메모리 내부에 100을 저장하고, 그 메모리에 a라는 이름을 지어주자.
 var a = 100;		// 변수 선언문
 document.write("<h3>"+a+"</h3>"); //a라는 이름의 메모리 저장값을 출력한다.
 var b = 3.14;
 document.write(b+"<br>");

      이렇게 나온다.

       

       

       

      자바스크립트에서 입력을 받는 방법

      • prompt("메시지");          값 키보드로 입력
      • comfirm("메시지");       확인/취소
      // prompt
// input값을 name = value에 담는 것처럼, 입력값을 var title에 담자
 var title = prompt("과정명을 입력하세요");
 document.write("<h3>"+title+"</h3>");
 
 // confirm
 var delete_Result = confirm("삭제하시겠습니까?");
 document.write("<h3>"+delete_Result+"</h3>");

// 특이점
 document.write("<h3>"+typeof(title)+"</h3>");			// string (prompt)
 document.write("<h3>"+typeof(delete_Result)+"</h3>");		// boolean (boolean)

       

       

       

      자바스크립트의 변수

      • 데이터나 결과값처럼 메모리를 저장하고, 사용될 수 있는 값이다.
      • 메모리에 저장된 값의 이름이다.
      • 숫자형
      • 문자형 ('a', 'java')
      • 논리값 (true, false)
      • 함수
      • 객체
      • undefined

       

      숫자형

       var a = 100;

       

      문자형

       var c = "입";
 var d = "입력";
 document.write("<h3>"+d+"</h3>");

       

      논리값형

      // 논리값형
 var e = true;	
 document.write("<h3>"+e+"</h3>");
 
 e = false;
 document.write("<h3>"+e+"</h3>");
 
 e = 10 > 5;
 document.write("<h3>"+e+"</h3>");
 // 부등식의 결과가 값으로 나온다. true이다.

       

      undefined

       var f;
 // 결과: undefined
 // 의도적으로 이렇게 적을 수 있다.

       

       

      array

      배열은 객체의 하나이다.

       var array = [1, 2, 3, 4, 5];
 document.write("<h3>"+array[0]+"</h3>");		// 1
 
 var array = new Array(5); // 5개 데이터를 저장하는 배열을 만들겠다.
 document.write("<h3>"+array[0]+"</h3>");		// undefined

       

       

      null

      • 객체와 연관된 값이다.

       

       

      변수 이름 주기

      • var 변수이름 [=값 생략]
      • 아니 엇덕케 값 없이 변수를 만들지?
      • 왜냐면 undefined도 null도 값이니까 ...

       

       

      변수 이름 만들기

      1. 길이 제한 없다.

      2. 대소문자 구분한다.

      3. 숫자 가능하다. 단, 숫자로 시작은 불가하다.

      4. 특수문자는 _만 가능하다.

      5. 키워드 사용 불가하다.

      6. 2단어 이상 결합시, 시작은 소문자, 다음부터는 대문자를 권고한다. 

          ex) sumOfNumber

       

       

      ecma script 6문법

      var 변수 중복 선언 가능, 호이스팅 최근에는 let, const를 많이 사용한다.
      let 변수 중복 선언 불가능, 선언 후 수정 가능 Uncaught ReferenceError: Cannot access 'test2' before initialization
      const 변수 생성 후 수정 불가능, 상수 Uncaught TypeError: Assignment to constant variable.

       

       

      자바스크립트에서 오류를 알려주는 방법

      • 컴파일적으로 처음부터 x로 보여주는 것. 고치지 않으면 파일 자체를 실행할 수 없다.
      • 문제가 있는 곳부터 수행되지 않는 것. 콘솔에서 봐야 한다.
      • 반드시 콘솔을 보면서 하자. 

       

       

      코딩 컨벤션

      자바스크립트는 데이터 유형이 유연해서 오류 발생 확률이 높기 때문임.

      팀 내에서 정하는 것도 좋다.

       

       

      작성 규칙

      1. 들여쓰기한다.

      2. 세미콜론 붙이자.

      3. 공백 넣어서 읽기 좋게 작성하자. var i =  num + 10;

      4. 코드를 잘 설명하는 주석을 작성한다.

       

       

      연산자

      기능, 항의 갯수 산술연산자 비교연산자 논리연산자 대입(할당)연산자 조건삼항연산자
      단항 increment  ++
      decrement --      		   not  :  !   ? : 
      이항 사칙연산
      + - * /  %      		 > < >= <= 
      == === 
      != !==       		 or  :  ||
      and  :  &&      		 =  +=  -=

       

       

       

      대입(할당)연산자

          let result4 = 20;
    let result5 = ++result4;
    document.write("<h3>" + result5 + "</h3>")	
    // 21
	
    let result6 = 20;
    let result7 = result6++;
    document.write("<h3>" + result7 + "</h3>")
    // 20

    // A와 B의 값 바꾸기
    let a = 10;
    let b = 20;
    b = a;
    a += b;
    document.write("<h3> a와 b의 값 교환 결과는? " + "a=" + a + ", b= " + b + "</h3>")	

    // a와 b의 값 교환 결과는? a=20, b= 10

       

       

      연결연산자

      • 숫자 + 숫자 = 산술
      • 문자 + 숫자 = 연결
      • 문자 + 문자 = 연결

       

      	let age = prompt("나이를 입력하세요");
	document.write("<h3>" + age + 10 + "</h3>");
	// prompt의 출력값은 string이다. 그래서 string + int 형이 되어 2010 이런 결과가 나온다.
    
	document.write("<h3>" + (window.parseInt(age) + 10) + "</h3>");
	// 연산하려는 것에 괄호도 있어야 하고, parseInt도 필요하다.
    	// age = 20이라면 30이 나온다.
	// 오 여기서 age에 string 넣으면 NaN 뜬당!!!

       

       

       

       

      비교연산자

       

      • 문자 데이터의 비교 : 사전순이다.
      • 1. 숫자
      • 2. 대문자
      • 3. 소문자
      • 4. 한글
      • 뒤에 나올수록 크다.
      • === 는 값과 타입을 모두 비교한다.
      document.write("<h3>" + ('java' > 'JAVA') + "</h3>">);
// true, 소문자가 더 뒤에 나오기 때문

       

       

       

       

      조건 삼항 연산자

      // 입력된 값이 20 초과면 성년, 아니면 미성년
let result8 = age > 20 ? "성년" : "미성년";
document.write("<h3> 성년여부: " + result8 + "<h3>");

       

       

       

       

       

      if-else 조건문

       

      let은 블록 안에서만 사용 가능하다. 호이스팅 안 되니까.

      let result10;

if(age >= 0) {
    if (age >= 40){
        result10 = "중년";
    } else if (age >= 20) {
        result10 = "청년";
    } else if (age >= 8){
        result10 = "취학아동";
    } else {
        result10 = "미취학아동";
    }
} else {
    result10 = "유효하지 않은 나이입니다.";
}

document.write("<h3> 성년여부(if-else 조건문): " + result10 + "<h3>");

       

       

       

       

      반복문

      for(시작문장; 반복조건문장; 변화식) {

              반복 수행 문장

      }

       

      continue : 특정 조건 나오면 넘어가라

      break : 특정 조건 나오면 멈춰라

       

       

      	// 백문이 불여일타
    let result9;
	
	if (age >= 20){
		result9 = "성년";
	} else {
		result9 = "미성년";
	}
	document.write("<h3> 성년여부(if-else 조건문): " + result9 + "<h3>");

	if(age >= 0 && age <= 60) {
		if (age >= 40 && age <= 60){
			result10 = "중년";
		} else if (age >= 20) {
			result10 = "청년";
		} else if (age >= 8){
			result10 = "취학아동";
		} else {
			result10 = "미취학아동";
		}
	} else {
		result10 = "유효하지 않은 나이입니다.";
	}
	document.write("<h3> 성년여부(if-else 조건문): " + result10 + "<h3>");
	
/*
	for (let i = 1; i <= age; i ++) {
		document.write(i+"<br>");
		// 얘는 값만 비교하는 연산자라서 string인 age와 산술비교 가능하다.
	}
	*/
	let sum = 0;
		
	for (let i = 1; i <= 10; i ++) {
		sum = sum + i;
		document.write(i + "까지의 합계는 " + sum + "입니다.<br>");
	}
	document.write("최종 합계는 " + sum + "입니다.<br><br>");
	
	// 구구단 출력
	// 1개단 2*1 ~ 2*9
	for(let dan = 2; dan <= 9; dan++) {
		document.write(dan + "단 출력" + "<br>");
		for(let i = 1; i<=9; i++) {
			document.write(dan +" * "+ i + " = " + i*dan+ "<br>");
		}
	}document.write("<br>");

	// 구구단을 테이블 안으로
	document.write("<table style='border: 2px solid blue'>");
	for(let i = 1; i<=9; i++) {
		document.write("<tr>");
		for(let dan = 2; dan <= 9; dan++) {
			if (dan === 5) {
				continue;
			}
			document.write("<td style='border: 2px solid blue'>" + dan + "*" + i + "=" + dan*i + "</td>")
		}
		document.write("</tr>");
	}
	document.write("</table>");

       

       

       

       

       

       

       

       

      이클립스에서 자바스크립트 플러그인 설치하는 법

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      '스타터스 백엔드 3기' 카테고리의 다른 글

      1129. JS (시계, 계산기, 이벤트, 무명함수, 화살표함수)  (0) 2022.11.29
      <button /> 과 <input type="button"/> 의 차이점  (0) 2022.11.29
      유데미 스타터스 취업 부트캠프 3기 - 백엔드 1주차  (1) 2022.11.27
      1125. CSS  (0) 2022.11.25
      221125 html5 tag  (0) 2022.11.25

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바