HTML + CSS + JavaScript

[JavaScript] Day 03_2 (Note + Code): 프로토 타입, 화살표 함수, 이벤트

1. 프로토 타입 prototype : 메모리 절약을 위한 방법 중 하나 공유해서 사용할 것들을 prototype으로 만들어두면 메모리를 효율적으로 사용 가능하다. 나아가서, 상속관계까지 만들어줄 수 있다. (메모리를 매번 생성할 때마다 차지하지 않게 해 주려고) JS는 프로토타입 기반 언어라고 함. 잘 알아야 한다.. 프로토타입 자체가 자스라서 이해하기 힘들 수 있다. 자바 같은 경우는 객체 지향에서 빠질 수 없는 부분이 클래스. JS도 객체 지향인데 클래스라는 개념이 없다 대신에 프로토 타입이 존재한다. 클래스가 없으니까 기본적으로 상속 개념도 없다. ES6부터 새로운 게 생기면서 상속이 가능해졌는데 문법 내부에서는 프로토타입으로 돌아간다. 메모리 절약을 위해서 프로토 타입으로 메서드로 만들어 놓으면..

[JavaScript] Day 03_1 (Note + Code): 문서객체 모델, 사용자 정의 객체

2022/3/7 *노드 탐색 요소.parentNode: 선택한 요소의 부모 노드 요소.previousSibiling: 이전 형제 요소 요소.nextSibiling: 다음 형제 요소 요소.firstChild: 현재 요소의 첫 번째 자식 노드 요소.lastChild: 현재 요소의 마지막 자식 노드 요소.childNodes: 자식 노드들 요소.children: 자식 노드들 *요소 조회 1. 요소의 컨텐츠 조회 textContent: 문자열을 넣어주면 된다 (사용 추천) innterText: 렌더링이 된 텍스트 넣어주기 (비표준 문법) innerHtml: html이 파싱 된 텍스트. (보안이 취약해 비추) 2. 요소의 속성 (attribute) 접근 / 수정 className: 태그의 클래스 속성 (태그에 클래..

[JavaScript] Day 02_2 (Note + Code): 내장 객체, 브라우저 객체 모델, 문서 객체 모델

자바 스크립트 객체 1. 내장 객체 (Built-in Object) 자바 스크립트 엔진에 내장 문자(String), 날짜(Date), 배열(Array), 수학(Math) 등 2. 브라우저 객체 모델 (BOM Browser Object Model) 브라우저에 계층 구조로 내장되어 있는 객체를 말함 window(브라우저 창), screen(브라우저 화면), location(주소창), history(뒤로 가기, 앞으로 가기, 방문했던 기록들), navigator 등 (window는 상위 객체. 하위 객체에 document, location) 3. 문서 객체 모델 (DOM Document Object Model) HTML 문서 구조를 객체화 4. 사용자 정의 객체 내장 객체 (Built-in Object) 1...

[JavaScript] Day02_1 (Note): 스코프, 함수 리터럴과 익명 함수, 스크립트 태그 위치

2022/3/4 [함수 이어서...] 스코프 : 변수 또는 함수의 유효 범위를 말함 1. 전역 변수 Global Variable 선언 위치: 함수 밖, {} 밖 사용 범위: 자바 스크립트 전체 영역 var num = 10; //전역 변수 function test(){ console.log(num); //전역 변수 출력(1) num=100; //전역 변수 수정 가능 console.log(num); //(2) var num =200; //지역변수 선언 console.log(num); //이렇게 하면 처음에 (1)에 있는 num 출력이 undefined가 됨. 지역 변수가 같은 이름으로 선언이 되었기 때문에 지역 변수 num의 우선 순위가 높다. 1번은 언디파인드, 2번은 지역 변수 num에 100이 대입되어..

[JavaScript] Day 01 (Note + Code): 변수, 데이터 타입, 입력문, 배열, 함수

2022/3/3 객체 기반의 스크립트 프로그래밍 언어. 웹 브라우저 내에서 많이 사용, 다른 응용 프로그램의 내장 객체에도 접근 가능한 기능 있음. 자바랑 자바스크립트랑 전혀 상관없지만 c언어 파생이라서 문법은 비슷함. js붙어 있는 건 자바스크립트 기반이라는 의미. ex) node.js 자바스크립트 엔진에 기반해 만들어진 서버 사이트 플랫폼 기본사항 *자바 스크립트 작성 위치 1. HTML 문서의 태그 안-> (로딩하기 전에 세팅 값 등등 먼저 필요하면 위에다가.. 남이 쓴 건 위에다가 달기) 2. HTML 문서의 태그가 닫히기 전에 (추천) (내가 쓴건 밑에) 3. 확장자 .js 페이지로 분리해서 만들고 에 태그로 링크 걸기 (추천) *주석 js: // 한 줄 주석 /*여러줄 주석*/ 문장의 끝을 알..

