<!--html:5입력해서 기본 양식 작성 또는 !로-->
<!--자동정렬은 mac shif + option + f-->
<!--아래 console이 pop안되면 esc누르면 된다.-->
<!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>
<h1> Title</h1>
<h2> Title 2</h2>
<p> dodododododo</p>
<h1> Title</h1>
<h2> Title 2</h2>
</div>
<!-- <script>
// 자료형 : 문자, 숫자, boolean
var title = '타이틀'
var num = 1
var bool = false
var bool2 = true
// 변수 만들기, 세미콜론은 script에서 자동으로 넣는다.
// console에 log 출력 !
let maninTitle = '메인'
const subTitle = '서브 타이틀'
console.log(maninTitle,subTitle)
console.log(title, num)
console.log(bool, bool2)
// 디버거로 console.log()를 사용 !
// 주석처리는 command + /
</script> -->
<!-- <script>
// 자료형 : 문자, 숫자, boolean
// var title = '타이틀' //var는 전역변수
// 변수 만들기, 세미콜론은 script에서 자동으로 넣는다.
// console에 log 출력 !
let mainTitle = '메인' //let은 변경 가능한 변수 선언
let mainTitle2 = 'main2'
let num = 123
let num2 = 123
// 숫자는 숫자끼리 숫자 연산이 일어나고, 문자는 합쳐져서 문자열이된다.
const SUBTITLE = '서브 타이틀' //const는 불변의 상수. 보통 const 변수는 대문자로 많이 사용한다.
//SUBTITLE = 'sub title'
// maninTitle = 'main'
// let maninTitle = 'main' 이렇게 또 사용하면 이미 선언된 변수이기때문에 다시 못쓴다.
var title = 123 //전역 변수이기때문에 아래에서 이렇게 변수 재선언가능... 그래서 수업때 많이 안쓴다고 하심
console.log(mainTitle,SUBTITLE)
console.log(title)
console.log(mainTitle+mainTitle2)
console.log(num+num2)
// 디버거로 console.log()를 사용 !
// 주석처리는 command + /
// 배열 만들어보기 !!!
let arr = ['a','b','c',1,false]
console.log(arr)
console.log(arr[0],arr[1],arr[2],arr.length)
// 여기까지 list 자료형, arr.length처럼 .length를 사용하면 리스트 내의 갯수를 확인 할 수 있다.
let obj = {
cat: '고양이',
'age' : 12,
'dead' : false
}
console.log(obj,obj.cat)
// dictionary 자료형 ! obj라 한다.
obj.age = 13
obj.cat = 'dog'
obj.action = 'act'
console.log(arr)
console.log(length)
console.log(obj)
alert('alert')
// 경고 팝업 띄우기
// confirm('acc')
// confirm 은 boolean을 리턴한다.
let conf = confirm('acc')
let prom = prompt('입력해주세요')
let arg1 = 'a'
let arg2 = 'a'
result = arg1 == arg2
console.log(arg1 == arg2)
// 조건문 만들기 if(조건문) {true일 떄} else {false일 때}
// let fal = !true >>> !는 not의 의미 !
if(result == true) { //true
console.log('참')
}
else{ //false
console.log('거짓')
}
</script> -->
<script>
// 비교 연산자!!
let a = 1
let b = 2
// let result = a > b
let result = a < b
// let result = a >= b
// let result = a <= b
console.log(result)
let arr = ['a','b','c','d']
// 반복문 만들기 for 문
// for(let i=0; i<arr.length; i++){
// console.log(arr[i])
// }
// 초기값 조건 1을 증가시키는 문법(i++)
for(let i=0; i<arr.length; i++){
// debugger 를 넣으면 for문에서 break로 작동한다.
console.log(arr[i])
}
//while(조건) 조건에 따라서 무한 반복하는 while문
// while(){
// }
// let x=0
// while(x<10) {
// console.log(x)
// x++
// }
// 함수의 사용
// function
// 함수 함수명 매개변수
function hello () {
console.log('hello brother')
}
// 함수 호출
hello()
function bye (name,age) {
console.log(name)
console.log(age)
}
bye('qwerqwer', 33)
bye('dragon', 23)
bye('monkey', 10)
const greet = function(arg){
arg.name = 'none'
return arg
}
const obj = {
name : 'JH',
age : 50,
}
const results = greet(obj)
console.log(results)
</script>
</body>
</html>
<div id = "div1">
<h1 class="h-el">title</h1>
<h2 class="h-el">title</h2>
</div>
<script>
// id 찾을 때는 #을 붙이고 id입력(즉, id값으로 div 태그 안의 내용을 가져 올 수 있다.)
const mainDiv = document.querySelector('#div1')
console.log(mainDiv)
</script>
1) 먼저, document에 class라는 폴더를 만든다.
terminal)
cd ~/Documents하고
mkdir class
cd class
이렇게 접근 해도 된다.
2) terminal을 키고, cd /Users/honey/Documents/class를 입력해서 이동합니다.
3) yarn 입력
4) yarn init 입력
5) yarn으로 되지않아 다 지우고 , npm init을 한 후 , npm install을 하였다.
6) npm, yarn >> package 관리자 >> 라이브러리를 관리하기 위해서 이와 같은 설정을 하였다.
7)
설치가 완료되면 위와 같이 3개의 파일이 생성된 것을 확인 할 수 있다.
8) 구글에 puppeteer core 라고 친 후
npm i puppeteer-core를 shell에 입력하는데, 디렉토리는 class 그대로!
나는 yarn이 되지않아 npm으로 설치를 하였다.