코딩ㆍ개발 정보/HTML 연습

[sublime text] JSP UTF-8 를 기본값 파일 만드는 방법

RioRex 2024. 8. 16.

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