HTML 뷰티파이 도구- 무료 온라인 HTML 포매터 및 뷰티파이어

Input data
bfotool loadding
Output data
bfotool loadding

HTML 포매터

지저분하거나, 최소화되었거나, 난독화된 HTML을 위 필드에 입력하여 깔끔하게 정리하고 보기 좋게 만들어 보세요. 위 편집기에는 유용한 줄 번호와 구문 강조 기능도 포함되어 있습니다. 사용자의 서식 취향에 맞게 꾸미기 기능을 조정할 수 있는 다양한 옵션이 있습니다.

HTML Viewer, HTML Formatter, HTML Formatter를 언제 사용하시나요?

HTML을 작성할 때 들여쓰기, 간격, 기타 서식이 다소 체계적이지 않을 수 있습니다. 여러 개발자가 하나의 프로젝트에 서로 다른 서식 기술을 사용하는 경우도 흔합니다. 이 도구는 파일 서식을 일관되게 유지하는 데 유용합니다. HTML이 축소되거나 난독화되는 경우도 흔합니다. 이 도구를 사용하면 코드를 보기 좋고 읽기 쉽게 만들어 편집이 더 쉬워집니다.

HTML 포매터 예제

아래는 최소화된 HTML입니다.

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div><ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3</a></li></ul> </div></nav>

이렇게 아름다워집니다:

<nav class="navbar navbar-default">  
     <div class="container-fluid">  
         <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a>   
         </div>  
         <ul class="nav navbar-nav">  
             <li class="active"><a href="#">Home</a>  
             </li>  
             <li><a href="#">Page 1</a>  
             </li>  
             <li><a href="#">Page 2</a>  
             </li>  
             <li><a href="#">Page 3</a>  
             </li>  
         </ul>  
     </div>  
 </nav>