개발자 도구 · HTML WYSIWYG 편집기
HTML에서 '보이는 것'이 결코 '얻는 것'이 아닌 이유
· 배경
HTML CSS 내용 편집 가능
HTML은 구조를 설명하고 CSS, 장치 및 클라이언트는 모양을 결정하므로 WYSIWYG가 웹의 최종 결과에 근접할 수 있는 구조적 이유와 그것에서 파생된 WYSIWYM 아이디어를 설명합니다.
편집기에서는 완벽하지만 페이지에서는 잘못되었습니다. 익숙한 불일치로 열립니다.
동일한 요소가 다른 스타일시트와 만나기 때문에 ToolAcre 내부에서는 알림이 균형 있게 보일 수 있으며 사이트에 들어간 후에는 복잡해 보일 수 있습니다. 로컬 iframe은 자체 글꼴, 줄 높이, 패딩 및 밝은 색 구성표를 갖춘 문서입니다. 모든 목적지의 스크린샷이 아닌 점검뷰입니다.
따라서 WYSIWYG는 웹에서 제한된 의미를 갖습니다. 편집기는 현재 렌더링 컨텍스트를 정확하게 표시할 수 있지만 나중에 "얻는 내용"에는 초안 작성 중에 표시되지 않는 호스트 CSS, 컨테이너 너비, 브라우저 설정 및 콘텐츠 변환이 포함됩니다.
HTML은 모양이 아닌 구조를 설명합니다. 동일한 마크업이 다른 스타일시트에서 다르게 렌더링된다는 것을 설명합니다.
HTML은 주로 제목, 단락, 목록, 인용문, 강조, 코드 및 링크 등 구조와 관계를 기록합니다. 사용자 에이전트 기본값과 작성자 스타일이 해당 요소를 해석할 때 모양이 나타납니다. ToolAcre는 인라인 스타일과 클래스 속성을 제거하여 복사된 조각에서 해당 분리를 강화합니다.
동일한 h2는 기본 페이지에서 크게, 애플리케이션 카드에서 압축하고 인쇄 시 스타일을 변경할 수 있습니다. 치수가 변경되더라도 해당 역할은 제목으로 유지됩니다. 작성자는 하나의 미리보기에 원하는 타이포그래피가 있는지 결정하기 전에 구조가 올바른지 판단해야 합니다.
사용자 에이전트 스타일시트 및 캐스케이드 — 기본 브라우저 스타일과 사이트 CSS가 편집기 미리보기에 표시된 내용을 재정의하는 방법을 다룹니다.
브라우저는 요소에 대한 사용자 에이전트 규칙으로 시작한 다음 계단식을 통해 페이지 스타일과 사용자 기본 설정을 적용합니다. ToolAcre의 미리보기 문서는 자체적인 작은 스타일시트를 추가합니다. 호스트 사이트의 디자인 토큰이나 향후 CMS 테마를 가져오지 않습니다.
복사된 마크업이 다른 페이지에 들어갈 때, 해당 페이지의 p 여백, 목록 들여쓰기, 링크 색상 및 제목 배율이 모두 변경될 수 있습니다. 해결책은 임시 미리보기 스타일을 조각에 굽지 않는 것입니다. 왜냐하면 이 편집기는 어쨌든 이를 제거하기 때문입니다. 검토된 프레젠테이션을 대상에 적용하고 테스트하세요.
장치, 어두운 모드 및 이메일 클라이언트 — 스니펫이 충족하게 될 다양한 렌더링 컨텍스트를 설명합니다.
장치는 사용 가능한 너비, 글꼴 측정항목 및 사용자 확대/축소를 변경합니다. 다크 모드 테마는 색상을 변경할 수 있는 반면 ToolAcre는 의도적으로 미리 보기를 밝은 문서에 고정합니다. 이메일 클라이언트는 이 페이지가 에뮬레이트하거나 검증하지 않는 또 다른 HTML 및 CSS 제약 조건 세트를 적용합니다.
브라우저 또는 메일 클라이언트 호환성 매트릭스를 제공하는 저장소 소스가 없으므로 이 기사에서는 보편적인 동작을 약속하기보다는 질적으로 차원의 이름을 지정합니다. 반응형 및 이메일 클레임은 실제 지원 환경에서의 테스트가 필요합니다. 하나의 샌드박스 iframe이 해당 증거를 대신할 수 없습니다.
WYSIWYM: 보이는 대로 의미합니다. LyX와 같은 도구로 대중화된 구조 편집 철학을 소개합니다.
구조 편집 사고 방식은 제도 표면이 끝점과 정확히 유사한지 여부보다는 내용이 무엇을 의미하는지 묻습니다. 제목 수준은 계층 구조를 표현하고, 목록은 그룹화를 표현하고, 강한 표현은 중요성을 표현하고, 링크는 목적지를 표현합니다. 그런 다음 CSS는 컨텍스트에 대해 시각적으로 해당 의미를 전달합니다.
통합 문서에서는 이를 WYSIWYM 및 LyX라고 부르지만 여기에는 기록 소스가 없습니다. 출처나 제품 동작을 지정하지 않고도 개념을 설명할 수 있습니다. 먼저 의미론적 의도를 작성한 다음 콘텐츠가 실제로 표시될 위치를 미리 보고 조정합니다.
작업된 예: 세 가지 컨텍스트의 하나의 스니펫 — 기본 스타일시트, 사이트 테마 및 이메일 미리보기 아래에 동일한 마크업을 표시합니다.
h2, p, Strong, ul 및 공개 링크를 사용하여 하나의 조각을 빌드합니다. 다운로드한 문서를 열어 ToolAcre의 가벼운 래퍼를 확인하고, 복사한 조각을 테마 테스트 페이지에 붙여넣고, 승인된 이메일 미리 보기에 수정된 복사본을 배치하세요. 문구를 동일하게 유지하세요.
세 가지 보기는 스타일과 클라이언트 규칙이 다르기 때문에 다를 수 있지만 소스 구조는 비교할 수 있습니다. 이메일에 표나 인라인 프리젠테이션이 필요한 경우 이는 별도의 번역입니다. ToolAcre는 브라우저 미리보기가 받은 편지함의 유효성을 검사한 것처럼 가장하는 대신 테이블과 스타일을 모두 제거합니다.
여기서 다루지 않는 내용 — 사이트 스타일을 로드하도록 CSS 디버깅 또는 편집기 구성
이 문서에서는 CSS 특이성을 디버깅하거나 사이트 스타일로 편집기를 구성하거나 이메일 마크업을 인증하지 않습니다. 또한 복사된 출력이 신뢰할 수 없는 임의의 게시에 안전하다고 주장하지 않습니다. 새니타이저는 문서화된 파서 차등 위험이 있는 좁은 편집기 허용 목록입니다.
미리보기 샌드박스는 ToolAcre 내부의 스크립트, 양식 및 동일 출처 액세스를 중지합니다. 복사된 HTML은 해당 샌드박스를 떠납니다. 목적지 측 위생, 적절한 경우 CSP, 대응 테스트 및 접근성 검사를 사용합니다. 시각적 불일치와 보안은 출판 후 표시되는 경우에도 별도의 문제입니다.
요점: 의미 편집, 마크업 확인 — 접근 방식을 요약하고 ToolAcre의 HTML WYSIWYG 편집기를 사용하여 실제로 넘겨주는 마크업에 집중할 수 있는 방법을 요약합니다.
시각적 패리티를 추적하기 전에 의미를 편집하고 마크업을 확인하세요. ToolAcre는 의미론적 조각과 로컬 렌더링을 나란히 사용할 수 있도록 하여 불일치가 구조에서 오는지 아니면 대상 프레젠테이션에서 오는지 식별하는 데 도움이 됩니다.
그런 다음 검토된 조각을 대표 컨텍스트로 이동하고 그곳에서 결과를 측정합니다. 좋은 작업 흐름은 차이를 기대하고 의도적인 조정을 기록하며 하나의 편집자 보기가 모든 브라우저, 장치, 테마 또는 받은 편지함을 예측한다고 주장하지 않습니다.