- 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

코멘트를 남겨주세요
공유
출판된
seuheu
%일 전

최근 게시물

[Linux] Rocky Linux란 무엇인가?

1. 개요 Rocky Linux는 엔터프라이즈 환경에서 사용되는 RHEL(Red Hat Enterprise Linux)과 완전히 호환되는 오픈소스 Linux…

%일 전

[Hardware] Supermicro IPMIView 설치 및 사용법

https://youtu.be/XwG4jBWakzQ 1. 개요 Supermicro IPMIView는 Supermicro에서 제공하는 IPMI (Intelligent Platform Management Interface) 기반의 통합 관리…

%일 전

[Rocky 8.10] KVM NIC Bonding + Bridge 구성하기

1. 개요 이 문서는 두 개의 NIC (enp5s0f0, enp5s0f1)를 bonding(active-backup) 방식으로 구성하고, 해당 bond 장치를 브리지(br0) 와 연결하여 KVM 가상머신에서…

%일 전

[Rocky] KVM에서 NVIDIA GPU Passthrough 시 RmInitAdapter failed 오류 해결하기

1. 개요 KVM에서 NVIDIA GPU를 Passthrough 설정하여 VM에 할당할 때 RmInitAdapter failed 오류를 자주 접하게…

%일 전

[Proxmox] pGPU와 vGPU 동시 사용 설정

1. 개요 Proxmox에서 pGPU(Physical GPU)와 vGPU(Virtual GPU)를 동일한 서버에서 동시에 사용하는 방법을 정리합니다. 2. 버전…

%일 전

[Proxmox] vGPU 설정

1. 개요 Proxmox에서 vGPU를 설정하는 방법을 정리합니다. 2. 버전 Proxmox 8.2 3. vGPU란? vGPU(Virtual GPU)는…

%일 전