Bin's Blog

들어가며 오늘은 HTML에서 다뤄보려고 한다. 실제로 이 주제는 내가 면접에서 받았던 질문이다. 그 당시를 회상하면, 시맨틱태그에 대해서 알긴 하나 대답의 깊이가 없는 나의 모습을 반성하면서 꼭 포스팅을 해야겠다고 결심했다. 왜 시맨틱 태그가 중요해서 면접에서 단골로 질문이 나오는지 살펴보자. 시맨틱 태그란? 내가 프로젝트를 했었을 때는, 시맨틱 태그를 사용하지 않아도 태그를 활용해서 웹 문서를 만들었다. 사실 그 당시에는 시맨틱 태그가 무엇인지, 왜 중요한지에 대한 이해 자체가 없었다. 우리가 시맨틱 태그를 사용해야 하는 이유는 다음 3가지로 말할 수 있다. 1️⃣ HTML 문서의 가독성과 유지보수가 쉬워진다. 실제로 프로젝트에서 div를 많이 쓰다보면 div지옥에 빠져서 나중되면 어디가 어느 부분인지..

🤔 XML이란? 👉 EXtensible Markup Language의 약자이며, 1998년에 W3c(월드 와이드 웹 컨소시엄 - 팀 버너스리가 1994년에 만든 곳이다.) 표준 권고안에 포함되어 있다. 👉 XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어이다. 이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. 👉 XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌다. 👉 또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다. 1️⃣ XML의 특징 👉 XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어이다. 👉 XML은 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있다..

📚 타입스크립트로 HTML 변경과 조작할 때 주의점 👉 h4 안의 글자를 바꿔보자 안녕하세요 👉 selector로 html을 찾으면 타입이 Element | null이기 때문에 html을 찾지 못하면 null이 되기 때문에 이 부분을 해결해줘야한다. 1️⃣ 해결책 (Type Narrowing) let 제목 = document.querySelector("#title"); if (제목 !== null) { 제목.innerHTML = "반가워요" } 2️⃣ 해결책 (instanceof) if (제목 instanceof Element) { 제목.innerHTML = "반가워요" } 3️⃣ 해결책 (as) // 이 요소는 element라고 사기쳐주세요 // null이 들어와도 element type가능 // 비상..