Gitsunmin

TIL

TIL
(=Today I Learned)

Pre Tag

<pre />는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

<pre>
      ___________________________
    <      나는 강아지일까 소일까?      >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
=========================================
</pre>

이렇게 작성하면 그래도 나온다.

      ___________________________
    <      나는 강아지일까 소일까?      >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
=========================================

다만, 접근성을 고려해서 위와 같은 그림이나 다이어그램인 경우에는 <figcaption>, ARIA를 사용해서 설명을 달아주면 좋습니다.

<pre role="img" aria-label="COW OR DOG">
      ___________________________
    <      나는 강아지일까 소일까?      >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
=========================================
</pre>

<figcaption id="cow-or-dog-caption">
소인지 강아지인지 구분이 잘 안되는 동물 그림이 "나는 강아지일까 소일까?"라는 텍스트 상자를 띄우고 있다.
</figcaption>