Web Components : Custom Elementshtml 에서도 react 나 vue 처럼 컴포넌트 단위로 작업을 할 수 있는지 궁금하여 검색해보다가 Custom Elements 에 대해서 알게 되었다.문서에는 Custom Elements에 대해 아래와 같이 설명이 되어 있다.웹 컴포넌트 표준의 주요 기능 중 하나는 사용자 정의 페이지 기능을 제공하는 길고 중첩된 요소들의 묶음으로 만족하는 것보다는, HTML 페이지에서 기능을 캡슐화하는 사용자 정의 요소를 생성하는 능력입니다. Custom Elements 작성크게 두 파트로 나뉜다. 1. 커스텀 요소를 구현. 하고 2. 커스텀 요소를 정의(등록) 한다. 1. 구현class 클래스이름 extends HTMLParagraphElement 2. 정의..

# 기본 유효성 체크의 사용자 정의 유효성setCustomValidity() 와 reportValidity() 제목을 많이 고민하다가 지었는데 맞는 제목인지 모르겠지만, 기본 제공 유효성 체크의 커스텀에 대한 내용이다. html에서 기본 제공하는 유효성 체크의 ui는 많이 보았지만, 실제로 이것을 이용해서 유효성 체크를 해보거나 공부한 적은 없었다.사용 방법은 잘 알고 있다시피 input 태그에 속성으로 required(필수) 나 type(입력값 종류), pattern(패턴), min, max ... 등을 이용해서 해당 input의 유효값을 정의하고, form 태그 안 에서 submit을 발생시키면 그 시점에 전송되기 전에 자동으로 위처럼 유효성 체크를 수행하게 된다. html 기본 유효성 체크를 이용해..

# 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 #..

참고 https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 https://www.next-t.co.kr/blog/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-SEO-%ED%85%8C%ED%81%AC%EB%8B%88%EC%BB%ACSEO-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-OpenGraph-..