크롬 개발자 도구 시작하기 단축키 : F12, Cmd + Alt + I (Mac), Ctrl + Shift + I (Window) 크롬 우측 메뉴버튼 -> 도구 더보기 -> 개발자 도구 우클릭 -> 검사 Elements 패널 왼쪽 상단의 버튼을 클릭하여 엘리먼트를 선택하면 선택된 엘리먼트를 확인할 수 있다. [Style] 탭에서 스타일을 변경할 수 있다 [Computed] 탭에서 적용된 최종 스타일과 무시된 상위 스타일 그리고 각 스타일이 선언되어있는 파일 및 위치를 확인할 수 있다 Console 패널 해당 페이지의 로그메시지를 확인할 수 있는 패널이다. 또한 Javascript를 실시간으로 실행 및 확인할 수 있다. Sources 패널 소스를 편집하거나 Break point를 걸어 디버깅할 수 잇는 패..

Object(객체)란? 객체란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다. https://wonillism.tistory.com/224?category=971578 [C++] Class(클래스)란? OOP(Object-Oriented Programming) 객체 지향 프로그래밍 객체 지향 프로그래밍에서는 모든 데이터를 객체(object)로 취급하며, 객체가 프로그래밍의 중심이 된다. Object(객체)란? https://ko.wikipedia.org/wik.. wonillism.tistory.com C++의 클래스를 정리하면서 객체의 개념도 정리해두었다. 자바스크립트 객체 자바스크립트의 기본 타입(data type)은 객체이다. 원시형 값을 제외한 나머지 값은 모두 객체이다. 원시형은 단 ..

JSON, Javascript Object Notation의 약자이다. Key-Value 쌍 또는 Attribute-Value 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신(AJAX)를 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포멧이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, Java, Javascript, Python 등 수많은 프..

자바스크립트는 객체(object) 기반의 스크립트 언어이다. 스크립트 언어: 응용 프로그램과 독립하여 사용되고 일반적으로 응용 프로그램의 언어와 다른 언어로 사용되어 최종 사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다. 인터프리터 방식에 사용하기 위해 나왔다. 인터프리터 언어: 컴파일 작업을 거치지 않고, 소스코드를 바로 실행할 수 있는 언어(자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스코드를 직접 해석하여 바로 실행) (Javascript, Python Ruby 등) 컴파일 언어: 반드시 기계어로 컴파일되어야만 실행시킬 수 있는 프로그래밍 언어 (C, C++, Java 등) HTML - 웹의 내용 작성 CSS - 웹 디자인 Javascript - 웹의..

선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게된다. HTML페이지 안의 특정 요소들을 어떻게 렌더링할 것인지 브라우저에게 알려주는 CSS 문장이다. 선택자 종류 Universal Selector(전체 선택자) "*" : HTML페이지 내부의 모든 태그를 선택 Type Selector(태그 선택자, 유형 선택자) 주어진 노드 이름을 가진 모든 요소를 선택 , , , ... 등 Class Selector(클래스 선택자) 클래스 속성값이 [클래스 이름]으로 지정된 요소를 선택 문서 안에 복수의 요소에 스타일을 적용하는 경우에 사용 마침표(.)을 사용하여 표시 ID Selector(ID 선택자) ID 속성값이 [ID 이름]으로 지정된 요소를 선택 문서 내..

Cascading Style Sheets, CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로 HTML과 XHTML에 주로 쓰이며, XML 에서도 사용할 수 있다. HTML이 웹사이트의 뼈대를 담당한다면 CSS는 옷과 같이 꾸미는 역할을 담당한다고 할 수 있다. https://wonillism.tistory.com/98 [HTML] HTML이란? HTML이란? HyperText Markup Language 의 약자로서 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다. 하나의 언어(Language)로 취급 온라인 상에서 문서를 주고받을 때 연결하는 역할, 이 wonillism.tistory.com CSS는 규칙 기반 언어이다. 규칙은 selector(선택자)와 함께 열린다...

BOM이란? Browser Object Model의 약자로 브라우저와 관련된 객체들의 집합으로서 BOM을 이용하여 Browser와 관련된 기능들을 구성한다. 이 BOM을 이용해서 Browser와 관련된 기능들을 구성한다. BOM의 최상위 객체는 window 객체이다. DOM이란? Document Object Model의 약자로 window 객체의 하위 객체중 하나이다. 넓은 의미로 웹 브라우저가 HTML페이지를 인식하는 방법을 의미하고, 조금 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미한다. HTML에 있는 내용들을 javascript가 알아들을 수 있는 내용으로 바꾸고, 바꾸는 과정에서 HTML이 트리 구조로 되어있으므로 그 구조의 성격이 자연스럽게 반영된다. 결국, DOM을 조작하..

HTML이란? HyperText Markup Language 의 약자로서 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다. 하나의 언어(Language)로 취급 온라인 상에서 문서를 주고받을 때 연결하는 역할, 이미지를 표현, 웹 사이트, 웹 페이지, 웹 문서라는 표현을 사용 기본 형태 //문서 타입을 html이라고 명시 //여기서부터 "html 코드이다" 라고 명시 문서에 표시되는 컨텐츠가 위치 Meta 정보 : 눈에는 보이지 않지만 추가적인 정보를 뜻함 head에 charset, metadata등 정보들을 어떻게 표현할지 담는 태그들이 들어간다. 태그(Tag)란? 정보를 정의하는 형식 그 의미에 맞춰서 사용해야 한다 링크, 이미지, 목록, 제목 등 많은 태그들이 있다 태그는 그 의미에..