공부기록용

※렌더링의 세부 과정 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이 문서(객체)를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM의 존재 목적 DOM은 Javascript를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑, 등 이벤트에 대한 처리를 정의할 수 있도록 제공하는 프로그래밍 인터페이스(interface)이다. 자바스크립트가 웹문서에 대한 어떤 동작을 구현하고나면 자바스크립트 파일이 아닌 돔에 그 결과들이 반영되고 그 내용을 토대로 웹브라우저 화면이 다시 렌더링되는 흐름이 나타난다. 사용자와 실질적으로 동적인 상호작용을 해준다. doucument 브라우저 객체 window의 ..

🔴의사클래스(가상클래스) 🔻hover : 마우스 포인터가 요소에 올라가 있음 🔻active : 사용자가 요소를 활성화했다(마우스로 누르기 같은) 🔻focus : 요소가 포커스를 받고 있음 🔻disabled : 비활성 상태의 요소 🔻nth-child() : 형제 사이에서의 순서에 따라 요소를 선택 🔴의사요소 🔻after : 자식 요소의 맨앞에 의사 요소를 생성 및 추가 🔻before : 자식 요소의 맨뒤에 의사 요소를 생성 및 추가 🔻first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용 🔻first-letter : 블록 레벨 요소의 첫 번째 글자에 스타일을 적용 🔻marker : 목록 기호의 스타일을 적용 🔻placeholder : 입력 요소의 placeholder(자리표시자) 스타일을 적..

연산 연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다. 사용자는 Javascript 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 '연산자'라고 한다. 문자열 붙이기 + 를 사용하여 문자열을 이어 붙이기(문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다.) console.log('My' + ' car') // My car를 출력 console.log('1' + 2) // 12를 출력(2는 숫자인데 문자로 인식되서 12로 출력됨) 템플릿 리터럴(Template literals) 기존의 문자열은 따옴표를 이용해 표현했지만, 템플릿 리터럴은 백틱을 이용해 표현한다. // 기존의 문자열 const str = '작은 따옴표' const str = "큰 따옴표" // 백틱을 ..

변수(Variable) 변수란, '데이터에 붙이는 이름표'이다. 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용 할 수 있게 된다. (데이터를 기억하기 위해 사용하는 수단) let 변수이름 = 값/데이터; 변수가 생성되면, 변수(변수이름)를 지정된 데이터 대신 사용할 수 있다. ※데이터타입(숫자, 문자열, null, undefined, boolean) 변수를 이용하면 자바스크립트로 표현할 수 있는 모든 데이터를 기억할 수 있다. Javascript는 다양한 유형의 데이터를 표현 및 사용할 수 있다.(Javascript 코드로 표현할 수 있는 모든 데이터는 변수에 대입될 수 있다.) 숫자(number) 문자열(string) Javascript에서는 어떤 데이터를 사용하고 싶은..

Javascript란, 프로그래밍 언어이다. 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있다. 웹브라우저가 가진 기능을 실행시키거나, html, css를 통해 렌더링된 화면을 조작할 수 있다.(웹브라우저를 조작함으로써 역할을 수행한다.) html의 내부에 작성하곤 한다. 웹 콘텐츠에 Javascript 코드를 더해 주는 방법 HTML문서 내부에 (직접)작성하기 반가워요 아무 내용이나 채워보고 있어요 호랑이고양이살쾡이 ---> 작성하고 싶은 Javascript내용을 직접 넣기 태그 제일 하단에 를 위치시키기 Javascript 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기(Javascript 파일의 확장자는 .js ) 반가워요 아무 내용이나 채워보고 있어요 호랑이고양..

🔴박스모델 🔻요소의 여백 지정하기(padding & margin) 🔻박스크기(box-sizing) 🔻박스의 배경(background) 박스모델(Box-Model) 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라고 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등등)을 결정할 수 있다. 하나의 박스는 네 개의 영역으로 구성된다 콘텐츠 영역 : width, height 안쪽 여백 : padding 경계선(테두리) : border-width 바깥쪽 여백 : margin +블록요소는 4개의 영역을 모두 가질수 있지만, 인라인 요소는 콘텐츠 영역은 지정할 수 없다. 이를 해결하기 위해서는 display속성의 inline..