IntelliJ IDEA에서 html 및 body 태그의 포맷팅 문제 해결 방법

검색 하면 가장 많이 나오는 해결책이 "Ctrl + Alt + L 단축키를 사용하여 파일 코드를 자동으로 정렬할 수 있다."입니다. 해당 해결책이 작동하지 않을 때 아래 방법을 통해서 해결하였습니다.

 

문제 예시

<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample page.</p>
</body>
</html>

  1. 코드 스타일 설정 열기

    • 상단 메뉴에서 File을 클릭한 후, Settings를 선택합니다.

  2. HTML 코드 스타일 설정으로 이동

    • 왼쪽 사이드바에서 Editor > Code Style > HTML을 차례로 선택합니다.

  3. 들여쓰기 설정 확인 및 수정

    • Tabs and Indents 탭을 선택합니다.
    • Indent와 Continuation indent 값이 원하는 대로 설정되어 있는지 확인합니다. 일반적으로 Indent는 4 또는 2로 설정됩니다.

  4. 특정 태그에 대한 들여쓰기 예외 확인 (해당 설정이 중요)

    • Other 탭으로 이동합니다.
    • Do not indent children of 목록을 확인하여, html 또는 body 태그가 포함되어 있는지 확인합니다.
    • 만약 해당 태그들이 목록에 있다면, 선택하여 제거합니다. 이 설정은 지정된 태그의 자식 요소들을 들여쓰기하지 않도록 지정하므로, 제거해야 올바른 들여쓰기가 적용됩니다.

  5. 설정 적용 및 확인

    • Apply 버튼을 클릭하여 변경 사항을 적용한 후, OK를 눌러 설정 창을 닫습니다.
    • HTML 파일로 돌아가서, Ctrl + Alt + L (또는 Code 메뉴에서 Reformat Code 선택)을 눌러 코드를 재포맷팅합니다. 이제 html 및 body 태그의 들여쓰기가 올바르게 적용되는지 확인합니다.

4번을 확인해보시고 단계를 따르면, IntelliJ IDEA에서 html 및 body 태그의 포맷팅 문제가 해결될 것입니다.