- PROGRAMMING

[HTML & CSS] VSCode에서 HTML을 빠르게 작성하는 꿀팁





1. 기본 HTML 템플릿 자동 생성

  • HTML 문서를 처음 만들 때 !를 입력하고 Tab 키를 누르면 기본 HTML 구조가 자동으로 생성됩니다.




사용 방법

! + Tab


결과

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>



2. 클래스명이 포함된 div 태그 생성

  • div.container를 입력한 후 Tab 키를 누르면 다음과 같이 변환됩니다.




사용 방법

div.container + Tab


결과

<div class="container"></div>



3. 클래스명이 포함된 div 태그 간편 생성

  • .box를 입력하고 Tab을 누르면 <div class="box"></div>가 자동 생성됩니다.




사용 방법

.box + Tab


결과

<div class="box"></div>



4. 여러 개의 리스트 아이템 생성

  • ul>li*5을 입력하고 Tab을 누르면 <ul> 내부에 5개의 <li> 태그가 자동 생성됩니다.




사용 방법

ul>li*5 + Tab


결과

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>



5. 속성과 텍스트가 포함된 링크 태그 생성

  • a[href="<https://example.com>"]{클릭하세요}를 입력하고 Tab을 누르면 <a> 태그가 자동 생성됩니다.




사용 방법

a[href="<https://seuheu.com>"]{클릭하세요} + Tab


결과

<a href="<https://seuheu.com>">클릭하세요</a>



seuheu

최근 게시물

[Linux] Rocky Linux 9.5 KVM virt-manager를 이용한 Windowws 11 설치 가이드(VirtIO)

https://youtu.be/nNDRk8bt3c4 1. 개요 virt-manager를 사용하여 KVM/QEMU 가상화 환경에서 Windows 11을 설치하는 방법을 소개합니다. 설치 과정에서는 virtIO…

%일 전

[Windows] Windows 11 24H2 설치 가이드

https://youtu.be/YL23ogmZhuY 1. 개요 이 문서에서는 Windows 11 24H2 버전 설치 방법에 대해 설명합니다. USB 설치 디스크를…

%일 전

[Linux] Rocky Linux 9.5 KVM virt-install로 KVM 가상 머신 생성(CLI)

https://youtu.be/Nm9swsyeXlY 1. 개요 virt-install 명령어를 이용해 Rocky Linux 9.5 기반 KVM 가상 머신을 생성하는 방법을…

%일 전

[Linux] Rocky Linux 9.5 KVM virt-manager로 KVM 가상 머신 생성(GUI)

https://youtu.be/zZQl7OJZf7Q 1. 개요 virt-manager를 이용하여 KVM 가상 머신을 생성하는 방법을 설명합니다. Rocky Linux 9.5 ISO…

%일 전

[Linux] Rocky Linux 9.5 KVM 설치

https://youtu.be/UPeCJbP3UIE 1. 개요 KVM 기반의 가상화 시스템 설치하는 방법을 소개합니다. 2. 버전 Rocky Linux 9.5…

%일 전

[Linux] Rocky Linux 9.5 nmcli로 이중화(Bonding) 구성

https://youtu.be/wqTxt1H31y4 1. 개요 서버에 2개 이상의 NIC(Network Interface Card)가 있을 때, 고가용성과 장애 대응을 위해…

%일 전