HTML 문서의 편리한 시작
HTML 파일을 만들 때마다 <html>, <head>, <title>, <body> 등의 태그를 매번 입력하는 것은 번거롭죠? 다행히도 VS Code에서는 이 과정을 쉽게 만들어주는 기능이 있습니다.
바로 Emmet 기능을 사용하여 HTML 기본 코드를 자동으로 완성할 수 있는 방법입니다.
Emmet 사용하기
- VS Code 열기
먼저 VS Code를 열고, 빈 HTML 문서를 생성합니다. - 느낌표(!) 입력하기
문서에 느낌표(!)를 입력하면, Emmet 팝업이 나타납니다. - 자동 완성 실행
이 상태에서 엔터 키를 누르거나 탭(Tab) 키를 누르거나 마우스로 클릭하면, VS Code가 HTML 기본 코드를 자동으로 완성해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>이렇게 하면 매번 태그를 입력할 필요 없이 간편하게 HTML 문서를 시작할 수 있습니다!
자동 완성된 코드 설명
Emmet을 사용하여 자동 완성된 코드 중에는 여러분이 배운 적이 없는 내용도 있을 수 있습니다. 여기 간단히 설명해 드리겠습니다.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
이 코드는 Internet Explorer에서 최신 표준 모드로 웹페이지를 표시하도록 설정합니다. 이는 웹 페이지가 최상의 호환성을 가지도록 돕습니다. - <meta name="viewport" content="width=device-width, initial-scale=1.0">
이 코드는 모바일 기기에서 페이지의 비율을 조정하는 데 사용됩니다. 이를 통해 다양한 화면 크기에 맞게 웹페이지가 잘 표시될 수 있습니다.
코드 활용하기
위에서 설명한 메타 태그들은 일반적으로 자주 사용되므로, 굳이 지우지 않고 그대로 활용하는 것이 좋습니다. 이 코드들을 포함하여 HTML 문서를 작성하면, 더욱 호환성 있고 반응적인 웹페이지를 만들 수 있습니다.
VS Code의 Emmet 기능을 활용하면 HTML 문서의 시작을 훨씬 더 빠르고 쉽게 할 수 있습니다. 이 기능을 통해 반복적인 작업을 줄이고, 더 효율적으로 웹 개발을 진행해 보세요!
이제 매번 태그를 하나씩 입력하지 않아도 되니, 더 많은 시간과 에너지를 다른 중요한 작업에 집중할 수 있습니다.
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > HTML' 카테고리의 다른 글
| HTML 코딩을 빠르게 만드는 필수 기능!:Emmet 사용법 (1) | 2024.09.24 |
|---|---|
| HTML 기초 최종 정리 - 웹 개발의 첫 걸음 (0) | 2024.09.24 |
| HTML 영역 나누기 - <div>와 <span> 태그 활용하기 (1) | 2024.09.23 |
| HTML 이미지 태그 - 웹페이지에 이미지 추가하는 방법 (2) | 2024.09.23 |
| HTML 링크(Tag) - 웹페이지 간의 연결을 만드는 방법 (0) | 2024.09.23 |
