HTML 코딩의 첫걸음, 반복되는 기본 코드
웹 개발을 시작할 때, 모든 HTML 파일은 거의 동일한 구조로 시작합니다. <!DOCTYPE html> 선언부터 <html>, <head>, <body> 태그에 이르기까지, 이 기본 뼈대를 잡는 것은 프로젝트의 첫 단계입니다. 사용자가 제공한 이미지에서 볼 수 있는 코드 역시 바로 이 기본 구조입니다.
이러한 반복적인 기본 코드를 '보일러플레이트(Boilerplate)'라고 부릅니다. 매번 새 파일을 만들 때마다 이 코드를 일일이 타이핑하거나, 이전에 작업했던 파일에서 복사해 붙여넣는 것은 꽤 번거로운 일입니다. 특히 코딩을 막 배우기 시작한 분들에게는 이 과정조차 헷갈리거나 시간을 소모하는 작업이 될 수 있습니다.
VS Code의 마법 같은 단축키: ! + Tab
Visual Studio Code(VS Code)에는 이 번거로움을 1초 만에 해결해 주는 기능이 내장되어 있습니다. 바로 'Emmet'이라는 기능 덕분입니다.
약어로 바로 태그를 완성하는 'Emmet'에 대해 더 알고싶다면 ? 클릭!!
사용법은 지극히 간단합니다.
- 파일의 가장 첫 줄에 느낌표(
!) 하나만 입력합니다. - 그 상태에서
Tab키 또는Enter키를 누릅니다.
이 간단한 동작만으로, VS Code는 이미지에서 본 것과 같은 완벽한 HTML5 보일러플레이트 코드를 자동으로 완성해 줍니다. 더 이상 기본 태그 구조를 외우거나 복사할 필요가 없습니다.
자동 완성된 코드, 각 줄의 의미
! 단축키로 생성된 코드는 단순한 뼈대가 아니라, 최신 웹 표준에 맞춘 필수 요소들을 포함하고 있습니다. 각 줄의 의미를 간략히 알아보겠습니다.
<!DOCTYPE html>: 이 문서가 HTML5 표준에 따라 작성되었음을 브라우저에 알립니다.<html lang="en">: HTML 문서의 시작을 알리는 최상위 태그이며,lang="en"속성은 이 페이지의 기본 언어가 영어임을 명시합니다. (필요시 "ko"로 수정할 수 있습니다.)<head>: 문서의 제목, 인코딩 방식, 뷰포트 설정 등 페이지 자체의 정보를 담는 영역입니다.<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 한글이나 다른 언어가 깨지지 않도록 합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기 등 다양한 화면 크기에서 페이지가 올바르게 보이도록(반응형 웹) 설정하는 필수 메타 태그입니다.<title>Document</title>: 브라우저 탭에 표시될 문서의 제목입니다.<body>: 실제 사용자에게 보여질 모든 콘텐츠(텍스트, 이미지, 비디오 등)가 들어가는 영역입니다.
생산성을 높이는 작은 습관
코딩은 복잡한 로직을 구현하는 창의적인 작업이지만, 동시에 수많은 반복 작업과의 싸움이기도 합니다. ! + Tab 같은 작지만 강력한 단축키를 익혀두는 것은 이러한 불필요한 반복을 줄이고, 정말 중요한 비즈니스 로직에 집중할 수 있게 도와줍니다.
이제부터 HTML 파일을 새로 만들 땐, 고민하지 말고 !를 입력하고 Tab 키를 누르는 습관을 들여보세요.
