개발자
-
CSS - HTML에 CSS 적용시키기CSS/CSS 2020. 3. 2. 01:02
HTML에 CSS를 적용시키는 방법을 알아보자! HTML에 CSS를 적용시키는 방법은 3가지가 존재한다. Inline Style Sheet에 대해서 알아보자. Inline Style Sheet란? → HTML 태그에서 style 속성으로 CSS 코드를 넣어 적용시키는 방법이다. Hello world! 태그가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)을 이용해 사용한다. 단, 꾸미는데 한계가 있고, 재사용이 불가능하다는 단점이 있다. Internal Style Sheet에 대해 알아보자. Internal Style Sheet이란? → HTML 문서에서 로 CSS 코드를 넣는 방법이다. 이와 같은 코드를 HTML 문서 안에 넣으면, h1태그의 글자가 빨간색이 ..
-
[TIL] 2020-03-01Trainings/이전 TIL 기록 2020. 3. 1. 23:52
[노마드 코더] 바닐라 자바스크립트 #3.8 Image Background까지 수강 [배운 문법] event.target 이벤트가 발생시, 이벤트가 발생하는 해당 객체를 반환 filter() 배열 원소들을 반복하면서 조건(함수)에 true면 원소를 남기고 false면 없애버린다. 이것도 새로운 배열이 탄생한다. 배열 값들 중에 의미 없는 값들을 버릴 때 사용한다. 그냥 필터 건다고 생각면 편하다. parentNode() 부모 노드를 찾을 때는 parentNode 속성을 사용한다. 자식 노드는 여러 개일 수 있기 때문에 children이나 childNodes 같은 복수형 단어를 썼다면 부모는 항상 한 명이기 때문에 단수형 parentNode이다. new Image() 그림에 대한 정보를 알려주는 Image..
-
HTML - img태그HTML/HTML 2020. 2. 29. 23:19
오늘은 img 태그에 대해서 알아보자! 화면이 이미지를 표시할 때, 라는 태그를 쓴다. 그렇다면 img 태그는 무엇일까? → 화면이 이미지를 표시할 때, 라는 태그를 쓰며, 태그는 닫을 필요는 없다. 그리고 src라는 속성을 사용해서 img.jpg라는 파일 이름을 적는다. 그러면 웹 브라우저는 img태그를 보고 "아! 여기는 이미지가 오겠구나!"라고 인식한다. 그리고 src라는 것을 통해서 "아! 여기에는 이미지를 표시해주면 되겠구나!"라고 브라우저가 인식한다. 만약 이미지의 크기를 변경하고 싶다면, width 속성을 이용하고, 만약 높이를 지정하고 싶다면, height 속성을 이용한다. 여기서 높이만 지정하게 되었을 때, 이미지가 왜곡되는 현상이 없어진다. 그에 맞는 적절한 폭의 길이를 웹 브라우저가 ..
-
[TIL] 2020-02-28Trainings/이전 TIL 기록 2020. 2. 28. 23:29
[노마드 코더] DOM이란? → Document Object Model의 약자이며, BOM 중 하나이면서, 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법을 의미한다. BOM이란? → Browser Object Model 의미하며, 브라우저 객체 모델의 최상위 객체는 window라는 객체가 있고, DOM은 window 객체의 또 하나의 객체이기도 하다. 문서 노드(Document Node) 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다. 요소 노드(Element Node) 요소 노드는 HTML 요소를 표현한다. HTML 요소는..
-
자바스크립트 - 객체JavaScript/기본 2020. 2. 25. 22:30
오늘은 객체에 대해서 알아보자! 일단 배열과 객체는 비슷하면서도 다른 것을 알 수 있다. 지금까지 살펴본 배열은 값에 대한 식별자로 숫자를 사용했다. 데이터를 추가하면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다. 우리는 이 인텍스를 이용해서 값을 가져오게 되는 것이다. 만약, 인덱스로 숫자가 아닌 문자를 사용하고 싶다면? → 객체(dictionary)를 사용해야 한다. 그렇다면 객체는 어떻게 생성할까? var word = {'a': 10, 'b': 20, 'c': 30}; // 객체 생성 여기서 'a'는 key를 뜻하고, 10은 value를 뜻한다. 또 객체를 만드는 다른 방법이 있다. var word = {}; word['a'] = 10; word['b..
-
자바스크립트 - 배열JavaScript/기본 2020. 2. 25. 00:27
오늘은 배열에 대해서 정리해보자! 배열(array)이란? 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 그렇다면 배열은 어떻게 생성할까?? 변수 member에 회원정보를 담아보자. 대괄호([])는 배열을 만드는 기호다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다. var member = ['Kim', 'Lee', 'Lim'] 하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)이라고 부른다. 자 그럼 이 데이터를 꺼내오려면 어떻게 해야 할까? var member = ['Kim', 'Lee', 'Lim'] ale..
-
자바스크립트 - 함수JavaScript/기본 2020. 2. 24. 22:07
오늘은 함수에 대해서 알아보자! 함수란? function 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 그렇다면 함수의 정의와 호출을 어떻게 할까? 함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라온다. 소괄호에 인자하는 값이 차례로 들어오는데 이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수이다. 또, 인자는 생략할 수 있고, 함수를 호출했을 때 실행하게 될 부분이 중괄호 안쪽에 온다. function fun(){ // 함수 정의 i = 0; while(i < 10){ document.write(i); i += 1; } } fun(); // fun이라는 이름의 함수가 호출 함수는 입력과 출력을 어떻게 할까? 바로 return과 인자를 통해서 할 수 있다...
-
자바스크립트 - 반복문JavaScript/기본 2020. 2. 24. 17:15
들어가기에 앞서, 인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다. 반복문의 문법은 몇 가지가 존재한다. 그것은 바로, while문과 for문이다. while문에 대해서 알아보자. 형식은 아래와 같다. while (조건){ // 반복해서 실행할 코드 } while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true) 면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 단, 반복문에서 종료조건을 잘못 지정하면 무한반..