alpeca's world alpeca's world

1. HTML Doctype이란?Doctype(문서 유형 선언, Document Type Declaration)은 HTML 문서의 맨 처음에 위치하며, 브라우저가 해당 HTML 문서를 어떻게 해석할지 결정하는 역할을 합니다.✅ 간단히 말해?Doctype은 브라우저에게 문서의 HTML 버전을 알려주는 선언문입니다.HTML을 올바르게 렌더링하기 위해 필수적으로 사용됩니다.2. HTML Doctype 선언 방법HTML 문서를 작성할 때 가장 위에 아래와 같이 Doctype을 선언해야 합니다. 이것이 HTML5 Doctype! ✅ 은 HTML5 문서를 의미하며, 최신 표준을 따르겠다는 선언입니다.3. HTML Doctype의 역할✅ 1) 표준 모드(Standards Mode)와 호환 모드(Quirks Mo..

1. HTML 데이터 속성(data-*)이란?HTML5에서 도입된 데이터 속성(data-*)은 HTML 요소에 사용자 정의 데이터를 저장할 수 있도록 하는 기능입니다. 이를 통해 추가적인 정보를 HTML 내부에 담고, JavaScript에서 이를 쉽게 가져와 활용할 수 있습니다.✅ 예제: 특정 버튼에 data-id="1234" 값을 추가하면 JavaScript로 해당 값을 쉽게 읽어올 수 있음.📌 기본 문법Hello, User! 이제 JavaScript를 사용해 데이터를 가져올 수 있습니다.const div = document.querySelector("div");console.log(div.dataset.key); // "1234"console.log(div.dataset.user); // "john..

1. 시맨틱 마크업(Semantic Markup)이란?시맨틱 마크업(Semantic Markup)이란 HTML 요소를 의미에 맞게 사용하여 웹 페이지의 구조를 명확하게 만드는 것을 의미합니다. 즉, 단순한 디자인 요소가 아니라 콘텐츠의 의미를 표현하는 태그를 활용하는 마크업 방식입니다.✅ 예를 들어, 요소를 무분별하게 사용하는 대신, 제목에는 , 본문에는 , 내비게이션에는 , 기사에는 같은 태그를 사용하여 문서의 의미를 명확히 하는 것입니다.2. 시맨틱 마크업이 중요한 이유✅ 1) 검색 엔진 최적화(SEO) 개선시맨틱 태그를 사용하면 검색 엔진이 페이지의 내용을 더 잘 이해할 수 있어 SEO 최적화에 유리합니다. 검색 엔진이 HTML 문서를 분석할 때, 시맨틱 태그를 활용하면 콘텐츠 구조를 보다 쉽게..