코딩자율학습html+css+자바스크립트

1. 문서 객체 모델 이해문서 객체 모델 생성되는 방식/ 노드 타입 살펴보기 웹 브라우저: 문서 객체 모델(DOM) 생성할 수 있음문서 객체 모델: 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조생성한 문서 객체 모델 ~> HTML 문서의 구성 요소를 객체로 인식문서 객체 모델이 생성되는 방식문서 객체 모델: 웹 브라우저) HTML 문서 해석 -> 객체로 변환 -> 웹 브라우저에 표시=> 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 됨DOM 트리: 트리(tree) 구조 가짐노드(node): document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등 트리 형태로 구성-> 부모, 자식, 형제 관계 형성루트 노드(root node): DO..

1. 객체데이터를 저장하고 처리하는 기본 단위키(key)와 값(value)으로 구성된 속성의 집합키: 공백 들어갈 경우 따옴표 사용여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음또 다른 객체 or 함수 들어갈 수 있음메서드(method): 객체에 정의된 함수ex. 배열, 숫자, 논리 데이터-> 한 객체의 속성으로 추가 const person = { name: ["Hong", "Gildong"], age: 20, isAdult = true printInfo: function() { console.log('printInfo'); }};{} 이용해 생성 => 리터럴(literal) 방식으로 객체 생성빈 객체: 속성 한 개도 없는 객체const person = {}..

1. 함수(function)어떤 목적을 가지고 작성한 코드를 모아 둔 블록문함수 실행(호출) -> 함수 내부에 모아 둔 여러 줄 코드 한 번에 실행 => 재사용 편함함수를 정의한다: 블록문을 function 키워드, 식별자, 소괄호와 함께 묶으면 함수 생성2. 정의하는 방법선언문/ 표현식/ 화살표 함수함수 선언문(function declaration statement)function 키워드로 함수 정의하는 방법function 식별자(){}=> function 키워드 다음에 오는 식별자로 함수 호출식별자 -> 사용 용도에 따라 명칭 달라짐ex. 변수명: 변수에 붙는 식별자/ 함수명: 함수에 붙는 식별자function gugudan(){ for(let i = 1; i 함수 표현식(function expr..

8장 자바스크립트로 웹 동작 구현하기1. 자바스크립트 코드 작성 방법HTML 파일과 자바스크립트 연결내부 스크립트(internal script)HTML 문서 안에서  script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법// index.html  외부 스크립트 방법(external script)별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성js 파일을 HTML 문서에서 script 태그로 연결하는 방법// script.jsdocument.write("외부 스크립트 방법");// index.html 2. 프로그래밍 시작 전 알아 두기주석한 줄 주석: // 기호(슬래시 2개)여러 줄 주석: /* 기호 */ 기호 사이에 작성// 한 줄 주석/* 여러 줄 주석*/오류 확인 방법프로그래..

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기플렉스 박스 레이아웃/ 기본/ 정렬 속성플렉스 박스 레이아웃(flex box layout) == 플렉서블 박스 레이아웃(flexible box layout)1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일1차원 방식: 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식 => 다양한 상황에서 유연하게 레이아웃을 구현할 수 있도록 다양한 속성 제공주축(main axis): 진행 방향과 수평한 축교차축(cross axis): 주축과 수직한 축플렉스 컨테이너(flex container): display 속성값으로 flex나 inline-flex가 적용된 요소플렉스 아이템(flex item): 플렉스 컨테이넌와 자식 관계를 이루는 태그 ..

1. CSS의 특징 살펴보기기본 스타일 시트/ 적용 우선순위와 개별성/ 상속/ 단위/ 색상 표기법 기본 스타일 시트웹 브라우저에 기본으로 내장웹 브라우저에 표시되는 요소의 글꼴, 크기, 색상, 굵기, 문단 설정 등적용 우선순위와 개별성단계적 적용: 같은 태그에 여러 스타일 적용되도 단계적으로 적용 돼 마지막에 하나만 적용-> CSS의 개별성 규칙에 따라 결정기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용같은 태그 요소의 선택자 여러 개 -> 한 속성만 적용선택자예점수전체 선택자*0태그 선택자div, p, h11가상 요소 선택자::before, ::after1클래스 선택자.box, .title10가상 클래스 선택자:hover, :visited, :link10아이디 선택자#title, #mai..