Vim 플러그인을 사용하여 HTML 태그를 닫는 방법

2024-02-28
HTML 태그를 빠르게 닫는 Vim 팁1. 기본 명령어 사용

> 사용

가장 간단한 방법은 > 키를 사용하는 것입니다. 현재 커서 위치에 태그 이름을 자동으로 완성하고 닫는 태그를 삽입합니다. 예를 들어, <div> 태그 안에 있다면 > 키를 누르면 자동으로 </div> 태그가 삽입됩니다.

iabbrev 사용

자주 사용하는 태그 쌍에 대한 약어를 설정할 수 있습니다. 예를 들어, 다음 설정을 추가하면 </div> 태그를 삽입하기 위해 di만 입력하면 됩니다.

iabbrev di </div>

inoremap 사용

삽입 모드에서 특정 키 조합을 눌렀을 때 태그를 닫도록 설정할 수 있습니다. 예를 들어, 다음 설정을 추가하면 > 키를 누르면 닫는 태그를 삽입하고 삽입 모드를 종료합니다.

inoremap ><Esc>
2. 플러그인 사용

vim-closetag: https://github.com/alvan/vim-closetag 플러그인은 다양한 기능을 제공하여 HTML 태그를 닫는 작업을 더욱 편리하게 해줍니다.

  • 자동 완성: 태그 이름을 입력하면 자동으로 완성됩니다.
  • 자동 닫기: 태그를 입력하면 자동으로 닫는 태그를 삽입합니다.
  • 커서 이동: 닫는 태그로 빠르게 이동할 수 있습니다.

matchit.vim: [유효하지 않은 URL 삭제됨] 플러그인은 괄호, 따옴표, 태그 등의 짝을 찾는 기능을 제공합니다. % 키를 눌러 짝을 찾거나 [m 키를 눌러 짝 사이로 이동할 수 있습니다.

3. 샘플 코드

다음은 샘플 코드입니다.

<html>
<head>
<title>제목</title>
</head>
<body>
<h1>본문</h1>
<p>내용</p>
</body>
</html>

> 사용

<html>
<head>
<title>제목</title>
</head>
<body>
<h1>본문</h1>
<p>내용</p>
</body>
</html>

커서를 <h1> 태그 안에 위치시키고 > 키를 누르면 자동으로 </h1> 태그가 삽입됩니다.

iabbrev 사용

iabbrev di </div>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>본문</h1>
<p>내용</p>
<di>
</body>
</html>

p 태그 안에 커서를 위치시키고 di를 입력하면 </div> 태그가 삽입됩니다.

vim-closetag 플러그인 사용

<html>
<head>
<title>제목</title>
</head>
<body>
<h1>본문</h1>
<p>내용</p>
</body>
</html>

Ctrl-X Ctrl-O를 누르면 닫는 태그를 자동으로 삽입합니다.

4. 관련 문제 및 해결 방법

태그 이름이 잘못 입력된 경우

> 키를 눌렀을 때 태그 이름이 잘못 입력된 경우 자동 완성이 작동하지 않습니다. 이 경우 Ctrl-X Ctrl-O를 사용하여 닫는 태그를 직접 입력해야 합니다.

태그 안에 다른 태그가 있는 경우

> 키를


html xml vim


HTML autofocus 속성 vs. JavaScript focus() 메서드

방법:HTML 페이지의 <body> 태그에 onload 이벤트 속성을 추가하고, 이벤트 핸들러 함수 내에서 focus() 메서드를 사용하여 원하는 텍스트 상자에 포커스를 설정합니다.샘플 코드:장점:간단하고 구현하기 쉽습니다...


JavaScript 링크에서 href 값으로 "#"과 "javascript:void(0)" 비교

<a> 태그에서 JavaScript 링크를 만들 때 href 속성 값으로 "#"과 "javascript:void(0)"를 사용할 수 있습니다. 하지만 두 값은 서로 다른 의미와 성능 영향을 가지고 있습니다."#"과 "javascript:void(0)"의 차이점...


JavaScript로 HTML 요소의 클래스를 변경하는 방법

className 속성 사용가장 간단한 방법은 element. className 속성을 직접 설정하는 것입니다. 예를 들어, 다음 코드는 my-element라는 ID를 가진 요소의 클래스를 active로 변경합니다...


CSS 유동 레이아웃에서 높이를 동적 너비와 동일하게 설정하기 (JavaScript, jQuery, HTML 사용)

하지만 특정 상황에서는 요소의 높이를 동적 너비와 동일하게 설정해야 할 수도 있습니다. 예를 들어, 정사각형 이미지를 만들거나 콘텐츠 박스의 높이를 너비와 동일하게 유지해야 하는 경우가 있습니다.다음은 JavaScript...


html xml vim