video 태그의 disablePictureInPicture과 playsinline- 웹 페이지에 배경으로 들어가는 영상을 넣었는데, 2개의 이슈가 발생했다. 1. disablePictureInPicturedisablePictureInPicture 속성을 video 태그에 사용하면 PIP모드 버튼이 생기지 않는다. - 웹 페이지에 영상을 삽입하면 PIP(Picture-in-Picture)모드 버튼이 생김.- Edge에서 배경으로 들어가는 영상에 마우스를 호버하면 위처럼 PIP 모드 버튼이 생긴다.- 크롬과 웨일에서는 나오지 않는데, Edge에서만 발생함.- disablePictureInPicture 속성을 video 태그에 사용하면 Edge 브라우저에서 위처럼 마우스를 호버해도 PIP모드 버튼이 생기지 ..

# 캐노니컬 태그 (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 노..

# CSS 변수- 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. ## 표기법 및 사용법사용 : 변수 맨 앞에 -- 를 붙여준다.호출 :  var() 함수를 사용해 접근한다./* 변수 선언 및 할당 */:root { --color-main: black; /* :root 의사 클래스에 선언하면 CSS 전역으로 선언됨. */}/* 변수 사용 */.box { color: var(--color-main);}HTML 문서의 루트 요소는 요소이므로 :root 와 html 은 같음.CSS 변수도 지역 변수 스코프가 가능하다./* 지역 변수 선언 및 사용 */div { --color-main: pink; /* CSS 지역 변수 선언 ..

# javascript로 요소에 적용된 css 스타일 가져오기 javascript로 css 스타일을 가져오는 방법은 2가지가 있습니다. 인라인으로 적용된 스타일 가져오기 최종적으로 계산된 모든 스타일 가져오기 ## 인라인 스타일 가져오기 인라인 스타일은 html 요소에 적용한 스타일입니다. Red hot chili pepper! 인라인 스타일을 가져오려면 style 속성을 사용합니다. const element = document.querySelector('.element') const fontSize = element.style.fontSize console.log(fontSize) // 2em const color = element.style.color console.log(color) // red #..