종로산업정보학교 인공지능컴퓨터과

흘러가고 없어질 전기신호를 담아놓는 그릇사용방법 : 1\. 만든다2\. 자료를 넣는다< 1. 변수 만들기 > let 나이 let 키 let 몸무게< 2. 자료를 넣는다 > 나이 = a 키 = b 몸무게 = cconsole.

줄바꿈 태그리스트 태그 (< ul > 안에 있어야함)ol은 순서가 있는 리스트1234 순으로 순서가 붙고, abcd ㄱㄴㄷㄹ 순서로 바꿀 수도 있음링크를 거는 태그< a href="링크내용" > 표기되는 글자(img태그 사용가능) < /a >"링크내용"

// : 주석처리코드 곳곳에 console.log를 넣음으로서 계산한 데이터나 코드가 제대로 실행됐는지 확인let 숫자 = 1 <---- 숫자데이터let 문자 = "문장" <---- 문자데이터 1 : 계산의미의 숫자"1" : 문자의미의 숫자"899

h태그는 1에서 6까지 있고, 갈수록 작아진다.< a > : 링크를 연결해주는 태그 (href=""는 속성)ul : li태그를 감싸주는 태그li : 리스트 작성 태그ol : 순서가 있는 태그

=====================================================================

Document Object Model기본원리 - 1. 원하는 태그 선택. 2. 선택한 태그를 조작함

b : bold글씨를 굵게 만들어줌글씨를 기울여줌표 작성 태그\*class와 id는 같은 역할이지만 class는 여러개를 중첩으로 추가할수 있고, id는 오직 하나의 id만 쓸수있다

let a = 1 데이터 종류1 : 숫자let b = "김태연"데이터 종류2 : 문자let c = true데이터 종류3 : boolean - 참과 거짓console.log( a )console.log( "a" )console.log 함수 안에 여러 개의 데이터 집어넣는

DOM 2차시 기본원리 1. 원하는 대상 선택 기본원리 2. 선택한 대상을 조작하기 document.querySelector( ) 를 통해 태그를 변수( let )로 선택한다 - class 또는 id 사용 선택한 태그를 조작한다 리스트지정.style.backgro

< link rel="stylesheet" href="CSS파일 이름" >

