전체 글 50

[JavaScript] 데이터 타입 (1) - 기본타입

1. 숫자 (number) - 숫자 데이터를 나타내는데 사용한다. - JS는 정수, 실수를 구분하지 않음. 정수, 실수를 구분하는 언어였다면 실수와 정수를 더해줄 수 없음. 따라서 1, 1., 1.0 을 모두 1.0으로 간주한다. - 2^64~(-2^53) 사이의 숫자값이 오며 부동 소수점을 표현할 수 있고 다음과 같은 값을 포함한다. (1). NaN: Not-a-Number 숫자는 아니지만 값이긴 함. (1 * a와 같이 문자 x 숫자의 결과값으로 반환됨. 숫자가 아님에도 값을 설정해서 다른 부분이 죽지않고 작동되도록 해주는 땜빵 같은 부분) (2). Infinity: 양수무한대 (3). -Infinity: 음수무한대 ​ 2. 문자열 (string) - 텍스트 데이터를 나타내는데 사용한다. - "", ..

JavaScript 2020.06.03

[JavaScript] Variable (변수)

출처 - 생활코딩, https://opentutorials.org/course/3085/18871 - Nomad Academy, www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK - 자바스크립트 비기너, www.inflearn.com/course/자바스크립트-비기너# Vaiable (변수) - 값(모든 종류의 값이 들어갈 수 있다)을 모아놓는 책장같은 역할. 대명사의 역할같기도 하다. ​ - 간단한 연산을 하더라도 변수로 지정을 해두고 변수로 써두면 나중에 값을 수정하더라도 변수안의 값만 수정하면 되니까 훨씬 편하다. ​ - 변수명은 특수 문자와 $, _을 제외한 모든 문자로 시작할 수 있다. - 변수를 만들 땐 변수명..

JavaScript 2020.06.03

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - Variable (let, const, var), Array, Object / 20.06.02

출처 : www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #1.6 Your first JS Variable - 자바스크립트는 위에서 아래로 코드를 읽는다. - 하나의 expression은 하나의 줄에 있어야 한다. Create 생성하고 Initialize 초기화하고 Use 사용하면 된다. let a = 221; //← 생성 및 초기화 let b = a - 5; //← 사용 - let : 블록 유효 범위를 갖는 지역변수를 선언한다. 선언과 동시에 임의의 값으로 초기화 할 수 있다. (출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statement..

JavaScript 2020.06.02

[HTML] void-element

참고 - https://www.w3.org/TR/2011/WD-html-markup-20110405/syntax.html 1. void element 어떤 상황에도 contents를 가지지 않는 요소. start tag는 써주지만 /로 닫아주는 end tag를 따로 쓰지 않는다. 대신 start tag의 맨 끝에 /를 쓰고 >로 닫아준다 (이것을 self-closing이라고 한다. slash를 이용하여 start tag를 닫아주는 것). 1). void element에 속하는 태그 더보기 area base br col command embed hr img input keygen link meta param source track wbr

HTML 2020.06.01

