# 캐노니컬 태그 (Canonical tag)Canonical 태그는 웹 개발 및 SEO(Search Engine Optimization)에서 중요한 역할을 하는 HTML 요소입니다.사이트 내 URL 주소는 다르지만 동일한 내용의 중복된 페이지가 있을 때 페이지에 코드를 삽입하여 검색엔진에 대표가 되는 URL 주소를 알려주는 역할을 하는 태그입니다.Canonical 태그를 사용하면 이러한 페이지들을 하나의 주 URL로 통합하여 SEO 점수를 집중시킬 수 있습니다.실제로 구글에서는 별도의 섹션으로 가이드를 제공하고 있을 정도로 구글에서도 중요하게 생각하는 태그입니다. ## 필요 이유https://www.mysite.com/shophttps://www.mysite.com/shop?ct=1https://www..

# form 객체 내부 요소에 접근하기- 폼(form)은 document의 직계 객체로 설계되어 있습니다. document.body 처럼..- 차이점은 form은 문서 내에 폼이 여러 개가 있을 수 있으므로 document.forms 유사배열(HTMLCollection)로 반환합니다.- 그래서 document.'formname'으로 문서 안의 form을 가져온 후, 이어서 폼 내부의 요소들을 name으로 접근할 수 있습니다. ## 접근 방법 1. 점 표기법(Dot notation)document.formName.elementName- form 속성에 정의된 name 값이 form 요소의 객체명이 되기 때문에 점 표기법으로 접근할 수 있습니다.  ## 접근 방법 2. 괄호 표기법(Brac..

# html 문서 로드와 이벤트## 주요 이벤트HTML 문서의 생명주기에는 3가지의 주요 이벤트가 있습니다.DOMContentLoadeloadbeforeunload / unload## 각각의 이벤트 설명DOMContentLoaded : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다.load : HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.beforeunload / unload : 사용자가 페이지를 떠날 때 발생합니다.## 각각의 이벤트 활용DOMContentLoaded : DOM이 준비된 것을 확인한 후 원하는 DOM 노..

JavaScript - 함수 (복습) 목차 선언과 표현 그리고 호이스팅 매개변수 패턴 화살표 함수 즉시실행함수(IIFE) 콜백 재귀 호출 스케줄링 # 선언과 표현 그리고 호이스팅 함수 선언문과 함수 표현식의 차이 function 키워드로 시작하는지? const 나 let으로 선언된 변수에 할당 연산자를 통해서 함수가 들어가는지의 차이. // 함수(Function) // 함수 선언문 (Declaration) function hello() {} // 함수 표현식 (Expression) const hello = function() {} ## 호이스팅 함수 선언에서는 호이스팅이라는 현상이 발생합니다. 함수가 선언되어져 있는 코드를 선언된 부분 안(유효한 범위 안)에서 제일 위로 끌어 올려서 동작하는 개념입니다...

목차 - this - 예시 - 일반 함수안에서 this 호출 - 화살표 함수안에서 this 호출 - call() - 예시 2 # this 일반함수와 화살표 함수에서 각각 다른 방식으로 해석이 됩니다. 일반 함수의 this는 호출 위치에서 정의. 화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의. 렉시컬(Lexical)이란 함수가 동작할 수 있는 유효한 범위를 의미합니다. ## 예시 ### 일반 함수안에서 this 호출 this 키워드를 사용. // 일반 함수의 this는 호출 위치에서 정의. const user = { firstName: 'first', lastName: 'last', age: 85, getFullName: function () { this.firstName; this...

# DOM(Document Object Model) HTML문서를 객체로 표현한 것 입니다. 그래서 JS에서 HTML을 제어할 수 있게 해줍니다. DOM API 사용 예 const element = document.querySelector('h1'); console.log(element.textContent); ## DOM vs Element 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소(Element) : HTML 요소를 의미 요소(Element)는 노드(Node)의 하위 개념 ### 예시 코드 1 (childNodes와 children) index.html 1 텍스트1 2 텍스트2 main.js // Node vs Element // - 노드(Node) : HTML 요소,..