## DOM (Document Object Model) -웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다. -해석한 HTML 코드를 화면을 통해 보여주는 과정을 렌더링이라고 한다. #HTML, CSS 작업 → 렌더링 → DOM → DOM 렌더링 → 웹브라우저 # DOM의 목적 -HTML에서 작성한 태그들을 하나의 객체(메모리에 등록해서 사용할 수 있게 만들어주는 것)로 만들어주는 작업 -문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다 -DOM은 자바스크립트를 사용해서 웹 컨텐츠를 추가, 수정, 삭제하..

##연산식 -연산이란 "식이 나타내는 일정한 규칙에 따라 계산"을 뜻한다. -사용자는 자바 스크립트를 통해 연산을 처리하는 식을 만들 수 있고 여기에 사용하는 기호를 연산자라고 한다. # 산술 연산 # +, -, *, /, %를 사용한 계산을 의미한다. # 두 개의 피 연산자를 받아서 하나의 숫자 데이터를 결과로 반환한다. # + : 더하기 : 2 + 2 = 4 # - : 빼기 : 4 - 2 = 2 # * : 곱하기 : 4 * 2 = 8 # / : 나누기 : 10 / 5 = 2 # % : 나머지 : 17 % 5 = 2 # 연산자 우선순위 -여러개의 연산자가 함께 사용되는 경우 연산자 우선순위가 반영되어 우선순위가 높은것부터 계산된다. # 대입 연산 , 복합 대입 연산 -대입연산은 오른쪽의 피연산자를 데이..

한 줄 정리 -``를 문장 처음과 끝에 사용해주면 준간에 ${} 플레이스 홀더를 사용해서 문구 추가가 가능하다. -let template = "좋아요" -let youtube = `구독과 ${template}는 사랑입니다.` ## 템플릿 리터럴 (문장 부분에 단어 추가) -기존의 문자열은 따옴표를 사용했지만 템플릿 리터럴은 백틱을 사용한다. -템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현 방식이다. (문자열 내용에 데이터를 삽입할 수 있다.) -템플릿 리터럴로 표현한 문자열에 플레이스홀더( ${ } )를 사용하여 새로운 데이터를 삽입할 수 있다. -플레이스홀더( ${ } )안에 문자열을 입력하면 해당 문자열은 템플릿 리터럴 문자에 적용된다. -일반적인 코드 사용 let str = '홑 따옴표를 사..

## 객체 (Object) -객체의 사전적 의미 : 실세계에 존재하는 대상 또는 생각할 수 있는 개념 (스마트폰 , 화분등) -자바 스크립트에게 객체란? : 어떤 사물이나 개념을 소프트웨어적으로 표현하기위해 사용하는 문법적 수단 자바 스크립트 코드 내에서 객체란 "값 또는 기능을 가지고 있는 데이터"이다. -값, 속성, 동작(메서드 method)이 필요하다. -method 메서드 : 객체가 필요하다, 함수 : 객체없이 호출해서 사용 -현실세계에 있는 것을 프로그램에서는 객체로 만들 수 있다. -웹브라우저도 하나의 객체이다. : 웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다. 그리고 자바 스크립트는 웹브라우저라는 객체에 명령을 내리기위해 사용하는 언어이다. 사용자가 웨브라우저에게 명령을 내릴 ..

## 자바스크립트란 -자바 스크립트는 프로그래밍 언어중 하나이다. -자바 스크립트는 서버개발, 어플리케이션 개발등 다양한 목적을 위해 사용할 수 있는 언어이지만 주된 활동 분야는 웹 개발에서 가장 많이 사용한다. (인터넷을 통해 서비스되는 웹 사이트 개발) -웹사이트 개발에서 자바 스크립트의 역할은 웹브라우저가 가진 기능을 실행시키거나 HTML/CSS를 통해서 랜더링된 화면을 조작할 수 있다. 즉 자바 스크립트는 웹브라우저를 조작함으로써 역할을 수행 한다. ## 자바 스크립트 사용법 -자바 스크립트를 사용하는 방법은 크게 2가지를 사용 할 수 있다. 1) HTML문서 내부에 작성하는 방법 2) 자바 스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML문서에 연결하는 방법 (자바 스크립트의 파일 확장자..

content 속에 든 것들, 내용물 relative 비교상의, 상대적인 static 고정된 absolute 완전한 sticky 끈적거리는 justify 행의 끝을 나란히 맞추다 reverse 뒤바꾸다 agument 인자 parameter 매개변수 function 함수 maximum 최대 minimum 최소 average 평균 type 유형, 종류 Social Security Number 주민번호 ssn

## CSS선택자2 -선택자 : 어떤 요소에 스타일을 적용할것인가에 대한 정보이다. 선택자{ 속성명: 속성값; } -기본 선택자 -그룹 선택자 -특성(속성) 선택자 -결합 선택자 -의사 클래스 -기본 요소 ----------------------------------------------------------------------------------------------------------------------------------------------------------------- # 특성(속성) 선택자 -특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택할 수 있다. -html태그에 클래스라는 속성이 어떤 값을 갖고 있더라도 클래스가 존재하기만 하면 선택된다. -..

한 줄 정리 float : 문서의 일반적인 흐름에서 제외 none (기본값), left, right clear: float 요소의 영향을 받지 않도록 해줌 none (기본값), left, right, both position : 문서상에 요소를 배치하는 방법을 정의 top, bottom, right, left static : 기본값 relative : 브라우저 기준으로 움직인다 absolute : 최근에 만든 객체를 기준으로 움직인다 fixed : 쇼핑몰에서 자주 볼 수 있는데 스크롤바를 내려도 고정이 된다 sticky : 지정한 위치에서 고정되게 하는 것 top, bottom flexbox : 여러 객체를 그룹으로 묶어 한번에 움직이게 하는 것 display: flex;로 사용 (기본 주축인 가로방향,..

한 줄 정리 # background-color : 배경의 색을 정의 # background-image : 배경의 이미지를 정의 # background-position : 배경의 초기 위치를 정의 # background-size : 배경의 이미지 크기를 정의 # background-repeat : 배경 이미지의 반복을 정의 ##CSS 요소의 배경 설정(background) -요소의 배경화면을 정의한다. -배경의 색상, 이미지, 반복등의 다양한 하위속성을 정의할 수 있다. -필수요소는 아니므로 필요한 경우에만 사용하면된다. # background-color : 배경의 색을 정의 # background-image : 배경의 이미지를 정의 -url()은 함수인데, 함수란 자주 이용하는 코드를 만들어 놓고 호출해..