이벤트 리슨 : 이벤트를 listen마우스 이벤트 : click, dblclick, mousedown, mouseover, mouseout대상지정그 대상에게 원하는 짓 아무거나 하기count = count + 1 ( count가 1 증가한다 )function ( ) {

머리, 옆구리, 네비게이션, 발바닥, 등 이름만 가지고 어느 역할을 하며, 웹에서 어느 위치에 있는 태그인지 쉽게 파악 가능.시맨틱 태그는 기능은x. div와 동일한 역할.태그에 의미가 있기 때문에, 검색을 할 때 자료를 쉽게 찾게 해주거나 시각장애인에게 도움을 주기도

색변경글씨 크기글씨 두께 ( 폰트별로 다름 )줄간격글씨 스타일 ( italic은 기울여줌 )그림자 ( 가로px 세로px 선명도px )글씨 간격리스트 스타일 ( none은 리스트앞 점을 빼줌 )

시맨틱 태그 semantic header nav / main section article / aside table

setAttribute : 속성 지정변수.setAttribute("바꾸려는 속성이 뭔지", "무엇으로 바꿀 것인지")

form fieldset : form에서 div역할을 함 legend : 해당 영역의 타이틀, 제목 체크박스의 유의사항 : value라는 속성 사용해주기 (사용자가 직접 데이터를 입력하는 형식이 아니라 수동으로 데이터를 입력해야함) placeholder : 칸이 비어있을때 표시되는 문구 autofocus : 페이지에 들어오자마자 자동으로 칸을 선택해줌

const 이미지태그 = document . querySelector ("img")이미지태그 . setAttribute ('내가 바꾸고자 하는 속성', "무슨 값으로 바꿀 것인지")let 겟겟 = 이미지태그 . getAttribute("width")겟 = 이미지태그 .

for과 id가 동일해야함\_input 태그 안에 required 태그를 넣으면 필수입력

creatElement : 속성 추가 textContent : 내용 추가 appendChild : 특정변수(부모)에 요소 추가 조건문 조건에 따라 코드를 실행

스타일 적용시 박스 요소의 관계없이 설정한 width, height 값에 맞게 적용이 됨

태그.setAttribute("width", "300px") 는 잘 안씀 태그.style.width = "300px" 대신 이걸로 스타일을 넣음 조건식 a > b a = b a <= b a == b a != b

키보드 이벤트 document . addEventListener ("keyup-keydown-keypress", fucntion(event) {}) keyup 키를 눌렀다 뗐을때 keydown 키를 눌렀을때 keypress 키를 눌러서 압력을 가했을때(keydown 이랑 비슷하지만 조금 늦게 발동함)

color: rgb ( red, green, blue )색깔의 범위 : 0 ~ 255마우스 포인터 형태를 바꿈박스의 요소에 관계없이 지정한 사이즈 만큼 박스 크기를 조절함

함수 function 이름(a, b) { return a + b }

CSS 선택자 parent 안의 모든 h1 선택 parent 안의 모든 자식 h1 선택 son의 가장 가까운 형제 h1 선택 son의 모든 형제 h1 선택 가상클래스 마우스 올렸을때 적용 마우스 클릭했을때 적용

가상요소 html에서 인식하지 않는 가상의 요소 지정한 요소의 앞,뒤로 가상요소 추가 지정한 요소를 선택(드래그) 했을때 지정한 요소의 홀수(odd), 짝수(even)에 스타일 추가

지정된 변수의 값이 바뀔때마다 이벤트가 발생함

부모에게 적용하는 것: display:flex / justify-content / align-itemsleft, center, right, space-around, space-between, space-evenlystart, center, end자식에게 적용하는 것:

DOM

포지션 position: relative, absolute, fixed; 지정된 태그의 위치를 지정해주는 스타일 z - index : 뒤에 적힌 숫자의 크기에 따라 z축(높이)를 지정함(크기순) fixed : 박스를 지정한 위치에 고정함 absolute : 박스를 부모의 크기 내에서 지정된 위치로 옮김 *absolute를 쓸땐 부모에 포지션 relat...

그리드 grid - template - columns : 가로 정렬 및 크기 지정 grid - template - rows : 세로 정렬 및 크기 지정 gap : 박스 간 간격 조정

파이썬의 리스트 = 자바스크립트의 배열(array) 파이썬의 dictionary 딕셔너리 = 자바스크립트의 객체

toFixed(a) : 소수점\*내가 만들지 않았어도, 존재하는 객체가 있음 (document)JSON.stringify() : 데이터를 표준화 시켜서 변환함JSON.parse() : 데이터를 원상태로 복구시킴문자열 . length : 문자열의 길이를 알려줌문자열 .

transform : translate(00, 00), rotate(00deg), scale(00) 지정한 요소의 크기, 위치, 각도회전

setInterval / setTimeout setTimeout : 카운트다운 한 후에 코드 실행 사용법 : setTimeout(함수, 시간) setInterval : 간격. 간격마다 반복해서 실행. 1초마다 반복실행, 2초마다 반복실행 사용법 : setIn

ceiling : 올림 floor : 버림 round : 반올림 abs : 절댓값 sqrt : 루트 random : 랜덤한 숫자를 뽑아줌

ex)op.gg/멘탈게임op.gg/만득아달려op.gg/가락잡는도구app.js : 위 3가지를 한번에 컨트롤 해주는 놈express : 유저와 node.js 사이에서 중간작용패키지 라이브러리 스토어

기본키 : 항목을 구분하는 고유식별번호 도메인 : 영역(데이터 범위) primaryKey : 고유키 allwNull : Null값 허용 db.js 에서 import