- 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

최근 게시물

[Raspberry Pi] OpenMediaVault 설치하기 | 10분 만에 NAS 구축

https://youtu.be/hlBddMVRL9Q 1. 개요 OpenMediaVault(OMV)는 Debian 기반의 오픈소스 NAS(Network Attached Storage) 운영체제로, 웹 브라우저를 통해 스토리지,…

%일 전

[Raspberry Pi] Raspberry Pi OS Lite 설치 방법 (Raspberry Pi Imager 사용)

https://youtu.be/iCUa8Ua8fIg 1. 개요 Raspberry Pi OS Lite를 Raspberry Pi Imager를 이용하여 설치하는 방법을 설명합니다. 2.…

%일 전

[CKA] Certified Kubernetes Administrator 합격 후기 (90점 합격)

안녕하세요.이번에 CKA(Certified Kubernetes Administrator) 시험에서 90점으로 합격했습니다. (합격 기준 66점) 합격 자체도 기뻤지만, 이번 시험을 준비하면서…

%일 전

[Linux] Rocky Linux 9.5 NFS 구성 및 테스트 가이드 (rw/ro + root_squash 비교)

https://youtu.be/n8-wlkZiqio 1. 개요 NFS(Network File System)를 설치하고, rw/ro 및 root_squash 옵션에 따른 접근 제어와 성능을 테스트하는 방법을 정리한 가이드입니다.…

%일 전

[Linux] Rocky Linux 9.5 Cron 설정 및 테스트 방법

https://youtu.be/4MVxzmepY3s 1. 개요 리눅스에서 정기적으로 실행되는 작업(백업, 로그 정리, 모니터링 등)은 cron 서비스를 통해 자동화할 수 있습니다.…

%일 전

[Linux] Rocky Linux 9.5 계정 관리 (생성 · 권한 · 잠금 · 삭제) 정리

https://youtu.be/vPfxWFBE1yc 1. 개요 리눅스 서버를 운영할 때 사용자 계정 생성, 비밀번호 설정, 권한 부여, 계정…

%일 전