개발자 도구 · HTML WYSIWYG 편집기
Enter 대 Shift+Enter: 편집자가 <p>, <div> 및 <br> 중에서 선택하는 방법
· 작동 방식
HTML 내용 편집 가능 텍스트 편집
Enter를 사용하여 <p> 또는 <div>를 생성하는 이유, Shift+Enter를 사용하여 <br>를 삽입하는 이유, 간격을 결정하는 방법 등 브라우저 편집기 뒤에 있는 단락 모델을 설명합니다.
CMS에서는 간격이 잘못되었지만 편집기에서는 괜찮은 이유 — 고전적인 이중 간격 또는 간격 없음 문제로 시작됩니다.
블록은 대상 스타일시트에서 여백을 받기 때문에 조각이 CMS에 들어갈 때 편집기에서 편안하게 보이는 간격이 변경될 수 있습니다. br로 구분된 두 개의 단락과 두 개의 줄은 한 번의 미리보기가 발생하여 유사한 수직 거리를 제공하더라도 구조적으로 다릅니다.
ToolAcre는 소스의 차이를 노출합니다. 복사된 여백이나 인라인 스타일을 포함하지 않으므로 단락 간격은 미리보기 래퍼 또는 이후 대상 CSS에서 가져옵니다. 작성자는 하나의 임시 보기가 제대로 보일 때까지 빈 키 입력을 추가하는 대신 의미에 따라 구조를 선택하고 직렬화된 요소를 확인해야 합니다.
블록 대 인라인 나누기 — <p> 및 <div>는 자체 여백이 있는 블록이고 <br>은 블록 내부의 줄 바꿈임을 설명합니다.
단락과 div는 블록 컨테이너입니다. br은 다른 흐름 내부의 빈 줄바꿈 요소입니다. 이 편집기는 p와 br을 허용하지만 div는 허용하지 않습니다. 붙여넣은 div는 래핑이 해제되어 래퍼를 삭제하는 동안 해당 단어와 허용된 하위 항목을 유지합니다. 삭제된 br은 `<br />`로 방출됩니다.
우편 주소는 한 줄이 하나의 단위를 형성하기 때문에 의도적으로 줄바꿈이 포함된 한 단락이 될 수 있습니다. 두 개의 독립적인 생각은 두 개의 문단으로 더 잘 표현됩니다. 대상은 p 여백의 스타일을 일관되게 지정할 수 있으며 수직 스페이서로 사용되는 반복되는 br 요소는 모양을 콘텐츠에 직접 인코딩합니다.
여기서 Enter가 수행하는 작업은 브라우저에 따라 다르며 ToolAcre에 의해 구성되지 않습니다.
ToolAcre는 기본 단락 구분 명령을 설정하지 않거나 Enter를 차단하지 않습니다. contenteditable 브라우저가 키를 처리하고 입력 리스너가 나중에 출력을 새로 고칩니다. 저장소 제한은 엔진 동작이 다르다는 것을 경고하므로 Enter가 항상 p를 생성하거나 항상 div를 생성하거나 하나의 버전별 규칙을 따른다고 주장하는 것은 호환성 지침이 될 것입니다.
그런 다음 삭제 단계에서는 도착하는 직렬화의 범위를 좁힙니다. 브라우저에서 생성된 div는 텍스트가 남아 있더라도 div로 유지될 수 없습니다. 이로 인해 최종 소스가 라이브 중간 트리와 다시 다를 수 있습니다. 따라서 소스 모드는 안정적인 단락 의미가 중요할 때 명시적인 p 요소를 설정하는 장소입니다.
소프트 브레이크는 소스에 작성할 수 있지만 Shift+Enter 계약은 구현되지 않습니다.
도구 모음에는 "소프트 브레이크" 버튼이 없으며 코드는 Shift+Enter를 등록하지 않습니다. 브라우저는 해당 동작을 구현할 수 있지만 이 문서에서는 해당 동작의 출력을 약속하지 않습니다. 소스 모드는 허용된 br을 유지하여 시각적 결과를 검사한 후 단락 내에서 중단을 표현하는 결정적인 방법을 제공합니다.
키보드 동작은 모듈이 테스트하지 않는 선택 및 편집 상태에 따라 달라집니다. 작업과 관련된 정확한 브라우저를 사용한 다음 소스를 읽으십시오. 제스처로 인해 원치 않는 블록이 생성되는 경우 다른 편집기 프레임워크에서 복사한 바로가기 설명에 의존하기보다는 명시적으로 조각을 다시 작성하세요.
실제 사례: 주소를 작성하고 메모한 다음 예측하기보다는 검사합니다.
주소의 경우 소스 모드를 사용하여 수신자, 거리, 지역 사이에 br로 하나의 p를 만듭니다. 간단히 말해서 두 개의 p 요소를 만듭니다. 삽입하기 전에 소스를 정리하는 시각적 모드로 돌아가서 여백이 최종 웹 사이트와 일치한다고 가정하지 않고 미리 보기를 비교합니다.
그런 다음 HTML을 복사하고 HTML 다운로드와 별도로 조각을 검사합니다. 복사된 결과에는 정리된 본문 마크업이 포함되어 있습니다. 다운로드에는 ToolAcre의 미리보기 CSS가 포함된 전체 문서가 포함되어 있습니다. 이러한 차이는 복사한 조각을 다른 스타일의 시스템에 붙여넣는 것보다 다운로드한 파일을 여는 것이 더 완벽해 보이는 이유를 설명할 수 있습니다.
빈 단락과 줄바꿈 없는 공백은 재작성자가 지원하는 경우에만 유지됩니다.
p가 허용되고 빈 블록을 삭제하는 규칙이 없기 때문에 허용되는 빈 단락이 남을 수 있습니다. 공백을 사용하지 않는 알려진 엔터티는 디코딩된 문자가 될 수 있으며 나중에 로컬 엔터티 구현에 따라 이스케이프될 수 있습니다. 코드는 특히 공백 단락을 대상으로 하는 정리 규칙을 제공하지 않습니다.
따라서 "지금 삭제"는 레이아웃 클리너가 아닙니다. 지원되지 않는 마크업과 속성을 제거하고 태그와 소스 형식의 균형을 유지하지만 구조적으로 허용되는 공백을 유지할 수 있습니다. 소스 또는 시각적 모드에서 의도적으로 간격 아티팩트를 삭제하고 대상 CSS가 빈 블록을 축적하는 대신 일반 여백을 제공하도록 합니다.
여기서 다루지 않는 내용 — CSS 여백 축소 규칙 또는 편집기 프레임워크 구성
이 문서에서는 여백 축소, 프레임워크 구분 기호 구성, 브라우저별 키보드 매트릭스 또는 이메일 간격 문제를 다루지 않습니다. 또한 미리보기가 CMS를 재현한다고 주장하지 않습니다. 라이트 샌드박스는 자체 본문 글꼴, 줄 높이, 패딩 및 중단 동작을 사용합니다.
또한 필터링된 출력을 보편적으로 안전한 게시로 처리하지 않습니다. 악의적인 제출에는 일회용 로컬 미리 보기가 비활성 상태로 유지되더라도 대상에 적합한 서버 측 정리가 필요합니다. 단락 의미, 브라우저 편집 동작 및 보안 정책은 하나의 "올바른 모양" 테스트로 축소되어서는 안 되는 세 가지 별도의 문제입니다.
요점: 의미와 일치하는 중단 선택 — 모델을 요약하고 ToolAcre의 HTML WYSIWYG 편집기를 사용하여 각 키가 생성하는 요소를 확인할 수 있는 방법
내용과 일치하는 중단을 선택하되 키 누르기를 예측하기보다는 확인하십시오. ToolAcre는 직접 소스 액세스를 제공하고, p 및 br을 허용하고, div를 풀고 샌드박스 렌더링을 표시합니다. 이러한 사실은 Enter 또는 Shift+Enter에 대한 약속을 만들지 않고도 반복 가능한 작업 흐름을 지원합니다.
작은 주소와 메모를 작성하고, 모드를 두 번 전환하고, 의도한 구조가 삭제 후에도 유지되는지 확인하세요. 대상이 예상치 못한 공백을 적용하는 경우 빈 HTML을 더 삽입하는 대신 CSS를 검사하세요. 안정된 의미는 하나의 고립된 미리보기에 맞춰 간격을 조정하는 것보다 더 잘 전달됩니다.