퍼블리싱 맛보기

yuna·2022년 9월 18일

CSS JavaScript Web Publishing html js publishing

web

목록 보기

1/4

1. HTML5

html 기본 : DOM 구조로 겹겹이 쌓여있는 구조
form 태그 의의 및 주요 속성
1. 의의: 데이터를 전송하기 위한 구조 https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
2. 주요 속성
  - action: 데이터를 보낼 url
  - enctype: 데이터의 미디어 타입
  - ccept-charset: 데이터 인코딩 형식
  - method: get || post
input의 종류 및 주요 속성
1. 종류: text, number, email, password, file, date, radio, checkbox 등
2. 주요속성

2. CSS3

전체 선택자: * {~} ⇒ 초기화할 때 사용

태그 선택자 : 해당 태그를 사용하는 노드를 전체 선택

<div> <!-- 부모 태그 -->
	<p></p>
	<p></p>
	<p>
		<a href="naver.com">네이버로 이동</a> <!-- 최하위 자식 태그 -->
	</p>
</div>

p {
	style : ~~
}

// 1
document.getElementsByTagName('p');

//2
$("p")

class 선택자 : 중복 가능

<div class="test"></div>

.test {
	style : ~~
}

// 1
document.getElementByClassName('test');

//2
$(".test")

id 선택자 : 중복 불가

<div id="test"></div>

#test {
	style : ~~
}

// 1
document.getElementById('test');

//2
$("#test")

복합 선택자

<div> <!-- 부모 태그 -->
	<p></p>
	<p></p>
	<p class="test">
		<a href="naver.com">네이버로 이동</a> <!-- 최하위 자식 태그 -->
	</p>
</div>

div> p> a {
	style : ~~
}

p.text> a {
	style : ~~
}

// 1
document.querySelector('p.text> a');

//2
$("p.text> a")

속성 선택자

<div> <!-- 부모 태그 -->
	<p></p>
	<p></p>
	<p name="test">
		<a href="naver.com">네이버로 이동</a> <!-- 최하위 자식 태그 -->
	</p>
</div>

a[href="naver.com"] {
	style : ~~
}
p[name="test"]{
	style : ~~
}

// 1
document.querySelector('p.text> a');

//2
$("p.text> a")

가상 클래스 선택자

<div> <!-- 부모 태그 -->
	<p></p>
	<p></p>
	<p name="test">
		<a href="naver.com">네이버로 이동</a> <!-- 최하위 자식 태그 -->
	</p>
</div>

/* n 번째 자식*/
p:nth-child(3) {
	style : ~~
}
/* 마우스를 올렸을 때*/
a:hover{
	style : ~~
}

// 1
document.querySelector('a').addEventListener("mouseover", function(){
	[function]
});

//2
$("a").hover(function(){
	[function]
})

3. JS

*간식 메뉴 랜덤 정하기 프로그램 만들기 실습

중요한 점: 모르는 게 나올 경우 javascript 표준안 문서를 참고하여 작성

https://developer.mozilla.org/ko/

<!DOCTYPE html>
<html lang="ko">
<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>js 놀기</title>
</head>
<body>
    <button onclick="getMenu()">메뉴를 주세요!</button>
</body>
</html>

// menu는 전역 변수 = 어디서든 접근이 가능함
// const 는 상수형으로 변경이 불가능
const menu = ["중국집", "서브웨이", "분식", "초밥", "피자"];

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
}

function getMenu(){
    let min = 0; //함수내에서만 사용이 가능한 지역 변수
    let max = menu.length - 1;
    let randVal = getRandomInt(min, max);
    let p = document.createElement("p");
    p.textContent = menu[randVal];
    document.body.appendChild(p);
}

var, let, const의 차이점

var : 재선언, 재할당 가능
let : 재선언 불가능, 재할당 가능
const : 상수형 - 재선언, 재할당 불가능

var가 재선언이 가능한 이유

호이스팅이란 변수 선언문, function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성

변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데 var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어짐

`let` 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됨

```jsx
// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
```

```jsx
// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
```

참고 자료: var, let, const 차이점 (velog.io)