아주 긴 제목과 코드, 넓은 표가 있어도 모바일에서 읽기 편한지 확인하는 화면 예시

화면 확인용 예시 글입니다. 제목이 길어도 한 단어가 화면 밖으로 나가지 않아야 합니다.

<section class="related-posts article-width" data-example="very-long-attribute-value-for-overflow-check">
  <a class="related-item" href="/local/1">같은 게시판의 다른 글 제목이 길어도 줄바꿈되는지 확인</a>
</section>

코드 블록과 표만 좌우로 움직이고, 본문 문단은 화면 안에 남아야 합니다.

관련글은 이 게시판의 다른 두 글과 이어져야 합니다.

긴 제목은 모바일에서 여러 줄로 나뉩니다. 그 자체가 오류가 아닙니다. 가로로 밀리는 것이 오류입니다.

HTML 예시는 속성 값이 길어도 코드 상자 안에서만 움직여야 합니다. 바깥 본문은 그대로입니다.

표의 열이 다섯이어도 페이지 전체가 좌우로 흔들리면 안 됩니다.

이 게시판의 다른 테스트 글 두 개가 관련글로 붙는지 함께 확인하면 됩니다.

코드와 표는 읽기 확인용이며 실제 마크업을 복사해 쓰라는 안내가 아닙니다.

모바일에서 제목, 코드, 표, 관련글이 한 흐름으로 내려가는지 봅니다. 중간에 가로 막대가 생기면 실패입니다.

관련글 제목이 길어도 화살표와 함께 두 줄로 접히면 됩니다. 체크 무늬는 앞에 두지 않습니다.

이 글은 테스트 게시판의 긴 화면 예시입니다.