혜원정대

1. 웹과 DOM자바스크립트는 DOM을 통해 웹 페이지의 요소에 접근할 수 있다. DOM이란 Document Object Model의 약자로, 직역하면 문서 객체 모델이라고 할 수 있다. DOM은 HTML로 작성된 여러 요소들에 자바스크립트가 접근하고 조작할 수 있도록 브라우저가 변환시킨 객체이다. 웹 브라우저는 HTML 문서를 불러온 다음 이렇게 요소들 간의 상하 관계를 한 눈에 볼 수 있도록 트리 구조로 나타냅니다. 그리고, 이를 DOM 트리라고 부릅니다. DOM은 자바스크립트가 자신에게 접근해서 조작할 수 있는 방법을 제공합니다. DOM이 제공하는 방법을 활용해 웹 요소를 조작하기 위해서는 DOM 트리의 구조에 대해 잘 알고 있어야한다. 2. DOM API - 1만약 조작할 요소가 다음과 같다면,..

1. 비동기 처리우선 동기란, 하나의 작업이 실행되는 동안은 다른 작업을 수행하지 않는 방식으로, 다시 말해 하나의 작업이 완료될 때까지 다른 작업을 실행하지 않고, 앞에 진행하고 있는 작업이 종료된 다음 작업을 할 수 있는 순차적인 방식을 말한다. 반대로 자바스크립트에서 비동기(Asynchronous)쉽게 말해서 기다리지 않고 다음 일을 하는 것이다. 자바스크립트는 원래 한 번에 하나씩 처리하는 싱글 스레드 언어이다. 때문에 한 번에 하나의 작업만 수행할 수 있지만 비동기 처리(Asynchronous Processing)를 통해 마치 동시에 여러 작업을 수행하는 것처럼 보이게 만들어 사용자 경험을 부드럽게 유지할 수 있다. 1.1 setTimeout()자바스크립트에서 작업을 비동기로 처리하는 방법에는 ..

1. 호이스팅저번 글에서 말했던 것처럼 호이스팅에 대해 설명해보도록 하겠다. 호이스팅은 자바스크립트에서 변수와 함수 선언이 해당 범위의 맨 위로 끌어올려지는 듯한 현상으로, 종류로는 변수 호이스팅과 함수 호이스팅이 있다. connectStrings('study', 'hoisting');function connectStrings(str1, str2) { console.log(str1 + str2);} 이렇게 일반적인 방식과는 다르게, 함수가 선언되기 전에 미리 함수를 출력하는 코드를 짜보았다. 하지만 실행해보면 오류가 나지 않고 정상적으로 작동함을 알 수 있다. 이렇게 함수의 선언문을 가장 위쪽으로, 즉 함수가 가지고 있는 스코프의 가장 위쪽으로 끌어올려서 코드를 해석하는 자바스크립트의 작동 방식을 함수..

자바스크립트는 자바스크립트 엔진이 있는 모든 곳에서 동작한다. 자바스크립트 엔진은, 쉽게 말해 자바스크립트 코드를 실행하는 프로그램으로, 우리가 일반적으로 사용하는 웹 브라우저인 사파리, 파이어폭스, 크롬, 엣지, 오페라 등에 포함되어 있다. 이러한 자바스크립트 엔진은 웹 브라우저에 포함되어 있으며, 이런 웹 브라우저를 자바스크립트의 실행 환경 혹은 런타임이라고 부른다. index.html 파일은 브라우저가 웹이나 애플리케이션을 로드할 때 가장 먼저 찾는 파일이기 때문에, src 폴더보다는 보통 프로젝트의 루트 디렉터리(최상위 폴더)에 생성한다. 다음과 같이 폴더 구조를 만든다. hello world! → index.html console.log("star..

HTML에 대해 저번에 배웠으니 이젠 CSS에 대해 알아보도록 하겠다. CSS(Cascading Style Sheets)는 웹사이트의 외관을 장식할 때 사용한다. 1. CSS 적용 방법가장 기본적인 방법부터 소개하겠다. 1.1 CSS 파일을 읽어 들여 적용하기".css"라는 확장자의 파일을 만든 후에 이를 HTML 파일에서 읽어 들여 적용하는 방법으로 CSS를 적용하는 방법이 있다. 이는 하나의 CSS 파일을 여러 HTML 파일에서 읽어 들여서 한 번에 관리할 수 있다. 수정이 필요한 경우에도 CSS 파일 하나만 수정하면 되므로 굉장히 편리하다. HTML 파일의 프론트 프론트 공부를 하자! 1.2 HTML 파일의 프론트 프론트 공부를 하자! 1.3 HTML 태그 내부에 sty..

여기 있는 내용이 대체로 HTML의 큰 틀의 전부이다.VSC와 함께 실습하는 것을 권고한다.1.HTML(Hyper Text Markup Language) HTML은 "태그"라고 부르는 특수한 문자열로 감싸서 웹페이지를 만들 때 사용하는 언어여기서 태그는 를 이용해 감싸 만든다.예를들면 , 등이 있다. 각 태그의 의미는 나중에 알아보고 이런게 있다는 정도만 알아두자.doctype html>html lang="ko">    head>            meta charset="UTF-8">            title>고양이의 일상title>            meta name="description" content="고양이가 좋아하는 것과 일상을 소개합니다.">    head>    body>    ..