글머리 기호 목록은 콘텐츠 계층 구조에 매우 유용할 수 있습니다. 이를 통해 구독자는 이메일의 핵심 요점을 빠르고 쉽게 읽을 수 있으며 나머지 콘텐츠와 중요한 정보를 구분할 수 있습니다.
그러나 너무 자주 이메일 개발, 뭔가 같은 그 소리 간단한 추가, 로켓 과학이 될 수 없습니다를 글 머리 기호 목록을 수는? 당신이 생각하는 것보다 더 까다로운 것으로 밝혀 -turns 있도록. 모든 이메일 클라이언트가 글머리 기호 목록을 같은 방식으로 렌더링하는 것은 아닙니다. 따라서 일부 개발자는 글머리 기호 목록을 완전히 사용하지 않거나 표를 사용하여 강제로 모양을 만듭니다. 이러한 전술은 스크린 리더를 사용하는 구독자에게 큰 골칫거리가 될 수 있습니다.
전자 메일 클라이언트에서 액세스할 수 있고 방탄이 되도록 하는 방식으로 전자 메일에 글머리 기호 목록을 포함하려는 경우 해결 방법이 있습니다.
이 코드에서 우리가 반드시 포함해야 하는 몇 가지 사항을 알게 될 것입니다. 그 중 하나는 <ul> 및 <ol> 태그에 정의된 유형 속성을 사용하여 목록에 포함하려는 특정 유형의 글머리 기호를 식별하는 것입니다. <ul>의 경우 디스크 스타일 버튼을 지정했습니다. <ol>의 경우 목록 항목이 A, B, C 등으로 식별되도록 "A"를 지정했지만 숫자와 소문자 및 대문자와 로마 숫자도 순서가 지정된 목록에서 사용할 수 있습니다. 다음은 이메일에서 사용할 수 있는 유형 속성 옵션의 전체 목록입니다.
순서 없는 목록 유형 옵션
디스크 ("총알"로 읽음 • )
원 (“흰색 원”으로 읽음 ○ )
정사각형 ("검은색 정사각형"으로 읽음 ■ )
정렬된 목록 유형 옵션
1 (기본 십진수)
A (대문자)
a (소문자 알파벳)
I (대문자 로마 숫자)
i (소문자 로마 숫자)
이 목록에서 여백의 스타일을 지정하는 방법에 대해 몇 가지 주의할 점이 있습니다. 또한 두 목록에 모두 " margin-left "를 포함했습니다. 이는 글머리 기호가 잘못 정렬되거나 전혀 나타나지 않는 대신 컨테이너 경계 내부에서 렌더링되도록 하기 위한 것입니다.
Gmail 고려 사항
특히 Gmail 웹메일(모바일용 Gmail 앱 제외)은 글머리 기호가 올바른 경계 내에서 렌더링되도록 하기 위해 왼쪽 여백이 필요하지 않은 클라이언트입니다. 즉, 목록에 추가 왼쪽 들여쓰기 가 포함됩니다. 글머리 기호 목록이 컨테이너의 왼쪽 여백과 같은 높이가 되도록 해야 하는 경우 다음과 같이 Gmail 관련 코드를 사용하여 왼쪽 여백을 0으로 재설정할 수 있습니다.
<머리> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
보시다시피, 여백 재설정이 모바일의 Gmail 앱에 영향을 미치지 않도록 모바일 반응형 미디어 쿼리를 포함했습니다. 또한 CSS가 작성된 순서에 유의하십시오 . 모바일 반응형 CSS 를 데스크톱 CSS 보다 먼저 배치하면 캐스케이드로 인해 모바일 반응형 CSS가 무효화됩니다.
추신: 시맨틱 글머리 기호 목록은 자연스럽게 모바일에 반응 하므로 접근성 이점이 있는 윈-윈입니다!
총알 스타일링
글머리 기호 목록을 단순하게 유지해야 한다고 생각한다면(저희는 검은색, 둥근 글머리 기호 또는 1, 2, 3으로 생각하고 있습니다), 오산입니다! 이메일의 텍스트에 할 수 있는 거의 모든 작업을 글머리 기호에 할 수 있습니다. 브랜드 스타일 가이드에 맞게 색상을 변경하시겠습니까? 가세요. 정렬된 목록이 있고 이메일의 나머지 부분과 일치하도록 사용자 정의 글꼴을 사용하고 싶습니까? 당신은 확실히 할 수 있고 그래야 합니다. 모든 목록의 경우 글머리 기호의 크기와 색상을 변경할 수 있으며 정렬된 목록의 경우 글꼴을 변경하고 숫자나 문자를 굵게 또는 기울임꼴로 변경할 수도 있습니다.
그러나 이 스타일링은 아직 옳지 않습니다. 각 목록에 대해 이전에 설정한 전역 글꼴 스타일이 글머리 기호 자체에 추가한 스타일로 재정의됩니다. 글머리 기호 뒤에 오는 사본이 아니라 글머리 기호 의 스타일만 업데이트하려고 합니다. 이것은 빠른 수정입니다. 스타일이 지정된 <span> 태그에 목록 항목의 텍스트를 래핑하여 사본을 의도한 글꼴 스타일로 재설정하기만 하면 됩니다.
훨씬 더 좋아졌습니다. 이제 나열된 콘텐츠의 스타일을 손상시키지 않고 의미 있는 글머리 기호 목록에 스타일을 지정할 수 있습니다.
목록 중첩
이제 이메일에 하나의 시맨틱 글머리 기호 목록을 포함하는 방법을 알았으므로 중첩 목록은 어떻습니까?
테이블 없이 중첩 목록을 포함하는 것은 생각만큼 어렵지 않습니다. 일반적으로 중첩 목록을 코딩하기만 하면 되지만 외부가 아닌 <li> 태그 내에 중첩 되어야 합니다. 그렇지 않으면 Gmail IMAP(GANGA)와 같은 이메일 클라이언트에 일부 불량 글머리 기호가 나타날 수 있습니다. 코드는 다음과 같습니다.
중첩 목록은 상위 목록의 전역 스타일을 상속하므로 목록을 일관되게 유지하기 위해 추가 간격이나 스타일이 필요하지 않습니다. 그러나 Outlook에서 간격은 여전히 까다로울 수 있습니다. 다음은 원하는 대로 간격을 유지하기 위한 팁입니다.
수평 간격의 경우 padding-left를 추가하십시오 . #px; <li> 태그에 대한 올바른 치수로 이렇게 하면 글머리 기호와 복사본 사이의 간격을 제어하는 데 도움이 됩니다. 또한 글머리 기호가 복사본에서 멀리 떨어져 렌더링되지 않도록 이 가이드의 시작 부분에 언급된 여백 왼쪽 포인터를 포함하는 것을 잊지 마십시오.
참고: 유감스럽게도 Windows용 Outlook에서는 작동하지 않습니다.
세로 간격의 경우 margin-bottom: #px를 추가하십시오 . <li> 태그에 대한 올바른 치수로 이렇게 하면 각 목록 항목 사이의 세로 간격을 늘리는 데 도움이 됩니다.
글머리 기호에 사용자 지정 기호 또는 이미지 사용
글머리 기호 스타일을 지정했습니다. 이제 대신 이미지나 아이콘을 사용해 보세요!
글머리 기호를 사용자 정의 크기나 글꼴로 스타일 지정하는 것과 달리 사용자 정의 기호 및 이미지 글머리 기호는 이메일 클라이언트에서 보편적으로 지원되지 않으므로 주의해서 진행하고 Litmus Email Previews와 같은 도구를 사용하여 목록이 모든 가입자의 기기.
코드의 경우 하트를 포함하도록 글머리 기호 목록을 변경하고 일부 사용자 지정 이미지에 대한 자체 Litmus 로고도 변경합니다.
<head> 메타데이터
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
글머리 기호 목록을 코딩할 때 표를 사용하지 않아야 한다는 말을 들어보셨을 것입니다. 하지만 왜?
스크린 리더의 인기가 급격히 증가하고 있다는 사실을 알 수도 있고 모를 수도 있습니다. 2023년까지 2억 7,500만 명이 사용할 것으로 예상됩니다. 가입자는 스크린 리더가 필요한 장애가 있거나 어떤 이메일을 듣고 싶어 스크린 리더를 사용하고 있을지 모릅니다. 그들은 아침에 이를 닦는 동안 가지고 있습니다.
이메일의 콘텐츠 계층 구조와 관련하여 우리는 의미 체계 태그를 가능한 한 많이 사용하는 것을 지지합니다. > 태그. 그러나 시맨틱 태그와 관련하여 이메일 개발자에게 한 가지 문제는 글머리 기호 또는 순서가 지정되지 않은 목록입니다.
스크린 리더는 표가 있는 이메일을 읽는 데 문제가 있습니다. 스크린 리더가 이메일 코드에서 테이블을 식별하면 하나의 테이블로 소리내어 읽습니다. 말 그대로 모든 행과 열의 위치와 내용에 대해 알려줍니다. 이것은 당신의 이메일을 듣는 구독자들에게 다소 많은 양일 수 있으며, 의도한 내용을 모으는 것을 확실히 어렵게 만듭니다. 이 글머리 기호 목록을 살펴보겠습니다.
테이블로 코딩하면 다음과 같이 들릴 것입니다.
그건... 별로야 , 그렇지? 글머리 기호 목록과 관련하여 많은 개발자는 표에 가짜 글머리 기호 목록을 코딩하여 시각적 문제를 해결합니다. 그러나 그 테이블이 그렇게 들린다는 것을 안다면 계속해서 그런 식으로 목록을 코딩하시겠습니까?
표와 달리 <ul>, <ol> 및 <li> 태그는 스크린 리더가 훨씬 더 쉽게 이해할 수 있습니다. 스크린 리더가 소리내어 읽는 이메일에서 이러한 태그를 보면 구독자에게 읽어줍니다.
목록을 시작하려면 목록에 몇 개의 항목 이 있는지 알려 줍니다.
다음에서 각 목록 항목을 표시하는 데 사용되는 글머리 기호 유형을 설명합니다.
정렬되지 않은 목록 : "총알"유형에 대한 유형 = "원", "검은 사각형"에 대한 유형 = "디스크", "흰색 총알"에 대한 = "광장"
정렬된 목록: 관련 영숫자 문자 또는 로마 숫자(예: " a ", " 2 ", " IV ")
목록을 종료하려면 " out of list "라고 표시됩니다.
예를 들어, 다음은 스크린 리더에서 읽을 수 있는 액세스 가능한 글머리 기호 목록입니다.
행과 열 전체를 듣는 것보다 훨씬 낫지 않습니까? 마치 이메일 자체를 보는 것처럼 머리 속에서 목록을 읽는 것과 같은 방식으로 목록의 내용을 큰 소리로 읽을 때 목록의 내용을 이해하는 것이 훨씬 쉽습니다.
글머리 기호 목록에 액세스할 준비가 되셨습니까?
전자 메일의 글머리 기호 목록에 액세스할 수 있도록 만들고 전자 메일 클라이언트 및 장치에서 잘 렌더링되는지 확인하고 싶으십니까? Litmus Email Previews와 같은 도구를 사용하면 글머리 기호 목록이 완벽한지 확인하는 데 도움이 됩니다. 또한 Litmus 체크리스트의 새로운 접근성 검사를 통해 이메일이 주요 접근성 모범 사례를 따르는지 즉시 확인하고 이메일을 보다 포괄적으로 만드는 방법에 대한 실행 가능한 조언을 얻을 수 있습니다.