[CSS] Day 02 (Note + Code): 반응형 레이아웃

2022/3/3 CSS Media Query와 반응형 레이아웃 적응형 웹: 모바일, PC인지 따라서 다른 사이트를 보여주는 것. ex) 네이버. www.naver.com/m.naver.com 반응형 웹: 웹 주소 동일. 화면 사이즈에 따라 다르게 보임. pixel: 디스플레이 구성 최소 단위 viewport: 화면상의 표시 영역. 폰트는 12~16픽셀이 보기 좋다. 스마트폰 virtual viewport는 980px로 대부분 해놓는다. meta viewport: viewport에 원하는 너비를 넣으면, 해당 너비에 맞게 웹브라우저가 페이지를 표시한다. *다양한 디스플레이에 맞는 웹페이지를 구현하려면 뷰포트를 사용하면 된다.

[HTML] 연습 문제

01. 이력서 성명 주민등록번호 생년월일 년 월 일생 (만 세) 주소 연락처 집 전자우편 핸드폰 02. NAVER 아이디 비밀번호 비밀번호 재확인 이름 생년월일 성별 성별 여자 남자 선택안함 본인 확인 이메일 휴대전화 사이트를 알게된 경로 웹사이트 검색 주변인 추천 배너 광고 티비 광고 개인 홈페이지 URL 프로필 사진

[CSS] Day01 (Note + Code): 백그라운드, block & inline, 폰트, 포지션, float, flexbox

2022/03/02 background 관련 속성 참고 사이트: www.cssreference.io 1. background-image 속성 url(경로나 파일 명) 2. background-repeat 속성 repeat: 디폴트 설정. 넘치면 잘라줌 space: 이미지를 반복해서 채우는데, 처음과 마지막 반복 이미지 양끝에 고정후 나머지를 반복. round: 이미지를 반복, 이미지가 잘리지 않도록 전체 반복. 이미지 사이즈 재조정됨 no-repeat: 반복 안 함 3. background-size 속성 배경 이미지가 요소의 사이즈보다 작거나 클 때 조정하는 걸 뜻함 auto: 이미지 크기 유지 default length: px, % 등으로 값 설정 cover: 요소 사이즈 다 채울 수 있게 이미지 확대..

[CSS] Day01 (Note+Code): 단위, 선택자, 박스 모델

2022/3/2 HTML이 웹사이트 내용을 나열하는 것이라면 CSS는 디자인 구성. (html5, css3) Javascript는 웹 상에서 프로그래밍 언어라고 할 수 있다. 이벤트 처리 등 여러 로직과 기능을 구현해서 동적인 페이지로 보이게 해 준다. CSS : Cascading Style Sheets. 독립적으로 사용 불가. HTML에 디자인적 도움을 주는 언어. 1. CSS selector (선택자) : HTML 문서의 특정 부분에 대해 렌더링 방법을 (또는 디자인적인 부분을) 정의하기 위해서는 특정 부분을 선택하기 위해 선택자를 사용해야 한다. 2. CSS 적용 형식 : 선택자로 요소를 선택하고 그에 관련한 속성명 써주고 옆에 속성 값. 선택자 {속성 명 : 속성 값;} 속성 명 = propert..

[HTML] (Code)

01 안녕하세요 hello hello hello hello hello hello testetste Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime explicabo cum minima soluta, beatae provident neque eaque esse quam deserunt voluptatem vitae reprehenderit voluptatibusdolorem tenetur sapiente! Nihil, fugit distinctio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis aperiam minima saepe corrupti a reiciendis vit..