[웹 콘텐츠 관리 쉽게하기] 자동화 HTML 코드 편집기 도구 정리 툴 소개

태그 변환 및 특수 문자, 공백등 불펼요한 HTML 코드 편집기

HTML 코드 수정 및 정리 툴

이 HTML 코드 편집기는 사용자가 입력한 텍스트에서 특정한 HTML 태그나 특수 문자를 자동으로 변환하거나 삭제할 수 있는 간단한 도구입니다. 텍스트 편집을 더 효율적으로 작업하려고 만들었습니다, 특히 HTML 태그와 특수 문자들이 포함된 텍스트를 수정하고 정리하는 데 유용합니다.

HTML 코드 편집기 도구

주로 HTML 코드에서 불필요하거나 잘못된 부분을 자동으로 수정하거나 특정 태그를 다른 형식으로 변환하는데 사용합니다.

예를 들어, 웹페이지 콘텐츠를 작성할 때 자주 사용되는 HTML 태그나 특수 문자가 있을 수 있는데, 이를 일일이 수동으로 수정하는 것은 매우 번거롭습니다. 이 코드는 이를 간소화하고, 효율적으로 작업할 수있습니다.

주요 기능

코드는 다음과 같은 주요 기능을 포함하고 있습니다:

• 입력된 텍스트에서 특정 HTML 태그 및 특수 문자 수정: 사용자가 텍스트 상자에 입력한 HTML 코드에서 지정된 패턴을 찾아서 변환합니다.
• 자동화 삭제 버튼: 이 버튼을 클릭하면, 텍스트에서 다음과 같은 변환 작업이 자동으로 수행됩니다.
  1. <p data-ke-size="size16">&nbsp;</p>를 <p id="space"></p>로 변경
  2. <p data-ke-size="size16">를 <p>로 변경
  3. nbsp;를 삭제
  4. h2,h3,h4 소제목을 기본 코드로 변경
• 출력 및 수정된 텍스트 확인: 변환이 끝난 후, 수정된 텍스트는 화면에 출력되어 사용자가 확인할 수 있습니다. 이때, 자동화 작업이 적용된 텍스트가 출력 텍스트 박스에 표시됩니다.

html 코드 수정 작업 방법

1. 입력 및 수정 작업
   • 수정하고자 하는 텍스트를 입력 상자에 입력합니다.
   • 삭제하거나 변경하고자 하는 특정 문자를 지정하는 입력란과, 그에 대한 변환 코드를 입력하는 부분에 입력후 변환 작업을 진행합니다.
2. 자동화 삭제 버튼
   • 버튼 클릭 시, 자동으로 세 가지 변환 작업이 순차적으로 진행됩니다.
     • 첫 번째 작업: 특정 태그 <p data-ke-size="size16">&nbsp;</p>를 <p id="space"></p>로 변환
     • 두 번째 작업: <p data-ke-size="size16">를 <p>로 변환
     • 세 번째 작업: 텍스트 내에서  를 삭제
     • 소제목을 기본 코드로 변환
3. 출력
   • 각 변환 작업이 완료된 후, 최종 결과는 출력 텍스트 박스에 자동으로 표시됩니다.
   • 출력된 결과를 복사하거나 추가적인 수정을 진행할 수 있습니다.

코드의 필요성

이 코드의 목적은 HTML 코드나 텍스트에서 불필요한 부분을 자동으로 수정하고, 텍스트 처리 작업을 효율적으로 해주는 것입니다.

• 반복적인 작업의 자동화
  • 수많은 HTML 태그와 특수 문자를 반복적으로 수정해야 하는 상황에서 시간을 절약하고 효율성을 높일 수 있습니다.
• 정확한 변환
  • 수동으로 수정하는 경우, 변환 대상 텍스트를 잘못 처리할 수 있습니다. 자동화 버튼을 사용하면 정확한 순서로 변환이 이루어져 실수의 여지를 줄일 수 있습니다.
• 웹 개발 및 콘텐츠 관리에서 유용
  • HTML 콘텐츠나 코드에서 자주 발생하는 실수나 불필요한 코드들을 쉽게 수정할 수 있습니다.
• 사용자 편의성
  • 텍스트를 수정하려는 사용자가 버튼 클릭 한 번으로 원하는 변환 작업을 한 번에 처리할 수 있어 매우 편리합니다.

HTML 코드 편집기 도구

변환 css 설정

아래는 기본 CSS 코드 예시 입니다.

• h1 (제목 태그)의 기본 CSS

.post-cover h1 {
    margin: 0 auto;
    font-weight: 300;
    font-size: 2.125em;
    line-height: 1.2352;
}

• h2 (제목 태그)의 기본 CSS

#article-view h2 {
    font-size: 1.9rem;
    line-height: 1.46;
    border-bottom: 5px solid #b1b1b1 !important;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    letter-spacing: 0.07rem;
}

• h3 (제목 태그)의 기본 CSS

#article-view h3 {
    line-height: 1.7em;
    border-radius: 20px 0;
    padding: 5px 10px;
    border-bottom: 3px solid #f0f0f0;
    font-size: 1.3rem;
    letter-spacing: 0.07rem;
}

• h4 (제목 태그)의 기본 CSS

#article-view h4 {
    line-height: 1.5em;
    padding-left: 10px;
    font-size: 1.15rem;
    letter-spacing: 0.1rem;
}

#article-view h4::before {
    content: '\25CF';
    color: #eee;
    font-size: 0.9em;
    line-height: 0.8em;
    padding-right: 10px;
}

• P 18 ( 글 태그)의 기본 CSS

#article-view p[data-ke-size='size18'] {
    font-size: 1.12em;
    line-height: 1.67;
}

• P (기본 글 태그)의 기본 CSS

#article-view p, .entry-content p {
    line-height: 1.9rem;
    letter-spacing: 0.07rem;
    color: #f5f5f5;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    word-break: break-all;
    font-weight: 400;
    font-family: 'Noto Sans KR';
}

• P 14 ( 태그)의 기본 CSS

#article-view p[data-ke-size='size14'] {
    font-size: 0.87em;
    line-height: 1.71;
}

• B(태그)의 기본 CSS

b {
    font-weight: bold;
}