https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 2. Browser APIs browser API (or Web API)는 브라우저에게 기본으로 제공되는 API를 말한다. DOM 조작, 네트워크 통신을 요청, 클라이언트 측 저장소를 관리, 장치 미디어 스트림 검색 등을 위한 다양한 API가 있다. . DOM manipulation DOM이란 HTML 및 XML 문서를 위한 프로그래밍 인터페이스로 프로그램이 문서 구조, 스타일, 내용을 변경할 수 있도록 페이지를 나타내며 문서를 노드와 객체로 나타내 프로그래밍 언어가 페이지에 연결할 수 있도록 하는 인터페이스. /*==== Element 생성 ====*/ const..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 1. ES6+ Syntax 2015년 이후 ES6가 등장하며 큰 변화를 겪은 이후, ECMA가 발표하는 매년 새로운 자바스크립트 표준. (ES6 이후 발표된 ES 문법을 ES6+로 표기) . 용어 정리 Prototype 자바스크립트의 모든 객체는 Prototype 객체를 가지고 이 Prototype 으로부터 프로퍼티와 메소드를 상속 받는다. const obj = new Object(); // Object.prototype const arr = new Array(); // Array.prototype const date = new Date();// Date.proto..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 4. Animation 애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다. @keyframes 키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다. See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen. animation-name 사용하고자 하는 keyframe..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 3. Responsive Design 반응형 웹 (Responsive Web) 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 웹사이트. 하나의 HTML 소스로 특정 장치에 최적화된 환경을 사용자에게 제공 미디어 쿼리 (Media Query) 미디어 타입 all, aural, braille, handheld, print, projection, screen, tty, tv, embrossed 등이 있다. 위 문법에서 미디어 타입은 1개만 사용가능한 것은 아니며 쉼표(,)를 사용하여 여러 타입을 적용할 수 있다. 속성 width, height, device-width..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 2. Layouts CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들이 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 메인창과 비례해 어느 위치에 놓일것인가를 제어한다. 레이아웃 기술들에는 diplay, flex, grid, floats, position 등이 있다. Display 기본적인 display 속성으로 block 과 inline이 있다. block 요소는 해당 요소들은 같은 라인이 아닌 바로 다음 라인에 표시되고 inline요소는 바로 옆에 표시된다. Display Block Display Block Display Block Display Inli..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 CSS 1. Styling CSS 란? Cascading Style Sheets의 약자로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일시트 언어이다. CSS 문법 CSS 선택자 요소선택자 id 선택자 class 선택자 그룹 선택자 그룹 선택자 CSS 적용 인라인 스타일 HTML요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 인라인 스타일 내부 스타일 시트 HTML 문서 내에 내부 스타일 시트 외부 스타일 시트 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 하는 방법. (.css 확장자 파일 사용) http://www...
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 HTML 4. SEO SEO 란? SEO(Search Engine Optimization)는 검색 엔진 최적화라 하며 네이버나 구글 같은 검색 엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 과정을 말한다. 이를 통해 검색엔진 상위 노출도를 높일 수 있다. SEO를 위한 작업 메타 태그 description: 웹페이지에 대한 간략한 1~2줄의 문장 robots: 웹페이지별 검색로봇의 접근 여부를 설정하는 태그 title 태그 검색엔진에 노출되는 제목을 설정. 해당 페이지를 가장 잘 나타내는 주제로 정하는 것이 좋다. NAVER 오픈그래프 태그 웹페이지의 링크가 카카오톡이나 다른..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 HTML 1. HTML Tags HTML 주석 하이퍼링크를 정의 다른 출처로부터 인용된 영역을 정의 해당 문서의 콘텐츠 영역을 정의 행바꿈(\n)을 정의 클릭할 수 있는 버튼을 정의 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용 컴퓨터 코드의 일부분을 나타낼 때 사용 특정 컨텐츠에 기계가 읽을 수 있는 형태의 값을 덧붙어 나타낼 때 사용 HTML 문서에서 특정 영역이나 구획을 정의 문서나 특정 섹션의 푸터를 정의 사용자로부터 입력받을 수 있는 HTML 입력 폼을 정의 ~ HTML 문서에서 제목을 정의 해당 문서에 대한 정보인 metadata의 집합을 정의 문서나 특정 섹션의 헤더를..
