HTML

HTML이란 Hyper Text Markup Language를 말합니다. 이번 포스트에서는 자주 사용되는 HTML 태그를 소개합니다. HTML 태그 우선순위 모음 혹시 중학교, 고등학교 시절에 "우선순위 영단어"로 영어단어 공부를 해보신 경험이 있으신가요? 제가 중학생 때 주변 친구들이 많이 많이 봤던 책인데요, 많이 사용되는 영어 단어 순으로 나열되어있어 실전 영어 독해에 도움을 주는 책이어서 저희 때 베스트셀러였습니다. HTML 태그도 우선순위 영단어처럼 공부하면 어떨까요? HTML 태그는 150개 이상입니다. 150개 태그를 모두 자유자재로 사용할 줄 알면 좋겠지만, 저희에게는 시간이 없습니다. 우선순위로 공부한다면 보다 실전에서 HTML 태그를 사용하기 좋을 것입니다. HTML 순위 아래 사이트에..

이번 포스팅은 버튼에 클릭 이벤트를 추가하는 3가지 방법을 다룹니다. 권장하지 않는 방법부터, 권장되는 방법, 그리고 추가한 이벤트를 삭제하는 방법도 다룹니다. 우선 base HTML 코드는 아래와 같습니다.! 느낌표로 추가되는 기본 html 구성에 를 쓰고, 그 안에 을 추가한 코드입니다. Button HTML 태그 onclick 버튼 태그에 이벤트를 추가하는 방법으로 HTML 태그에 onclick를 추가해주는 방법이 있습니다. button 여는 태그 안에 onclick를 쓰고, 클릭했을 때 사용하고 싶은 JavaScript 코드를 안에 문자열로 작성합니다. 이 방법으로 button에 이벤트를 연결하면, 코딩하기 쉽다는 장점이 있지만, HTML 코드에 JavaScript 코드가 들어가면서 깨끗하지 않은..

Javascript 파일에서 innerHTML을 사용해서 HTML 코드를 사용할 수 있지만, template 태그로 html 코드 상에서 미리 구현해 놓은 것을 사용하면 더욱 깔끔한 코딩이 가능합니다. Template 사용 전 코드 JavaScript 코드 const toolElement = document.createElement('div'); toolElement.innerHTML = ` Merry Christmas! I am so happy `; Template 사용 코드 JavaScript 코드 const toolElement = document.createElement('div'); const toolTemplate = document.getElementById('tool'); const too..