게으른 나에게

12.1 문서 객체 모델 이해하기HTML 문법으로 작성한 태그, 속성, 주석, 텍스트와 같은 구성 요소들은 모두 웹 브라우저에서 각각 하나의 객체로 인식. 1.1 DOM(DOM, Document Object Model)문서 객체 모델(DOM): HTML 구성 요소들을 다루는 객체. 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조. 1.2 문서 객체 모델이 생성되는 방식문서 객체 모델은 웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성됨. 생성한 문서 객체 모델을 웹 브라우저에 표시. 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 됨. 문서 객체 모델은 나무를 뒤집어 놓은 형태의 자료구조인 트리(tree..

11.1 자바스크립트 객체 다루기!! 기본 자료형을 제외한 거의 모든 것이 객체로 구성됐다고 해도 과언이 아닐 정도로 객체는 자바스크립트에서 정말 중요 !!1. 객체자료형의 관점: 키와 값으로 구성된 속성들의 집합.객체는 자바스크립트에서 제공하는 기본 자료형과는 다르게 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음.const person = {};리터럴 방식: {}속성이 하나도 없는 빈 객체.const person = {"Hong Gildong"};보통 객체를 생성할 때는 빈 객체로 생성하지 않고 처음부터 속성을 지정한 상태로 생성.const person = { name:["Hong", "Gildong"], age:20, isAdult:true};객체는 데이터의 종류를 가리지 않..

10.1 함수1. 함수떤 목적을 가지고 작성한 코드를 모아 둔 블록문.블록문을 function 키워드, 식별자, 소괄호와 함께 묶으면 함수가 생성되는데, 이를 함수를 정의함.function 식별자() { } 10.2 함수를 정의하는 방법2. 함수 정의함수를 정의하는 방법 3가지 ① 함수 선언문: function 키워드로 함수를 정의.function 키워드 다음에 함수를 식별할 수 있도록 식별자를 붙이면 됨. 이때 식별자 뒤에는 소괄호(()). 식별자의 명명 규칙은 변수명을 생성할 때와 같음.function 식별자() { } 함수를 정의하고 나면 함수의 식별자(함수명)와 소괄호를 열었다가 닫아주는 형식으로 함수를 실행할 수 있음.함수명();※ 식별자가 어떤 용도로 사용되는지에 따라서 다른 명칭 불림. 변수..

9.1 변수와 상수1-1 변수데이터를 저장할 수 있는 공간. -변수: 변할 수 있는 데이터를 저장하는 공간 -상수 변수: 재할당 할 수 없는 데이터를 저장하는 공간  -키워드(=예약어): 자바스크립트 프로그래밍   어떤 역할이나 기능이 정해진 특별한 단어. -식별자: 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름을 의미. var, let, const 등의 키워드와 함께 사용하면 식별자라는 용어보다는 변수명이라고 함. 키워드는 식별자로 사용할 수 없음. -연산자: 이름 그대로 어떠한 연산 작업을 하는 데 사용하는 기호.  -표현식: 표현식을 실행해 하나의 값을 만드는 과정되어 하나의 값을 반환하는 식 또는 코드를 의미. -값: 더 이상 평가할 수 없는 데이터를 의미.  -세미콜론: 자바스크립트에서 ..

8.1 자바스크립트 코드 작성 방법 1. 자바스크립트 코드 작성 방법  ① 자바스크립트를 웹 브라우저에 적용하는 방법은 크게 2가지  -내부 스크립트 방법(internal script): HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법   -외부 스크립트 방법(external script): 별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성하고 이 파일을 HTML 문서에 script     태그로 연결하는 방법document.write("외부 스크립트 방법");  -script 태그의 사용 위치: script 태그는 웹 브라우저에 화면이 표시되는 것에 영향을 미치지 않도록 body 태그가 끝나기 전에 사용.   ② 자바스크립트를 단순히 실..

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기1. 플렉스 박스 레이아웃플렉스 박스 레이아웃은 1차원 레이아웃 설계를 위해 CSS3에서 추가된 개념. 플렉스 박스 레이아웃의 구성 요소는 다음과 같음.※ 레이아웃 확인 방법: 웹 브라우저에서 지원하는 방법으로 플렉스 박스 레이아웃 확인 가능. 크롬 브라우저에서는 개발자 도구 사용.구성요소설명주축(main axis)플렉스 박스의 빈행 방향과 수평한 축교차축(cross axis)주축과 수직하는 축플렉스 컨테이너(flex container)display 속성 값으로 flex나 inline-flex가 적용된 요소플렉스 아이템(flex item)플렉스 컨테이너와 자식 관계를 이루는 태그 요소 2. 플렉스 박스 레이아웃 기본 속성속성 설명displayflex..

09-1 배경색과 배경범위 지정하기배경 이미지 관련 속성속성설명background-color배경색 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경에 이미지 삽입background-repeat배경 이미지의 반복 여부 지정background-position배경 이미지의 위치 지정background-origin배경 이미지를 배치할 기준 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절 선형 그러데이션 관련 속성종류설명방향끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어 최대 2개 까지 사용할 수 있음. 사용할 수 있는 예..

6.1 CSS의 특징 살펴보기1. CSS 특징 1) 기본 스타일 시트는 웹 브라우저에 기본으로 내장된 스타일 시트를 말함. 2) 적용 우선순위는 같은 태그에 스타일 속성이 중복으로 작성 됐을 때, 어느 속성을 적용할지 결정하는 기준. 적용 우선순위는 개별성 규칙의 점수에 따라 계산 됨.선택자예점수전체 선택자*0태그 선택자div, p, h11가상 요소 선택자::before, ::after1클래스 선택자.box, .title10가상 클래스 선택자:hover, :visited, :link10아이디 선택자#title, #main100인라인 선택자style="color:red"1000 3) 상속은 부모 요소의 속성을 자식 요소가 물려받는 것을 말함. 4) CSS에는 절대단위: Px / 상대단위: em, rem, ..

5.1 기본 선택자 사용하기1. 선택자선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원 2. 기본 선택자 1) 전체 선택자: 모든 태그를 선택자로 지정.* { /* CSS 코드 */ }  2) 태그 선택자: 태그명으로 선택자를 지정.태그명 { /* CSS 코드 */ }  3) 아이디 선택자: id 속성값으로 선택자를 지정#id속성값 { /* CSS 코드 */ }※ id 속성값은 HTML문서 안에서 고유한 값이어야 함.  4) 클래스 선택자: clss 속성값으로 선택자를 지정.class속성값 { /* CSS 코드 */ }  5) 기본 속성 선택자: HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정[속성] { /* CSS 코드 */ }[속성=값] { /* CS..

4.1 CSS 문법 살펴보기1. CSS 기본 문법 CSS의 기본으로 선택자와 선언부로 구성된 문법 형태를 가짐.h1(선택자) {color(속성): red(값);} -선택자: CSS 속성을 적용할 대상(태그, 요소)을 지정하는 영역. -선언부: 선택자로 지정된 대상(태그, 요소)에 적용할 CSS 속성과 값을 적는 영역입니다. 2. 주석주석은 코드에 설명을 남기는 것을 말함. CSS에서 주석 내용은 /*와 */ 사이에 작성할 수 있음./* 주석 내용 */ 4.2 CSS 적용하기3. CSS 적용 방법CSS를 HTML 문서에 적용하는 방법은 3가지 -내부 스타일 시트 방법: HTML 문서 내부에 style 태그로 CSS 코드를 작성해 적용하는 방법. -외부 스타일 시트 방법: 별도의 CSS파일을 만들어 HTM..