Sublime Text 3에서 HTML5 문서 템플릿을 빠르게 작성하는 Zen Coding (현재는 Emmet이라고도 불림) 기능을 활용하는 방법을 설명하겠습니다. JSP 파일에서 HTML5 템플릿을 적용하려면 다음과 같은 단계를 따르면 됩니다.
1. Emmet 설치 및 설정 확인
Sublime Text 3에는 기본적으로 Emmet이 내장되어 있으므로, 별도로 설치할 필요가 없습니다. 하지만 Emmet 기능이 활성화되어 있는지 확인하는 것이 좋습니다.
- Emmet 설치 확인:
- Sublime Text 3의 Preferences > Package Control에서 Package Control: List Packages를 선택한 후 Emmet이 설치되어 있는지 확인합니다.
- 만약 설치되어 있지 않다면, Package Control: Install Package를 선택하고 Emmet을 검색하여 설치합니다.
- Emmet 설정 확인:
- Preferences > Settings를 선택하여 사용자 설정 파일을 엽니다.
- 아래와 같은 설정을 추가하거나 수정하여 Emmet 기능이 활성화되어 있는지 확인합니다:
{
"auto_complete": true,
"auto_complete_commit_on_tab": true,
"show_definitions": true,
"emmet.includeLanguages": {
"jsp": "html"
}
}- emmet.includeLanguages 설정을 통해 JSP 파일에서 HTML 문서의 Emmet 기능을 사용할 수 있게 설정합니다.
Sublime Text 3에서 JSP 파일을 생성할 때, 기본 HTML5 템플릿을 자동으로 삽입하고, <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>와 <html lang="ko"> 설정을 추가하려면 사용자 스니펫을 사용할 수 있습니다. 사용자 스니펫을 정의하면 특정 파일 형식에 대해 자동으로 원하는 템플릿을 생성할 수 있습니다.
사용자 스니펫 만들기
스니펫 파일 생성:
- Sublime Text 3에서 Tools 메뉴를 열고 Developer > New Snippet...을 선택합니다. 새 스니펫 파일이 열립니다.
스니펫 정의:
- 다음과 같이 스니펫 파일을 수정하여 JSP 파일에 HTML5 템플릿과 contentType 설정을 추가합니다.
<snippet>
<content><![CDATA[
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$1</title>
</head>
<body>
</body>
</html>
]]></content>
<tabTrigger>jsp</tabTrigger>
<scope>text.html</scope>
</snippet>
스니펫 저장:
- 파일을 저장합니다. 기본적으로 Sublime Text는 스니펫 파일을 Packages/User/ 디렉토리에 저장합니다.
- 파일 이름은 원하는 대로 설정할 수 있지만, 확장자는 .sublime-snippet이어야 합니다.
- 예: html_jsp.sublime-snippet
스니펫 사용 방법
JSP 파일 생성:
- 새로운 .jsp 파일을 생성합니다.
스니펫 사용:
- 파일 내에서 html5jsp를 입력한 후 Tab 키를 누릅니다.
- 그러면 정의한 스니펫이 자동으로 삽입되어 기본 HTML5 템플릿과 JSP 지시어가 포함된 코드가 생성됩니다.
반응형
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| 로그인 아웃/ 세션 기록 하는 방법 (0) | 2024.08.19 |
|---|---|
| [시놀로지 도커] tomcat9 + mysql5 + jdbc9 세팅 방법 (0) | 2024.08.16 |
| [sublime text] <html lang="ko"> 를 기본값으로 적용하는 방법 (0) | 2024.08.16 |
| [캐시 사용 안함] 엣지 브라우저 캐시 삭제 방법 (0) | 2024.08.07 |
| [캐쉬 사용 안함] 크롬 설정 방법 (0) | 2024.08.07 |
