데이터: data/metadata로 구별된다.
metadata: 글자인 태그를 이용해 메타데이터를 표현(마크업 언어:태그라는 글 자 형식으로 메타데이터를 표현하는 언어)
자바스크립트: 웹 페이지를 제어하는 언어/widow객체라고 한다.
<script>
alert("내 이름은 조이연"); //window가 웹브라우저
document.write("<p>내 이름은 <b>홍길동</b></p>");
console.log("내 이름은 홍길동");
</script>- [alert]: 화면에 경고창 띄우기
- b: 글자 굵게
- p: 하나의 문단
- window: 모든 코드가 window로 시작되기때문에 window생략 가능
- 자바스크립트에소는 변수타입을 지정해주기 때문에 사용자가 지정하지 않아도 해줌
- typeof : 타입을 알수없어서 타입을 확인하기 위한 용도
- a는 변수로 값을 가지고 있고, b는 참조변수여서 주소값을 가지고 있다.
<script>
"use strict";
a = 10;
b = 20;
console.log(a);
console.log(b);
b = a + b;
</script>- use strict: 키워드 없이 변수 만드는 것을 에러처리한다.
<표기법>
1.camel 표기법: let sumOfAllScore;
2.스네이크 표기법: let sum_of_all_scores;
<변수>
1.const: 상수
2.let: 변수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>문자열 타입</title>
<script>
const str1 = "Hello";
const str2 = "Hello";
//템플릿 문자열
const str3 = `Hello`;
const str4 = "<p class='blue'>합격</p>";
const str5 = '<p class="red">불합격</p>';
let style = "red";
let content = "불합격";
const str6 = `${style}이고 ${content}`;
console.log(str6);
//여러분의 이름과 나이를 "저는 20살 홍길동입니다"와 같이 출력하시오(템플릿 문자열 이용)
const name = "조이연";
const age = 28;
const insa = `저는 ${age}살 ${name}입니다.`;
console.log(insa);
</script>
</head>
<body></body>
</html>
- 안에 문자열이 들어가면 " '' " 이거나 ' "" ' 표현해야한다.
- 템플릿 문자열:
${};
<script>
document.write("<p>저는 홍길동입니다</p>");
alert();
location.href = "http://www.naver.com"; //주소창
</script>- window.history.back(); ->뒤로가기
- [location.href] = ""; ->그 페이지로 이동
<script>
const name = prompt("이름을 입력하세요.");
document.write(`<p>안녕하세요 ${name}입니다</p>`); //body태그에 내용이 들어가게 됨.
</script>결과->
확인 누르면
- [prompt]: 사용자는 프롬프트 대화상자의 입력 필드에 원하는 값을 입력하고 확인을 누를 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*.b {
color: blue;
}
*/
.blue {
color: blue;
}
.red {
color: red;
}
</style>
<script>
const jumsu = prompt("점수 입력");
if (jumsu >= 70) document.write(<p class="blue">`합격`</p>);
else document.write(<p class="red">"불합격"</p>);
const result = jumsu >= 70 ? "합격" : "불합격"; //삼항연산자
const style = jumsu >= 70 ? "blue" : "red";
document.write(`<p class=${style}>${result}</p>`);
</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* id:100, class:10, tag:1 * : 0*/
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<script>
/*
문제)태어난 년도를 입력받아 나이를 계산하고, 나이가 20세 이상일경우
결과를 성인으로 출력하고 색은 'blue '로 하고 20세 미만 경우 청소년으로
결과 출력 후 색은 'green'으로 한다.
*/
//1. 입력값을 받아온다.
const birthYear = prompt("태어난 년도를 입력하세요.");
//2.
const age = 2022 - birthYear;
const result = age >= 20 ? "성인" : "미성년자";
const style = age >= 20 ? "blue" : "green";
//3. 출력하기
const str = `
<div>
<h1>결과</h1>
<p class="${style}"> ${result}</p>
</div>
`;
document.write(str);
</script>
</head>
<body></body>
</html>
- [div]:
- id는 #으로 불러오고 class는 .으로 불러온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="target"></div>
<div id="target2"></div>
<script>
const target = document.querySelector("#target");
target.innerHTML = `<p style='color:red;'>안녕하세요</p>`;
//태어난 년도를 입력받아 target2에 파랑색 글자로 출력하시요.
const birthYear = prompt("태어난 년도를 입력하세요.");
const html = `<p style = "color:blue;">${birthYear}</p>`;
console.log(target2);
target.innerHTML = html;
</script>
</body>
</html>
[querySelector]
- 공백은 공백 1개는 그대로 찍는다.2번째 공백 부터 무시한다.
- document.querySelector("#target");
: getElementById :id로 Element를 가져오겠다 ${birthYear}
: 바로 스타일 이렇게 지정가능- innerHTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>가격:<span id="price">3000</span></p>
<p>개수:<span id="count">5</span></p>
<p>총액:<span id="total"></span></p>
</div>
<script>
const price = document.querySelector("#price").innerHTML;
const count = document.querySelector("#count").innerHTML;
const total = price * count;
document.querySelector("#total").innerHTML = total;
</script>
</body>
</html>
- div로 묶고 태그로 문단 그 안에 span태그로 나눔
- id불러오니까 #
- document.querySelector("#total").innerHTML = total;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div>
<p>가격:<span id="price">3000</span></p>
<button>+</button>
<span id="count">5</span>
<button>-</button>
<p>총액:<span id="total"></span></p>
</div>
<script>
// 총액을 출력하는데 가격이 10000원 미만이면 빨강색, 초과하면 파랑색
const price = document.querySelector("#price").innerHTML;
const count = document.querySelector("#count").innerHTML;
const totalprice = price * count;
const total = document.querySelector("#total");
total.innerHTML = totalprice;
total.className = totalprice >= 10000 ? "blue" : "red";
/* if문으로 썼을 경우
if (total >= 10000) document.querySelector("#total").className = "blue";
else document.querySelector("#total").className = "red";
*/
</script>
</body>
</html>- [button]
<문자열과 숫자 간 변환>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>문자열과 숫자간 변환</title>
</head>
<body>
<div>
<p id="value1">50</p>
<p id="value2">100</p>
<p>덧셈 결과 : <span id="sum"></span></p>
<p>곱셈 결과 : <span id="mul"></span></p>
<p>나눗셈 결과 : <span id="div"></span></p>
</div>
<script>
//문자열과 숫자간 변환하는 방법
// 10 + "10" -> 1010 문자열로 인식함
// String str = "1000"; int a = Integer.parseInt(str);
// int a = 1000; String str = a + "";
//parseInt ->문자열을 숫자로 변환하는 거 윈도우에서 지원
const value1 = parseInt(document.querySelector("#value1").innerHTML);
//수동으로 타입을 int로 바꿔놓고 paseInt
const value2 = parseInt(document.querySelector("#value2").innerHTML);
const sum = value1 + value2;
document.querySelector("#sum").innerHTML = sum;
const mul = value1 * value2;
document.querySelector("#mul").innerHTML = mul;
const div = value1 / value2;
document.querySelector("#div").innerHTML = div;
//나누기로 하면 자바에서는 나머지만 나오지만 자바스크립트에서는 값이 나온다.
//50/100 ->자바에서는 0이나오고, 자바스크립트에서는 0.5가 나온다.
</script>
</body>
</html>- [parseInt]: 10 + "10" -> 1010 문자열로 인식함
String str = "1000"; int a = Integer.parseInt(str);
int a = 1000; String str = a + "";
parseInt ->문자열을 숫자로 변환하는 거 윈도우에서 지원
- const sum = value1 + value2;
document.querySelector("#sum").innerHTML = sum; 세트
[값 계산해서 출력할 때]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>국어:<span id="kor">75</span></p>
<p>영어:<span id="eng">80</span></p>
<p>합계:<span id="sum"></span></p>
<p>평균:<span id="avg"></span></p>
<p>합격여부:<span id="result"></span></p>
</div>
<script>
const kor = parseInt(document.querySelector("#kor").innerHTML);
const eng = parseInt(document.querySelector("#eng").innerHTML);
const sum = kor + eng;
document.querySelector("#sum").innerHTML = sum;
const avg = sum / 2;
document.querySelector("#avg").innerHTML = avg;
const result = avg >= 70 ? "합격" : "불합격";
document.querySelector("#result").innerHTML = result;
</script>
</body>
</html>
- 그대로 출력할때는
const kor = parseInt(document.querySelector("#kor").innerHTML);
값을 계산해서 받아야 하는거는
const sum = kor + eng;
document.querySelector("#sum").innerHTML = sum;
<자바스크립트 jQuery 라이브러리 CDN 추가>
- ->외부라이브러리는 가져왔을때 독자적으로 사용해야한다. 스크립트는 태그는 여러번 사용할수있다.(다 따로 열고 사용) /이거 써야 jQuery사용하겠다고 선언하는거
- 라이브러리는 함수의 집합. 프로그래머가 판단해서 적절한 함수를 가져다
사용한다 - 프레임워크는 함수 + 사용법. 프로그래머는 사용법을 숙지하고 그에
따라야한다. - console.log(document.querySelector("#target").innerHTML);이거랑
->console.log($("target").text()); 이거랑 같은거
->jQuery는 $(선택자)를 사용한다. - 삼항연산자: 조건 ? "(진실일때)" : "(거짓일때)";
<jQuery는 getter와 setter가 같다.>
<body>
<p id="target1">우리나라 좋은나라</p>
<p id="target2">안뇽</p>
<script>
//jQuery는 getter와 setter가 같다.
const text1 = $("#target1").text();
$("#target2").text(text); //jQuery사용
</script>
</body><타입과 연산자>
<script>
"use strict";
//타입 : number, string, boolean, object ,undefined
let a;
console.log(a);
let x = "10"; //const는 값을 변경할수 없다.생략할수가 없다.(만들때 값을 줘야함)
let y = 10;
console.log(typeof x);
console.log(x == y);
//console.log(x === y);
let z = parseInt(x);
console.log(z === y);
</script>- a는 값 안 넣어서 undefined
- x는 string
- y는 number
- x==y ->타입은 무시하고 값이 같은지 비교 true
x===y -> 값이랑 타입까지 비교 - z는 parseInt로 강제형변환해서 "10"에서 10만 추출
- z===y ->true
[jQuery로 작성할 때]
<script>
//jQuery.each();
//이름이 같으면 어디껀지 모르기때문에 jQuery.대신 $로 표시한다.
const kor = parseInt($("#kor").text());
const eng = parseInt($("#eng").text());
const sum = kor + eng;
//$로 jQuery를 선택하면 html+양념 -> 객체를 만든다. ->jQuery 메소드를 사용할 수 있다.
$("#sum").text(sum); //.text()는 jQuery 꺼
console.log(document.querySelector("#sum"));
console.log($("#sum")); //객체 /위에꺼랑 비슷하지만 .찍고 바로 함수를 사용할수 있다.
</script>-> const sum = kor + eng;
document.querySelector("#sum").innerHTML = sum; 이렇게 작성하던거
const sum = kor + eng;
$("#sum").text(sum);이렇게 작성가능
[attr()]
<style>
.red {
color: red;
}
</style>
</head>
<body>
<p id="target1"></p>
<p id="target2"></p>
<script>
const message = "홍길동";
document.querySelector("#target1").innerHTML = message;
document.querySelector("#target2").className = "red";
//메소드 chaining.찍고 계속 넣을수 있다
$("#target2").text(message).attr("class", "red");
</script>
</body>- style에서 id이름으로 안 걸었으니까 document.querySelector("#target2").className = "red";
[className] - .attr(): 속성을 적는거('class')또는('id'),색
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
.success {
color: blueviolet;
}
.fail {
color: red;
}
</style>
</head>
<body>
<p>점수:<span id="score">75</span></p>
<p>결과:<span id="result"></span></p>
<script>
//70점이상이면 합격, 아니면 불합격이라고 출력
const score = $("#score").text();
if (score >= 70) $("#result").text("합격").attr("class", "success");
else $("#result").text("불합격").attr("class", "fail");
</script>
</body>
</html>
[이벤트]
:웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 /어떤 사건
이벤트 handler: 이벤트가 벌어졌을 때 동작하는 함수
이벤트와 이벤트 핸들러를 연결해야 하는 것.
- html은 한줄씩 차례대로 실행 -> js도 실행
js 함수는 호출해야 실행된다
<p>국어 : <span id="kor">75</span></p>
<button onclick="hello();" onfocusout="out();">클릭하세요.</button>
<!--핸들러와 연결해야함 onclick ="함수를 부름"-->
<button onclick="show();">국어점수</button>
<script>
function hello() {
console.log("안녕하세요");
}
//이벤트 이름은 focusout
function out() {
console.log("포커스 잃음");
}
function show() {
const kor = $("#kor").text();
alert(kor);
}
</script>- 클릭하세요 누르면 함수 hello를 실행하고 out함수도 실행
- 국어점수 입력하면 show함수 실행 [alret]까지 걸어놨으니까 알람창도 뜸
[placeholder]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
.success {
color: blueviolet;
font-weight: 700;
}
.fail {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<input
type="text"
id="kor"
placeholder="국어점수 입력"
size="3"
maxlength="3"
value="80"
/>
<button onclick="showResult()">성적출력</button>
<p id="result"></p>
<script>
function showResult(){
const kor= $("#kor").val();
if(kor>=70)
{
$("result").text("합격").attr("class","success");
}else{
$("result").text("불합격").attr("class","fail");
}
}
</script>
</body>
</html>- [placeholder]: 검색하는 창에 고정되어 나오는 글
- [value]: 태그의 value 속성은 요소의 초깃값(value)을 명시합니다.->80
[onclick][input type]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수우미양가 출력</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="jumsu" placeholder="점수를 입력하시오"/>
<!--
버튼을 클릭하면 result에 수우미양가를 출력하시오.
-->
<button onclick="score()">출력</button>
<p id="result"></p>
<script>
function score(){
const jumsu = $('#jumsu').val();
//console.log(jumsu===true); //여기서 오류확인해서 어디서부터 잘못되었는지 확인
//console.log('111111111111'); //값이 안나올때 console.log 오류확인 법
let result;
//console.log('22222222222');
if (jumsu >= 90) result = '수';
else if (jumsu >= 80) result = '우';
else if (jumsu >= 70) result = '미';
else if (jumsu >= 60) result = '양';
else result = '가';
//console.log('33333333333');
$('#result').text(result);
}
</script>
</body>
</html>- 출력
[배열]
const ar = [1, 2, 3, 4, 5];
for (let element of ar)
console.log(element); ->js of반복문
$.each(ar, function (순서, 원소) {
console.log(원소);
}); ->jQuery each 반복문- js of반복문: 배열 원소를 e에 담는다
- jQuery each 반복문: 자바스크립트와 구별하기 위해서 선택자 없이 $.을 해준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="target"></p>
<script>
const ar= [55, 80, 75, 90, 95, 77, 68, 82];
let sum=0;
for(const a of ar)
{
sum+=a;
}
$("target").text(`합계: ${sum}`);
</script>
</body>
</html>- sum+=a;->sum=sum+a;
- $("target").text(
합계: ${sum}); 이렇게 출력 - for(const a of ar) ->ar을 a를 담는거
<짝.홀수의 합 구하기>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!--버튼을 클릭하면 짝수의 합계, 홀수의 합계를 구해 출력하시오.-->
<p id="target"></p>
<button onclick="showsum()">짝,홀수 합계</button>
<script>
const ar = [11, 22, 33, 44];
function showsum() {
let sum1 = 0;
let sum2 = 0;
for (const a of ar) {
if (a % 2 == 0) sum1 += a;
else sum2 += a;
}
$("#target").text(`짝수의 합 : ${sum1} ,홀수의 합 : ${sum2}`);
}
</script>
</body>
</html>
<MVC 방식(전통적인 방식)과 REST>
MVC방식: 전통적인 방식은 백엔드가 서버가 처리와 화면을 모두 담당. 처리 결과를 html로 만들어 프로트에게 보내준다.
REST방식:백은 처리만, 화면은 프론트가 담당. 백과 프론트 사이에는 데이터만 왔다갔 다 한다.
<metaData와 markUp 언어>
메타: ~에 대한, ~에 관한
metaData: 데이터에 관한 데이터, 데이터를 설명하는 데이터
서식,구조, 역할들을 설명
REST방식은 메타데이터를 적극적으로 사용한다.
웹의 메타데이터 형식은 xml,JSON이 있다.
<변수 var>
var a = 10;
var a = 20;
let b = 10;
//let b = 20; //오류가 난다.:이래서 var 안씀
[함수]
<script>
//함수선언은 hoist되므로 작성하기 전에 사용가능하다
function hello() {
console.log("함수선언");
}
function sum(x, y) {
return x + y;
}
const a = 10;
const b = function hello2() {
//익명 함수
console.log("함수 표현");
};
b();
hello2();
</script>- const b = function hello2(){}
->JS에서 변수가 올 수 있는 곳에는 함수도 올 수 있다
(자바와 제일 큰 차이점)
이게 익명함수(익명 함수는 함수 코드가 변수명에 저장된 형태입니다. 따라서 변수값으로 구성된 함수 코드를 다른 변수명에 마치 변수를 대입하듯이 이동시킬 수 있습니다.)
<body>
<button onclick="showScore();">결과 출력</button>
<p>합격인원 : <span id="score"></span></p>
<script>
const jumsu = [65, 55, 75, 85, 95, 60];
//버튼을 클릭하면 합격인원을 출력하시오
//70점이상이면 합격
function showScore() {
let cnt = 0;
for (a of jumsu) {
if (a >= 70) {
cnt++;
}
}
$("#score").text(cnt);
}
</script>
</body>[css]
<style>
div {
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
/*css*/
/*한줄을 수직 가운데 정렬 : height와 line-height를 같게*/
line-height: 400px;
}
</style>
</head>
<body>
<div id="target">div</div>
<button onmouseover="red()">빨강</button>
<button onmouseover="orange()">주황</button>
<script>
//빨강 버튼을 클릭하면 배경색을 div의 배경을 빨강으로 해보자
function red() {
$("#target").css("background-color", "red").css("color", "white");
}
function orange() {
$("#target").css("background-color", "orange").css("color", "skyblue");
}
</script>
</body>- css에서 단위는 절대 생략 불가. 0인 경우 제외
- onmouseover: 마우스 가져다놔도 바뀌게
결과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#target {
width: 100px;
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
}
#target2{
width: 100px;
height: 100px;
background-color: blueviolet;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!--너비 높이 100px, 배경색 오렌지, 수직 수평 가운데 정렬-->
<div id="target">까꿍</div>
<!--display: none;이 자동으로 콘솔에 들어가있다.-->
<button id="toggle" onclick="toggle()">토글</button>
<!--toggle은 사라지게 하는거-->
<script>
function toggle() {
//hide(), show()
$("#target").toggle();
}
</script>
<div id="target2">까꿍</div>
<button id="hide" onclick="hide()">사라지게</button>
<button id="show" onclick="show()">나타나게</button>
<button id="toggle" onclick="toggle()">toggle</button>
<script>
function hide() {
$("#target").css("display", "none");
}
function show() {
$("#target").css("display", "block");
}
function toggle() {
const state = $("#target").css("display");
if (state == "none") $("#target").css("display", "block");
else if (state == "block") $("#target").css("display", "none");
}
</script>
</body>
</html>
결과: 
[none속성]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>display:none; 속성</title>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid pink;
}
#none {
display: none;
}
#hidden {
visibility: hidden;
}
</style>
</head>
<body>
<div>A</div>
<div id="none">B</div>
<!--"none" 아예 사라진거-->
<div>C</div>
<div id="hidden">D</div>
<!--"hidden" 공간을 차지 하고 있는거-->
<div>E</div>
<p>css display 속성에는 block, inline-block, none 등이 있다</p>
</body>
</html>
결과:
- none: 아이에 사라짐
- hidden: 자리는 차지하고 안보이는거
[incline][block]
<style>
#inline_block p,
#inline_block span {
width: 150px;
display: inline-block; /*lnline block 은 동일 라인에 여러 태그를 붙일 때 쓸수 있다.*/
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="inline_block">
<p>A</p>
<p>B</p>
<p>C</p>
<hr />
<span>X</span>
<span>Y</span>
<span>Z</span>
<hr />
<p>inline 요소는 내용의 너비만큼 공간을 차지한다.(width 무시)</p>
<p>block 요소는 한줄에 하나씩 배치된다</p>
<p>block 요소는 인라인 요소를 포함한다</p>
</div>
</body>- inline 요소는 내용의 너비만큼 공간을 차지한다.(width 무시)
- block 요소는 한줄에 하나씩 배치된다
- block 요소는 인라인 요소를 포함한다
결과:
[hover]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>수평 1단 메뉴(inline block 사용예시)</title>
<style>
div#menu li {
display: inline-block;
width: 150px;
height: 40px;
background-color: blue;
font-size: 0.8em;
color: white;
line-height: 40px;
text-align: center;
margin-left: -6px;
} /*li 위에 hover가 발생하면*/
div#menu li:hover {
background-color: blueviolet;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<!--메뉴를 만들때 인라인블럭을 쓰는이유 : 메뉴는 모양이 사각형이고,크기가 일정하다.(넓이를 맞춰주고 수평으로 나열할수 있어서)-->
<div id="menu">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">게시판</a></li>
<li><a href="">Links</a></li>
<li><a href="">About</a></li>
</ul>
</div>
</body>
</html>
결과:
hover: 반응에 따른 속성을 변경시키는 것
마우스의 반응에 따른 속성을 설정할 수 있다.
hover를 적용하면 마우스가 올린 반응에 따라 선색되어진다.
a href="" ->어디 타고 사이트 갈때 씀
<incline block 사용예시>
<title>수평 1단 메뉴(inline block 사용예시)</title>
<style>
/*css reset*/
* {
margin: 0;
padding: 0;
}
div#menu ul li {
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
background-color: blue;
color: white;
text-align: center;
margin-left: -6px;
}
div#menu li a {
color: pink;
text-decoration: none;
display: block; /*block은 부모를 가득 채우는 거*/
}
div#menu li a:hover {
background-color: blueviolet;
font-weight: bold;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">게시판</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
</body>
</html>
결과:
[round/square/hide/show]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
div#target {
background-color: purple;
width: 200px;
height: 200px;
line-height: 200px;
border-radius: 200px;
text-align: center;
color: white;
border: 3px solid blue;
}
div#header {
margin: 0 0 20px 0;
}
</style>
</head>
<body>
<div id="header">
<button id="round" onclick="round()">둥글게</button>
<button id="square" onclick="square()">네모나게</button>
<button id="hide" onclick="hide()">사라지게</button>
<button id="show" onclick="show()">나타나게</button>
</div>
<div id="target">까꿍</div>
<script>
const $target = $("#target");
function hide() {
$target.css("display", "none");
}
function show() {
$target.css("display", "block");
}
function round() {
$target.css("border-radius", "200px");
}
function square() {
$target.css("border-radius", "0");
}
</script>
</body>
</html>
결과:
<마크업언어>
- HTML은 마크업 언어
- 마크업 언어는 메타데이터를 표현하는 언어
- 메타데이터는 데이터를 설명(디자인, 구조, 역할...)하는 데이터
- JS는 html에 기능을 추가하는 역할
- JS는 html과 항상 같이 다닌다
- 그래서 script 태그로 js 영역을 표시한다
- Node.js라는 기술이 나오면서 단독 실행이 가능해졌다
<script>
'use strict'
let a;
let b = 5;
let c = null;
console.log(a+b); //NaN
console.log(b+a); //Nan
console.log(b+c); //5
console.log(c+b); //5
console.log(true + true)
</script>- true 1이고, false는 0으로 처리
- 변수의 값은 항상 있어야한다
- html은 문서의 구조, css는 디자인을 담당하자고 역할을 분리
- html4까지는 잘 분리가 안 된 상태
- html5에서 디자인 태그들을 정리하면서 css와 역할 분담을 확실히
- b태그는 단순 텍스트를 진하게 해주는 역할
- strong 태그는 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할. 브라우저가 strong 태그를 해석할 때 페이지 내에서 중요한 부분으로 이해하며, 이는 브라우저에서 지원되는 웹 접근성에 큰 기여를 합니다.
- i 태그는 기울임
- em태그는 실질적인 강조 의미. 스크린 리더에도 영향을 미친다.
- hr 태그: 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용합니다.
hr 요소는 HTML 문서에서 내용을 구분하거나 주제의 변화를 정의합니다. - header 태그: 문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용합니다.
- nav태그: 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.
nav 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있습니다. - main 태그: 해당 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
main 요소의 콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 됩니다. - aside 태그: 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의할 때 사용합니다.
- section 태그: HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
section 요소는 보통 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다. - footer: 웹페이지에서 하단 영역을 의미
<자바의 타입> - 참조형
- 기본형 : byte/ short/ int/ long/ float/ double/ boolean/ char
<script>
/*
자바의 타입
- 참조형
- 기본형 : byte short int long float double boolean char
*/
'use strict'
let a; // undefined
let b = 20; // number
let c = '30'; // string
let d = 5>3; // boolean
let e = {}; // object(자바의 참조형)
let f = []; // object.
let g = null; // object. 알 수 없는 값(있을 수도 있고 없을 수도 있다)
</script>- 프로그래머는 변수의 타입을 지정할 수 없다.
- JS 변수는 동적 타입이다-> typeof연산자로 확인해야 한다.
<script>
let a = 10;
console.log(typeof a); // number
a = a + '10';
console.log(typeof a); // string
a = a>10;
console.log(typeof a); // boolean
</script><연산자 우선 순위>
0. ()
1. 단항 : a++
2. 이항 : a+1
3. 삼항
4. 대입 : a=10, a+=10, a-=10..
// 변수의 선언과 초기화
let a;
a = 10;
const b = 5;
console.log(a+b); // 15
console.log(a-b); // 5
console.log(a*b); // 50
console.log(b/a); // 0.5
console.log(Math.floor(b/a)); //0
console.log(typeof (a+b)); // number
console.log(typeof (a-b)); //number
console.log(typeof (a*b)); //number
console.log(typeof (a/b)); //number- Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다. - 변수의 선언과 초기화
let a;
a = 10;
const b = 5;
<타입변환>
<script>
console.log(parseInt('123')); // 123
console.log(parseInt('123ab')); // 123
console.log(parseInt('ab123')); // NaN
console.log(parseInt('hello')); // NaN
// 문자열로 바꾸기
console.log(123+''); //123
</script>
</body>- 숫자로 바꾸기 : parseInt() -> 숫자로 바꿀 수 있으면 바꾸고 못 바꾸면 NaN
<증감연산자>
<script>
let a = 10;
let b = 10;
let c = a++; //10
let d = ++b; //11
console.log(a + "," + b + "," + c + "," + d);
console.log(`${a}, ${b}, ${c}, ${d}`);
</script>- 단항연산자 : !, typeof, -, ++, --
- 증감연산자 ++, --는 후위(postfix), 전위(prefix)로 적을 수 있다
- ++, --를 단독으로 사용할 때는 후위와 전위는 같다
- 다른 연산자와 함께 사용할 때는 전위는 증감부터, 후위는 다른 연산부터 한다
- JS의 문자열은 '', ""
- JS의 템플릿 문자열은 ``
<연산자 우선순위>
1. 단항연산
2. 이항연산 - 산술연산(+ - * / %)
3. 이항연산 - 비교연산(>, >=, < <=;>=, ==, !=)
4. 이항연산 - 논리연산(&&, ||)
5. 삼항연산 - ? :
6. 대입연산(=, +=, -=, ..)
<산술연산자와 삼항연산자>
<script>
const a = 17;
const b = 15;
const c = 5;
console.log(a%c); //2
console.log(b%c); //0
console.log(Math.floor(17/5)); // -> 3
const div = a - (Math.floor(a/c))*c; ->2
console.log(div);
</script>- 몫 : a/b, 나머지 : a%b
ex) 17/5. 몫:3, 나머지:2 - Math.floor() : 소수점 이하를 버림한다.
Math.ceil() : 소수점 이하를 올림한다.
Math.round() : 소수점 이하를 반올림한다.
<산술 연산자와 삼항 연산자>
<script>
const a = 15;
const b = 5;
const nmg = a%b;
const result = a%b==0? `${a}는 ${b}의 배수` : `${a}는 ${b}의 배수 아님`;
console.log(result);
// a, b가 짝수 홀수 여부를 출력하시오
// "15는 홀수"
// "5는 홀수"
const resultOfA = a%2==0? `${a}는 짝수` : `${a}는 홀수`;
const resultOfB = b%2==0? `${b}는 짝수` : `${b}는 홀수`;
console.log(resultOfA); //15는 홀수
console.log(resultOfB); //5는 홀수
</script>- %연산의 결과가 0이면 a는 b의 배수, b는 c의 약수
<비교연산자, 논리연산자>
<script>
const a = '100';
const b = 100;
console.log(a==b); //동등 연산자(타입 무시)
console.log(a===b); //1. 비교 연산자(타입까지 비교)
// undefined나 null은 코드에서 걸러낸다
// NaN는 비교연산자로 비교할 수 없다
const x = NaN;
const y = NaN;
console.log(x==y); //false
console.log(x===y); //false
const kor = 'hello';
console.log(parseInt(kor)===NaN); //false
// 2. NaN는 isNaN함수로 비교한다
// 결과가 boolean인 함수나 변수. is~
console.log(isNaN(kor)); //true
console.log(isNaN('90')); //false
</script>- console.log(a==b); ->동등 연산자(타입 무시)
console.log(a===b); -> 비교 연산자(타입까지 비교) - undefined나 null은 코드에서 걸러낸다
- NaN는 비교연산자로 비교할 수 없다
- NaN: Not-A-Number(숫자가 아님)
<논리연산자>
<script>
const kor = 85;
let eng = 90;
let math = 80;
// 국어성적이 70점 이상? 하나의 조건이 참, 거짓.
// >, >=, <, <=, ==, ===, !=, !==. 이중에 ==, !=는 사용 금지
console.log(kor>=70 && eng>=70 && math>=70);
console.log(kor>=70 || eng>=70 || math>=70);
// short circuit : 번역기는 결과가 판정되면 실행을 중지
// - 논리연산은 실행이 100% 보장되지 않는다
console.log(kor>=90 && ++eng>=70 && ++math>=70);
console.log(eng);
console.log(math);
</script>- 논리연산은 참, 거짓을 연결
&& : 조건중에서 하나만 거짓이면 거짓
|| : 조건중에서 하나만 참이면 참
<함수(function)>
<script>
function f1() {
alert('매개변수와 리턴이 없는 함수');
}
f1();
function f2(x, y) {
alert(`${x}, ${y}`);
}
f2(3,4);
f2('hello', 'world');
// 리턴
function f3(x, y) {
return x+y;
}
console.log(f3(3, 4));
console.log(f3('hello', 'world'));
</script>- 함수 : 코드에 이름을 붙임 -> 재사용 하기위해 -> 생산성
매개변수로 입력받아 처리(자바의 static 메소드)
메소드 : 객체 소속의 함수
보통 매개변수가 아니라 객체의 필드로 계산한다 - 오버로드 : 이름은 같고 매개변수는 다른 함수
ex) void f2(int x, int y); void f2(string x, string y); - JS는 타입 지정이 없기 때문에 융통성있는 코드를 작성할 수 있다(장점)
복잡한 처리 기능을 만들 때는 양날의 칼 (단점)
-> MS가 타입이 있는 자바스크립트(TypeScript)
<함수 연습>
<script>
// 1. 점수를 입력받아 합격여부를 리턴(70점이상)
function isPass(jumsu) {
return jumsu>=70;
}
// 함수가 정확하게 동작하는지 테스트(단위 테스트, unit test);
console.log(isPass(85)===true);
console.log(isPass(60)===false);
// 2. 년도를 입력받아 윤년여부를 리턴
function isLeapYear(year) {
return year%4==0;
}
console.log(isLeapYear(2022)===false);
console.log(isLeapYear(2020)===true);
// 3. 년도를 입력받아 월드컵이 열리는 해인지 리턴
function isWorldCup(year) {
return (year+2)%4==0;
}
console.log(isWorldCup(2022)===true);
console.log(isWorldCup(2024)===false);
</script>
const a = 10;
const b = a;
const isWorkingHour2 = function (hour) {
return hour>=9 && hour<=18;
}
const isWorkingHour3 = (hour)=>hour>=9 && hour<=18;
console.log(isWorkingHour3(10));- 함수를 작성하는 방법 2가지
함수 선언 : 지금까지 사용한 방식
함수 표현 : 함수를 변수에 대입한다 - "JS에서 변수와 함수는 대등하다"
이제 aaa란 이름은 사용 불가능. 함수는 isWorkingHour2 이름으로만 사용가능
그렇다면 aaa란 이름을 생략하자(함수를 만들때 이름을 생략할 수 있다 -> 익명함수)
ES6에서 다르게 함수를 표현할 수 있다 - 화살표 함수
const isWorkingHour3 = (hour)=>hour>=9 && hour<=18;
console.log(isWorkingHour3(10));
href : a태그에 홈페이지 등의 주소를 입힐때 사용됩니다.
src : img태그에 파일 디렉토리 경로에있는 어떠한 이미지를 지성하여 웹 페이지에 결과물을 출력할때 사용됩니다.
url : CSS / html의 style 에서 img태그와 같이 어떠한 파일을 불러올때 사용됩니다.
- JavaScript나 jQuery로 개발하는 방식 - 재사용이 어렵다
CSS + HTML + JS => Component를 만들자 - react... - 웹 브라우저를 자바스크립트에서 프로그래밍하도록 표준을 정했다 : BOM(Browser Object Model)
window.location.href = 'http://www.naver.com'
BOM에서 제일 많이 사용하는 객체가 Document : DOM(Document Object Model)
DOM level 0 2개, level 2, jQuery 3
<script>
// 이벤트 : 사용자의 방아쇠가 되는 어떤 동작
// 함수 선언
function hello() {
alert('안녕하세요');
}
// document.querySelector('#insa').innerHTML = "hello"
// 함수 표현(익명 함수)
document.querySelector('#insa').onclick = function () {
alert('안녕하세요');
}- 이벤트: 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것이다.
- 익명함수 :
var orange = function( ) {
document.write("This is an orange.");
}; - 일반함수
: function Good( ) {
document.write("Good Job!");
}
- 익명함수 :
<jQuery DOM level 0>
<body>
<button id="insa">인사</button>
<script>
// js로 선택한 요소와 jQuery로 선택한 요소는 다르다
// jQuery는 js + 양념
console.log(document.querySelector('#insa'));
console.log($('#insa')[0]);
const $insa = $('#insa');
const insa = $('#insa')[0];
insa.onclick = function() {
alert('안녕하세요');
}
</script>
</body>-
jQuery $함수를 사용하여 ID가 있는 요소를 선택하는 것 같습니다 insa. 표현식 의 [0]끝에 있는 는 결과 요소 컬렉션에서 첫 번째 요소를 가져오는 데 사용됩니다.
함수 는 $함수의 줄임말이며 jQueryDOM(Document Object Model)에서 요소를 선택하고 다양한 작업을 수행하는 데 사용됩니다. 이 경우 $('#insa')표현식은 ID가 있는 요소를 선택하는 insa데 [0]사용되며 는 결과 요소 컬렉션에서 첫 번째 요소를 가져오는 데 사용됩니다.
이 $기능은 jQuery에만 해당되며 프로젝트에 jQuery가 포함되어 있지 않으면 작동하지 않습니다.
- getElementById(): id를 통해 엘리먼트를 반환한다.
- querySelector(): selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다.
<jQuery getter, setter>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="msg"/>
<button id=" btn">클릭하세요</button>
<script>
const btn = $('btn')[0];
btn.onclick=function(){
$('#msg').val('안녕하세요');
$('#msg').css('background-color','yellow');
$('#msg').attr('readonly', true)
}
</script>
</body>
</html>
결과: 
- 내용을 읽고 쓸때 : input요소는 val(), 기타 요소는 text()
- 스타일을 읽고 쓸 때 : css()
- 속성을 읽고 쓸 때 : attr(), prop() -> attr()
- true, false 값을 가지는 속성 : readonly, disabled, selected, checked
readonly: input 요소의 입력 필드가 읽기 전용임을 명시합니다.
disabled: input 요소가 비활성화됨을 명시합니다.
selected: 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시합니다.
checked: 페이지가 로드될 때 미리 선택될 input 요소를 명시합니다.
<속성의 적용여부가 값이 아니라 속성의 존재여부>
<body>
<input type="text" id="msg1" value="우리나라" readonly/>
<input type="text" id="msg2" value="좋은나라" disabled/>
<button id="msg1_btn">읽기전용 해제</button>
<button id="msg2_btn">비활성화 해제</button>
<!--
readonly, disabled, selected -> 존재하면 적용(true, false)
-->
<script>
$('#msg1_btn')[0].onclick = function() {
$('#msg1').attr('readonly', false);
}
// 비활성화 해제
$('#msg2_btn')[0].onclick = function() {
$('#msg2').attr('disabled', false);
}
</script>
</body>결과: 
- false로 해제시켜주기
<script>
$('#msg1_btn')[0].onclick = function() {
// readonly가 없으면 undefined, 있으면 readonly
const state = $('#msg1').attr('readonly');
if(state===undefined)
$('#msg1').attr('readonly', true);
else if(state==='readonly')
$('#msg1').attr('readonly', false);
}
// 비활성화 해제
$('#msg2_btn')[0].onclick = function() {
}
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<select id="menu1" onchange="choice1();">
<option>짜장</option>
<option>짬뽕</option>
<option>볶음밥</option>
</select>
<select id="menu2" onchange="choice2();">
<option value="1">짜장</option>
<option value="2">짬뽕</option>
<option value="3">볶음밥</option>
</select>
<button onclick="choice1();">선택 출력</button>
<button onclick="choice2();">선택 출력</button>
<script>
function choice1() {
// option 요소에 value가 없을 경우는 option의 innerHTML을 읽어온다
console.log($('#menu1').val());
}
function choice2() {
console.log($('#menu2').val());
}
</script>
</body>
</html>결과:
-
select: 쫘르륵 나오게 해서 고르게 할 때
-
option: 선택할 거 하나하나
-
onchange:셀렉트박스의 값이 변경될때 자주 사용됩니다. 셀렉트박스의 값이 변경될때 onchange() 이벤트에서 사용자가 지정한 함수를 호출하여 각각의 동작(스크립트)을 실행 시킵니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>change 이벤트 처리</title>
</head>
<body>
<input type="text" id="menu" />
<select id="select_menu">
<option disabled selected>메뉴를 선택하세요</option>
<option>짜장</option>
<option>짬뽕</option>
<option>볶음밥</option>
</select>
<script>
// 메뉴를 선택하면 #menu에 출력하시오
$('#select_menu')[0].onchange = function() {
const menu = $('#select_menu').val();
$('#menu').val(menu);
}
</script>
</body>
</html>결과:
- disabled selected: 선택 못하게 하는거
- input: 입력창 만들때
<시맨트 마크업>
<body>
<h1>html5의 대표적인 특징은 시맨틱(semantic) 마크업</h1>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-apple" aria-hidden="true"></i>
<img str="" alt="여기는 전원의 이미지입니다">
<ul>
<li>전통적인 방법 : display, float, position</li>
<li>display : <i>inline-block</i>을 이용해 수평 방향으로</li>
<li>float : 왼쪽, 오른쪽</li>
<li>position : 임의의 위치</li>
</ul>
</body>결과: 
-
시맨튼 마크업: "의미론적인" 마크업. 즉, 개발자와 브라우저에게 의미 있는 태그를 제공하는 마크업
기계(컴퓨터, 브라우저)가 잘 이해할 수 있게 됨
코드의 가독성이 올라가게 됨 -
[i태그]: 글자를 기울여서 표시하는 태그로, italic의 약자입니다.
-
[aria-hidden]: aria-hidden이 true로 설정되면, accessibility tree에서 해당 콘텐츠를 가리지만, 여전히 시각적으로는 볼수 있다. aria-hidden="true" 엘리먼트에 기본 스타일을 적용하는 브라우저는 없다.
주의 할 점은 , aria-hidden="true"가 focusable한 요소가 되어서는 안된다는 것이다. 스크린리더에는 보이지 않지만, focus가 되기 때문이다. -
alt : img 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공합니다. -
float : 왼쪽, 오른쪽
-
position : 임의의 위치
-
display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱 마크업</title>
<style>
/* 시맨틱 마크업 요소들에 1px solid orange 보더를 지정하시오(main제외) */
header, nav, aside, section, footer {
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="page">
<header>사이트 머리말(보통 회사로고, 검색창)</header>
<nav>사이트 메인 메뉴(navigation)</nav>
<main>
<aside>부가영역</aside>
<section> <!-- 선택하면 나열되도록 포함 -->
<article>첫번째 기사</article>
<article>두번째 기사</article>
</section>
</main>
<footer>copyright © 2022 ICIA</footer> <!-- © : 카피로고 -->
</div>
</body>
</html>- header: 머리ㅣ말
- nav: 사이트 메인 메뉴(navigation)
- aside: 부가영역
- selection: 선택하면 나열되도록
- article: 기사
- footer: 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
결과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
color: white
}
/*
css 박스모델에서 박스는 content, padding, border로 이루어진다
width는 content의 너비로 계산 -> 너비를 content+padding+border로 변경해줘야 한다
*/
#div1 {
/* 네방향으로 패딩 50px */
padding: 50px;
background-color: orange;
}
#div2 {
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">우리나라</div>
<div id="div2">좋은나라</div>
</body>
</html>- css 박스모델에서 박스는 content, padding, border로 이루어진다
- width는 content의 너비로 계산 -> 너비를 content+padding+border로 변경해줘야 한다
- marginn: 네 방향 바깥 여백 영역을 설정합니다.
- padding: 요소의 네 방향 안쪽 여백 영역을 설정합니다.
결과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>좌우 배치</title>
<style>
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid red;
}
#a { float: left;}
#b { float: right;}
#c { float: left;}
</style>
</head>
<body>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</body>
</html>- [float]: 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
결과: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float의 높이 계산</title>
<style>
.child {
width: 200px; text-align: center; border: 1px solid orange;
float: right;
}
#footer {
height: 100px; background-color: yellow;
}
#main {
overflow: hidden;
}
</style>
</head>
<body>
<!--
float을 이동할 때 공중에 떠서 이동한다
float을 자식으로 가지는 부모의 높이가 0이 된다
정상적으로 자식의 높이가 부모에 반영되게 해야한다(float을 clear한다)
: 부모 요소에 overflow를 hidden으로 지정한다
-->
<div id="main">
<div class="child">A</div>
<div class="child">B</div>
</div>
<div id="footer">
</div>
</body>
</html>- overflow: CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다
정상적으로 자식의 높이가 부모에 반영되게 해야한다(float을 clear한다)
: 부모 요소에 overflow를 hidden으로 지정한다
결과: 
<title>레이아웃</title>
<style>
/* 메뉴는 inline-block, 레이아웃은 float, 임의 배치는 position */
/* css reset : 외부 reset.css를 연결 */
* {margin: 0; padding: 0; box-sizing: border-box;}
#page { width: 800px; margin: 0 auto;}
/*
header, nav, footer, aside는 높이를 안다
section이 aside보다 높이가 높아야 하면 높이를 모른다
*/
header, nav, footer {height: 50px; line-height: 50px; text-align: center;
border: 1px solid orange;}
section {
min-height: 600px;
width: 650px;
background-color: lightblue;
float: right;
}
aside { width: 150px; height: 200px; background-color: lightgray; float: left;}
main { overflow: hidden;}
</style>
</head>
<body>
<div id="page">
<header>사이트 머리말(보통 회사로고, 검색창)</header>
<nav>사이트 메인 메뉴(navigation)</nav>
<main>
<aside>부가영역</aside>
<section>본문영역</section>
</main>
<footer>copyright © 2022 ICIA</footer>
</div>
</body>- 메뉴는 inline-block, 레이아웃은 float, 임의 배치는 position
결과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
#page { width: 950px; margin: 0 auto;}
header, nav, footer {
height: 50px;
border: 1px solid red;
text-align: center;
line-height: 50px;
}
aside {height: 200px; width: 150px;}
#left {
background-color: lightgray;
float: left;
}
#right {
background-color: lightgray;
float: right;
}
section {
min-height: 650px;
width: 650px;
background-color: skyblue;
float: left; /* 왼쪽으로 밀림 */
}
main { overflow: hidden;}
footer { clear: both;}
</style>
</head>
<body>
<div id="page">
<header>사이트 머리말(보통 회사로고, 검색창)</header>
<nav>사이트 메인 메뉴(navigation)</nav>
<main>
<aside id="left">왼쪽 aside</aside>
<section>본문영역</section>
<aside id="right">오른쪽 aside</aside>
</main>
<footer>copyright © 2022 ICIA</footer>
</div>
</body>
</html>결과: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position 속성 : static fixed relative absolute</title>
<style>
div { width: 150px; height: 150px; border-radius: 150px; background-color: blueviolet;
line-height: 150px; text-align: center; color: white;}
div {
/*
position 속성의 기본값은 static : 위에서 아래, 좌에서 우로 배치
position 속성을 변경하면 top, left, bottom, right를 사용할 수 있다
*/
position: fixed; /* 위치고정 */
bottom: 20px;
right: 50px;
}
</style>
</head>
<body>
<div>A</div>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
<p>우리나라 좋은나라</p>
</body>
</html>- position: 기본값은 static : 위에서 아래, 좌에서 우로 배치
position 속성을 변경하면 top, left, bottom, right를 사용할 수 있다
결과:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative, absolute</title>
<style>
div { width: 100px; height: 100px; line-height: 100px; text-align: center;}
#one { border: 1px solid red;}
/* 원래 자신의 위치를 기준으로 이동. 원 위치는 채워지지 않는다 */
#two { border: 1px solid black; position: relative; top: 20px; left: 500px;}
#three { border: 1px solid green;}
/*
absolute 요소는 부모 요소 기준으로 이동(부모는 relative여야 한다)
만약 부모 요소를 찾지 못하면 화면 기준으로 이동
원 위치는 다른 요소로 채워진다
*/
#four { border: 1px solid blue; position: absolute; top: 20px; left: 20px;}
#five { border: 1px solid pink;}
</style>
</head>
<body>
<div id="one">A</div>
<div id="two">B</div>
<div id="three">C</div>
<div id="four">D</div>
<div id="five">E</div>
</body>
</html>- position: relativ-> 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.(겹치게 할때)
결과:
<style>
#child { width: 50px; height: 50px; border-radius: 50px; background-color: blue;
position: absolute; top: 200px; left: 200px;}
#parent {
width: 500px; height: 500px; border: 1px solid red; margin: 0 auto;
position: relative;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<button id="left" onclick="left();">왼쪽</button>
<button id="right" onclick="right();">오른쪽</button>
<script>
function left() {
let left = parseInt($('#child').css('left'));
if(left>=20)
left-=20;
$('#child').css('left', left+'px');
}
</script>
</body>결과: 
<style>
ul:first-of-type li{
display: inline-block;
width: 50px;
background-color: skyblue;
}
ul:last-of-type li {
float: left;
width: 50px;
background-color: blueviolet;
list-style: none;
}
ul:last-of-type li:hover {
background-color: orange;
color: white;
cursor: pointer; /* 마우스 모양 바꾸기 */
}
</style>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
</body>
</html>- hover: 커서 올렸을 때 변하는 거
- inline-block: 문자열만큼
- life-style-type: 항목 모양의 종류를 지정(none: 항목 표시가 나타나지 않음)
- first-of-type : 형제 요소의 그룹 중 해당 타입의 첫번째 요소를 나타낸다.
형제 요소란, 태그 or 클래스명 등과 같은 것으로 구분하는 것이 아닌, 단순히 같은 레벨의 요소라고 보면 된다.
결과:
<js에서 값을 적을 수 있는 곳에는 함수도 적을 수 있다.>
<body>
<!-- java script -->
<button id="hello" onclick="alert('안녕하세요');">안녕</button>
<script>
// js에서 값을 적을 수 있는 곳에는 함수도 적을 수 있다
// 함수가 함수의 매개변수가 될 수 있다(js에서 함수는 일급 객체(first class citizen))
$('#hello').on("click", function() {
alert('안녕하세요');
});
function insa() {
alert("안녕하세요");
}
$("hello").on("click", insa);
</script>
</body><body>
<!-- java script -->
<button id="hello" onclick="alert('안녕하세요');">안녕</button>
<script>
// js에서 값을 적을 수 있는 곳에는 함수도 적을 수 있다
// 함수가 함수의 매개변수가 될 수 있다(js에서 함수는 일급 객체(first class citizen))
//
$('#hello').on("click", function() {
alert('안녕하세요');
});
function insa() {
alert("안녕하세요");
}
$("hello").on("click", insa);
</script>
</body><body>
<input type="text" id="num1">+<input type="text" id="num2">
<button id="add">더하기</button>
<script>
// 버튼을 클릭하면 두 숫자의 합계를 alert로 출력
$('#add').on("click", function() {
const num1 = parseInt($('#num1').val());
const num2 = parseInt($('#num2').val());
if(isNaN(num1) || isNaN(num2)) {
alert('숫자를 입력하세요');
$('#num1').val();
$('#num2').val();
$('#num1').focus(); // 값 초기화 후 다음 실행
return;
}
const result = num1 + num2;
alert('합계 : ' + result);
});
</script>
</body>
</html>- $('#num1').focus(); // 값 초기화 후 다음 실행
<script>
// $()안에 선택자를 주면 선택자에 해당하는 html 요소를 찾아서 jQuery 객체를 만든다
// ()안에 js 객체나 html을 주면 바로 jQuery 객체를 만든다
$(document).ready(function() {
// $(document).ready는 여러번 작성할 수 있다
console.log('문서가 준비됐어요');
console.log($('#hello'));
});
console.log("문서가 준비됐나요?");
console.log($('#hello'));
</script>
</head>
<body>
<button id="hello">안녕하세요</button>
</body>
</html>- $(document).ready(function() {] : $(function(){}); 이렇게 줄엿 사용 가능
<script>
function insa() {
alert('안녕하세요');
}
$(document).ready(function() {
// 이벤트 처리, 초기화
$('#hello').on("click", function() {
alert('hello');
});
$('#insa').on("click", insa);
});
</script>
</head>
<body>
<button id="hello">안녕하세요</button>
<button id="insa">안녕하세요</button>
</body>
</html><attr/ addClass/ removeClass>
<script>
$(document).ready(function() {
const $add = $('#add'); // $의미없음
// attr은 속성의 값을 읽거나 쓴다. class를 추가할 목적으로 사용할 수는 없다
$add.attr('class', 'aaa');
// class를 추가, 삭제하려면 addClass, removeClass를 사용한다
$add.addClass('bbb');
$add.removeClass('aaa');
$('#add').on("click", function() {
const num1 = parseInt($('#num1').val());
const num2 = parseInt($('#num2').val());
if(isNaN(num1) || isNaN(num2)) {
alert('숫자만 입력하세요');
return;
}
const result = num1 + num2;
$('#result').val(result);
});
});
</script>
</head>
<body>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="result" disabled>
<button id="add">더하기</button>
</body>-
// val() : input 요소 값 getter/setter
// text() : input이 아닌 요소 값 getter/setter
// css() : 스타일에 대한 getter/setter
// attr() : 일반적인 속성 getter/setter
// prop() : 존재하면 적용되는 속성(readonly, selected, checked)
// prop는 속성을 읽거나 변경한다 -
class를 추가, 삭제하려면 addClass, removeClass를 사용한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<title>Document</title>
<script>
'use strict'
$(document).ready(function() {
$('#calc').on("click", function() {
const num1 = parseInt($('#num1').val());
if(isNaN(num1)) {
alert('숫자만 입력하세요');
$('#num1').val("").focus(); //chaining
return;
}
const num2 = parseInt($('#num2').val());
if(isNaN(num2)) {
alert('숫자만 입력하세요');
$('#num2').val("").attr("placeholder", "숫자만 입력");
return;
}
const op = $("#op").val();
if(op===null) {
alert("연산을 선택하세요");
return;
}
let result;
if(op==="+") result = num1 + num2;
else if(op==="-") result = num1 - num2;
else if(op==="*") result = num1 * num2;
else if(op==="/") result = num1 / num2;
$('#result').val(result);
})
});
</script>
</head>
<body>
<h1>계산기</h1>
<input type="text" id="num1">
<select id="op">
<option disabled selected>연산 선택</option>
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" id="num2">
=
<input type="text" id="result" disabled>
<button id="calc">계산하기</button>
</body>
</html>- $('document').ready(function(){})
: 결론부터 말씀드리자면 'html문서의 로딩이 다 끝나면' 을 의미합니다.
문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다. - focus:
: 마우스 포인터가 대상 엘리먼트에 위치할 때 이벤트를 처리하는 이벤트 핸들러 - val(""):
★ val() : Form Element 의 값을 받아오는데 쓰인다. (주로 input 이나 textarea 정도?)-> alert('숫자만 입력하세요');
주의해야할 점은 Form Element 이외의 값은 받아오질 못한다는 점.
<get/post>
<body>
<form action="서버주소" method="get/post" enctype="">
<input type="submit" value="서버로 넘어간다">
<button>폼안에 있으면 submit으로 동작한다</button>
<!-- button이 submit으로 동작하지 않게 하려면 -->
<button type="button">submit안해요</button>
</form>
</body>
</html>-
** get** : 서버의 상태가 변경되지 않는 작업 -> 재실행 가능 -> 즐겨찾기 지원 / 읽거나(Read) 검색(Retrieve) ** post** : 서버의 상태를 변경하는 작업 -> 재실행 불가능 / 새로운 리소스를 생성(create)할 때 사용 -
form태그의 action: form 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다./
-
enctype: form 태그의 enctype 속성은 폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시합니다.
이 속성은 form 요소의 method 속성값이 “post”인 경우에만 사용할 수 있습니다.
- submit안해요
: button이 submit으로 동작하지 않게 하려면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
<script>
function usernameCheck() {
if($('#username').val()==='') {
$('#username_msg').text('아이디는 필수입력입니다').css('color', 'red').css('font-size', '0.8em');
return false;
}
}
function passwordCheck() {
if($('#pwd').val()==='') {
$('#password_msg').text('비밀번호는 필수입력입니다').css('color', 'red').css('font-size', '0.8em');
return false;
}
}
$(document).ready(function() {
$('#username').on('blur', usernameCheck);
$('#pwd').on('blur', passwordCheck);
$('#login').on('click', function() {
if(usernameCheck()==false || passwordCheck()==false)
return;
alert("로그인합니다");
// $('#aaaa').submit();
})
})
</script>
</head>
<body>
<form id="aaaa">
<div class="form-group">
<label for="username">아이디:</label>
<input type="text" class="form-control" id="username" placeholder="아이디 입력" name="username">
<span id="username_msg"></span>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="비밀번호 입력" name="pwd">
<span id="password_msg"></span>
</div>
<button type="button" class="btn btn-default" id="login">로그인</button>
</form>
</body>
</html>
- id 속성
고유한 식별을 목적으로 하는 경우 사용합니다.
class 속성
재사용을 목적으로 하는 경우 사용합니다.
name 속성
form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성입니다.
- label for: id와 input id와 같아야 한다.
<화살표 함수/ call back함수>
<script>
$(document).ready(function() {
// 화살표 함수(자바에서는 Lambda 함수)
// $('#msg').on('focus', ()=>console.log('focus'));
$('#msg').on('focus', ()=>$('#msg').css('background-color', 'yellow').val('포커스를 가졌어요'));
$('#msg').on('blur', ()=>$('#msg').css('background-color', 'white')
.val("").attr('placeholder', '포커스를 잃었어요'));
//placeholder를 사용할 때는 입력된 내용을 초기화 해주어야 보인다
})
</script>
</head>
<body>
<input type="text" id="msg" />
</body>- 이벤트 핸들러 : 이벤트 처리하는 함수(이벤트가 발생하면 실행되는 함수)
프로그래머가 작성하지만 실행을 할 수는 없다(이벤트가 언제 발생할 지 모르니까)
시스템에 위탁해서 실행 -> callback 함수
GUI 프로그래밍에서는 콜백함수를 많이 사용한다
/
$('#msg').on("focus", function() {
console.log('focus');
});
/
- 화살표 함수: let sum = (a, b) => a + b;
안녕하세요