day04[DOM]
DOM(Document Object Model) 객체 HTML 태그들을 하나씩 객체화한 것. HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체이다. HTML 태그 당 DOM 객체가 하나씩 생성된다. HTML 태그의 포함관계에 따라서 부모, 자식, 형제자매 관계로 구성된다. ----- for..in / for..of in 뒤에 있는 자료구조의 key값을 i에 담을 수 있다.(lists가 배열형태니까 i가 인덱스임.) of 뒤에 있는 자료구조의 value값을 list에 담을 수 있다. prototype : 객체화 없이 static변수처럼 바로 필드에 접근할 때 사용 HTMLCollection.prototype.forEach = Array.prototype.forEach; //HTML객체에도 for..
터미널 : ctrl + ` cd day01(폴더명) node date.js(파일명) 이미 만들어져 있는 객체 --> 코어객체 프젝할 때 관리자페이지 만들어야 함 관리자페이지는 웹이고 페이징처리가 들어감 1.math Math.floor(Math.random() * n) : 0 ~ n-1의 난수 > Math.random()은 실수(소수점)으로 나옴. 거기서 n을 곱하면 n-1까지 범위가 나옴. Math.floor 소수점아래 버림. ex) 0.7 * 2 >> 0과 1이 나옴.(n-1까지)(소수점아래 버림) 2.date body태그도 document객체의 프로퍼티임. document객체는 문서의 모든 것들을 관리하는 객체임. body태그 안에도 여러 프로퍼티가 있음. 그 안에 style(객체)이라는 프로퍼티가 ..
데이터 타입과 변수 7.상수 : 두 번 이상 선언 불가 let : 수정 가능 const : 수정 불가능 함수가 아닌 다른 영역(중괄호 영역)에서는 scope로 판단하지 않는다. for문 안에서 var i는 지역변수 같지만 함수의 scope가 아니기 때문에 영역밖에서도 사용이 가능하다. 예약어() >> 함수가 아님! var 함수레벨 let 블록레벨(블록={}=바디) let 키워드는 함수 레벨 스코프가 아닌 블록 레벨 스코프이기 때문에, 중괄호 안에서 선언하면 함수가 아니여도 해당 중괄호가 닫히면 메모리에서 해제된다. 중괄호 안에서 let으로 선언된 변수는 밖에서 사용할 수 없다. 변수 선언할 때 var나 let을 사용하자! let 자바의 변수와 비슷(중괄호를 벗어나면 사용불가) const 자바의 final..
full screen 캡쳐하는 방법 f12 > ctrl+shift+p > capture > fullscreen.. 자바스크립트(Javascript) ; 스크립트 언어(대화형 언어) 1.퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 2.컴파일 과정 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다. ※ 개발이 발전됨에 따라 컴파일 과정이 가능해졌으며, Node.js(Node라는 명령어로 작업)로 서버환경을 구축한다. 컴파일 언어 > 페이지 단위로 통채로 번역 VS 스크립트 언어 > 한 줄씩 번역 컴파일과 컴파일언어는 다름. 컴파일 : 번역파일 만드는 과정 .java(사람 언어) .class(컴퓨터 언어) javac명령어 java명령어 (jdk11이상부터 java명령어 하나..
웹 크롤링(실시간 데이터 수집) 정식 명칭은 web scraping이며, 웹 사이트에서 원하는 정보를 추출하는 것을 의미한다. 보통 웹 사이트는 HTML 기반이므로 정보를 추출할 페이지에서 개발자 모드 실행 후 원하는 태그를 검색하는 스킬이 요구된다. 웹 크롤링 라이브러리 1. Jsoup 정적 데이터를 비교적 빠르게 수집할 수 있지만 브라우저가 아닌 HTTP Request를 사용하기 때문에 동적 데이터를 수집하기 위해서는 해당 서버의 인증 키 요구 등 수집할 수 없는 경우가 많다. 2. Selenium Jsoup에 비해 느리지만 브라우저 드라이버를 사용하여 동적 데이터도 수집 가능하다. 주로 python에서 많이 사용 ※ 셀레니움 사용 시 주의사항 - 브라우저의 url을 변경할 때에는, 미리 WebEle..
의미가 있는 >> 시맨틱 >> 시맨틱 태그(header, main, footer) 남발하면 좋지 않음. 구글에서 만듦. 시맨틱 태그 시맨틱 : "의미가 있는" HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다. ▶ 태그의 종류 : non-semantic태그, 안에 들어갈 의미를 크게 유추하기 힘들다. , : semantic태그, 특정 형태의 글이 포함될 것이라는 유추가 가능하다. -header : 상단, 헤더를 의미 -nav : 메뉴, 네비게이션을 의미 -main : 내용의 중심을 의미 -aside : 사이드에 위치하는 공간을 의미(어디에 위치해도 이상하지 않음) -section : 여러 중심 내용을 감싸는 공간을 의미(어디에 위치해도 이상하지 않음) -article : 글..
day02[우선순위,미디어쿼리,가상요소]
CSS는 Cascading Style Sheets의 약자이다. Cascading > 폭포처럼 흐른다 > 우선순위 캐스케이딩(Cascading) 하나의 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요하다. 1. 중요도 : CSS가 어디에 선언되었는 지에 따라서 우선순위가 달라진다. (1) 인라인 스타일 HTML 요소 내부에 style 속성으로 사용 (2) 내부 스타일 시트 HTML 문서의 style 태그 안에 위치 (3) 외부 스타일 시트 CSS 파일을 외부에 따로 만들어서 불러오는 방법 외부에서 링크로 추가하는 방법 (4) 웹 브라우저 기본 스타일 브라우저 기본 스타일(기본 마진) 우선순위는 (1) > (2) > (3) > (4) 순이다...