[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - 기초 / 20.06.01

출처 : www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #1.1 Why JS? - Java Script 웹사이트를 interacting하게 만들 때 쓰이는 유일한 언어 이것으로 Momentum을 만들어 볼 것임 #1.2 Super Powers of JS - JavaScript로 만들 수 있는 것들 impact js JavaScript로 만든 game들이 있음 world draw 구글에서 만든 것 그것을 닮은 것을 3D로 만들어 준다. #1.3 ES5, ES6 ES...WTF!?!?! - ECMAScrip JavaScript의 specification(설명문) 같은 것. 브라우저는 이러한 specification을 받..

JavaScript 2020.06.01

[JavaScript] Object Model (객체화)

출처 : 생활코딩, https://opentutorials.org/course/1375/6622 웹브라우저의 구성요소들은 모두 객체화되어있다. 자바스크립트로 이 객체들을 제어해서 웹브라우저의 요소를 제어할 수 있다. Object Model은 크게 BOM과 DOM로 구성된다. 1. Object Model window - 전역개체 - 모든 속성 앞에 부모 객체를 입력하지 않으면 자동으로 window전역객체에 속한 객체로 인식된다. 1). DOM (Document Object Model) window속성중에서도 문서(document)를 제어하는 중요한 객체이다. window.document로 접근할 수 있다. 2). BOM (Browser Object Model) 브라우저를 제어하는 객체를 의미한다. 3). ..

JavaScript 2020.05.31

[CSS] Pseudo Selectors (가상 선택자) - 가상 클래스 (pseudo class), 가상 요소 (pseudo element)

Pseudo Selectors (가상 선택자) 태그 이름이나 class, id를 쓰지 않고 선택자를 쓰는 법. 가상 클래스와 가상 요소로 나뉜다. ex). 가상선택자 first-child 사용하기 animal li:first-child ① animal이라는 부모 안에 있는 ② 첫번째 자식요소인 ③ li에 대한 속성 첫번째 자식요소가 li가 아니라면 써먹을 수 없는 가상 선택자다. 가상 클래스 (pseudo class) 가상 요소 (pseudo element) 문법 선택자:가상클래스명 선택자::가상요소명 쓰임 요소의 특정 상태에 대한 스타일을 설정할 때 쓴다. 선택한 요소의 일부분만 스타일을 다르게 할 때 쓴다. 종류 :active :any-link :blank :checked :current :defau..

CSS 2020.05.20

[CSS] position

참고 - https://opentutorials.org/course/2418/13414 - https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1 - position : eliment(tag)가 화면의 어디에 위치하는지를 알려주는 속성 - offset :부모 박스의 좌측 상단으로부터 자식까지의 x, y 거리 - bottom vs top : 두 값이 동시에 있을 때 순서 상관없이 top 값만 씀. - left vs right : 두 값이 동시에 있을 때 순서 상관없이 left 값만 씀. 1. position: static position의 기본값, offset 값은 설정할 수 없으며 다른 태그와 상호작용하여 원래 위치해야 하는 곳에 있게 됨. positio..

CSS 2020.05.19

[CSS] Box Model의 축약 표현

참고 - http://tcpschool.com/css/css_boxmodel_margins content, padding, border, margin을 box model이라고 한다. margin, padding을 한꺼번에 쓰고 싶을 때 축약해서 쓸 수 있다. top, right, bottom, left (시계방향)순으로 값을 쓰면 된다. 헷갈리는 것만 margin을 예로 들어 아래에 정리해보자. ​ {margin: ↕ ↔;} = {margin-top, margin-bottom: ↕ ; margin-right, margin-left: ↔;} ​ {margin: ↑ ↔ ↓;} = {margin-top: ↑; margin-right: ↔; margin-bottom: ↓; margin-left: ↔;} ​

CSS 2020.05.18

[HTML] HTML 기초

사람이 코드=소스를 작성하면 웹페이지가 만들어진다.웹페이지 여러 개가 모이면 그것을 웹사이트라고 하고기능이 많으면 웹애플리케이션이라고 한다. 1. HTML 1). 정의HyperText하이퍼 텍스트(하이퍼링크를 주로 텍스트에 걸기 때문에 hyper text라고 함)를 가장 중요한 특징으로 하는Markup마크업(태그를 이용하여 데이터를 구조화하는 것)이라는 문법형식을 가진Language언어 다른 사람들과 약속을 하였기 때문에 언어로 소통이 가능하다. *HTML5W3C에서 만들고 있는 웹 표준으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등모든 웹브라우저 벤더가 참여하고 있는 산업 표준 2). 웹표준 HTML 5 + CSS 3.0을 지켜야 하는 이유웹접근성, 상호호환성이 좋아지기 때문이다. 웹접근성 (..

HTML 2020.05.18