개발자 도구 · HTML WYSIWYG 편집기
<font> 태그에서 CSS로: 웹 형식이 마크업 밖으로 이동한 방법
· 배경
HTML CSS 텍스트 정리
글꼴, 가운데 및 정렬 속성과 같은 표시 HTML이 어떻게 CSS로 대체되었는지, 그리고 그 역사가 오늘날 편집자의 인라인 스타일 논쟁을 설명하는 이유를 설명합니다.
이전 페이지의 프리젠테이션 HTML — 여기에서는 날짜 주장이 출처가 아닙니다.
이전 페이지 조각은 글꼴 및 중앙과 같은 요소나 bgcolor 및 정렬과 같은 속성을 통해 직접 모양을 표현하는 경우가 많습니다. 통합 문서에는 1990년대 중반의 연대기가 첨부되어 있지만 해당 날짜를 확인하는 저장소 소스는 없습니다. 구현은 현재 이 편집기가 그러한 마크업을 처리하는 방법만 보여줄 수 있습니다.
ToolAcre는 글꼴이나 가운데를 허용하지 않으며 프레젠테이션 속성을 유지하지 않습니다. 지원되지 않는 일반 래퍼는 포장이 풀리므로 형식 지정 지침이 사라지는 동안 눈에 보이는 단어는 그대로 유지될 수 있습니다. 해당 출력은 기존 페이지를 충실하게 복원한 것이 아니라 정리된 초안입니다.
글꼴, 중심 및 bgcolor: 태그의 표시 — 모양을 위해 추가된 요소 및 속성 브라우저를 설명합니다.
프리젠테이션이 태그와 속성에 있으면 콘텐츠와 디자인을 독립적으로 변경하기가 어려워집니다. 기사 전반에 걸쳐 반복되는 색상 선택은 모든 조각에서 편집되어야 하며 중앙에 있는 제목에는 고유한 구조적 의미가 없습니다. 해당 구성을 복사하면 더 이상 사용되지 않는 레이아웃에서 가정도 가져옵니다.
제목, 단락, 목록 및 인용과 같은 의미 마크업 이름 역할입니다. 대상 스타일시트는 모든 항목을 일관되게 표시할 수 있습니다. ToolAcre는 더 작은 어휘를 지원하고 클래스와 스타일도 제거하여 수신 시스템이 자체 프레젠테이션 계층을 담당하게 합니다.
CSS는 구조와 표현을 분리합니다. 표준 날짜가 저장소 증거 외부에 있습니다.
CSS는 콘텐츠 트리와 별도로 선택기와 선언을 제공합니다. 이러한 아키텍처 분할을 통해 각 본문을 다시 작성하지 않고도 하나의 디자인 변경이 많은 문서에 영향을 미칠 수 있습니다. 이러한 역사적 주장에는 외부 사양이 필요하기 때문에 이 기사에서는 첫 번째 권장 날짜나 표준 순서를 고안하지 않습니다.
실제 규칙은 테스트 가능한 상태로 유지됩니다. ToolAcre에서 복사된 조각에는 스타일 속성이나 클래스 이름이 포함되어 있지 않습니다. 다운로드한 전체 문서에는 ToolAcre의 자체 래퍼 스타일시트가 포함되어 있지만 해당 CSS는 Copy HTML에서 반환된 삭제된 조각에 삽입되지 않습니다.
프리젠테이션 요소가 생활 수준 연대순 주장 없이 이 허용 목록 외부에 있습니다.
통합 문서는 생활 수준에서 지원 중단 및 제거를 설명합니다. 이 모듈에는 표준 아카이브가 없으므로 기사는 현재 정책에서 중지됩니다. 프리젠테이션 요소는 지원되지 않으며 해당 위험 범주에 따라 래핑되지 않거나 제거됩니다. 그것은 규범적인 연대기 주장을 하지 않습니다.
제거 보고서는 유용한 증거입니다. 텍스트 주위에 글꼴 태그를 붙여넣고 단어가 남아 있는 동안 래퍼가 거부되는지 관찰합니다. 위험한 스타일 컨테이너를 붙여넣으면 해당 본문이 전체적으로 제거됩니다. 원시 스타일 콘텐츠가 이 편집기의 범위를 벗어나는 요청 및 구문 분석 표면을 생성할 수 있기 때문입니다.
인라인 스타일이 다른 곳에 있지만 이 편집기가 이를 제거합니다.
인라인 스타일은 현대적인 구문 메커니즘이지만 ToolAcre는 이를 완전히 거부합니다. 따라서 이 편집기는 살아남은 "타협" 스타일 속성을 보여주거나 자체 출력 모드 중 하나를 권장할 수 없습니다. 필터링된 본문 HTML 주위에 생성된 미리 보기 문서에 유일한 자체 포함 스타일이 나타납니다.
기타 상황, 특히 이메일 생성에는 인라인 선언이 필요할 수 있습니다. 해당 요구 사항에는 클라이언트 테스트 및 CSS 정책이 포함된 별도의 파이프라인이 필요합니다. 여기에 임의의 스타일을 추가하면 현재 허용 목록과 모순되며 증거나 테스트 없이 새니타이저의 책임이 확장됩니다.
작업 예: 1990년대 스니펫 현대화 — 글꼴 태그 마크업을 시맨틱 HTML과 클래스로 다시 작성하고 둘을 비교합니다.
실제 제목과 단락을 선택하여 `<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>`을 현대화하세요. ToolAcre는 지원되지 않는 프레젠테이션을 풀고 b를 Strong으로 매핑하고 정렬을 제거하고 p를 유지하지만 유지 관리가 h2여야 한다고 추론할 수는 없습니다.
의미를 명시적으로 `<h2>Maintenance</h2><p>Tonight</p>`로 다시 작성한 다음 승인된 대상 클래스 또는 스타일시트 규칙을 편집기 외부에 추가하세요. 문장 내에서 중요성을 의도한 경우에는 Strong이 적합할 수 있습니다. 굵은 글씨가 단지 글꼴 두께일 뿐이라면 오해의 소지가 있는 의미를 유지하지 마십시오.
여기서 다루지 않는 내용 — CSS 방법론 토론 또는 프레임워크별 스타일
이 기사에서는 CSS 방법론, 프레임워크, 유틸리티 클래스 또는 디자인 토큰을 비교하지 않습니다. 글꼴, CSS 또는 표준 전환에 대한 역사적 날짜를 주장하지 않습니다. 또한 시각적 레거시 마크업에서 의미론적 역할을 추론할 수 있는 자동화된 변환기도 제공하지 않습니다.
필터링은 보편적인 XSS 방지가 아닙니다. ToolAcre의 손으로 작성한 토크나이저는 제한되어 있으며 해당 미리보기는 별도로 샌드박스 처리됩니다. 레거시 또는 사용자 생성 HTML을 허용하는 서버에는 유지 관리되는 파서 기반 새니타이저, 마이그레이션 테스트 및 대상별 허용 목록이 필요합니다.
요약: 규칙이 존재하는 이유 파악 — 기록을 요약하고 ToolAcre의 HTML WYSIWYG 편집기에서 출력을 검사하는 것이 마크업에서 프리젠테이션을 유지하는 데 어떻게 도움이 되는지 설명합니다.
구조와 표현이 분리되는 이유를 알아보세요. 의미는 재설계 후에도 유지되어야 하며 모양은 일관되게 관리되어야 합니다. ToolAcre는 복사된 조각에서 레거시 프레젠테이션과 최신 인라인 또는 클래스 기반 스타일을 모두 제거하여 해당 경계를 적극적으로 적용합니다.
소스 보기를 사용하여 손실된 내용을 식별한 다음 수동으로 의미를 복원하고 대상에서 스타일을 지정합니다. 이 프로세스는 이전 모습을 유지하지 못할 수도 있지만 미래의 모든 테마에 대해 쓸모없는 결정을 내리지 않고도 검토, 마이그레이션 및 조정이 더 쉬운 콘텐츠를 생성합니다.