ParkSejin/11lec.html at main · Coding-Stage-Web/ParkSejin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>pre 태그</h1>

  <pre>
pre 태그에 텍스트를 작성하면 스페이스, 탭, 엔터 등
모든 공백 요소들이 이와 같이 화면에 그대로 적용됩니다.

때문에 pre 태그는 아래의 아스키 아트(Ascii art)들처럼
공백요소들을 적극 활용해야 하는 경우 유용하게 사용될 수 있습니다.

하지만 스크린 리더는 pre 태그의 내용을 읽지 않으므로
접근성을 위해 추가적인 조치가 필요하죠.
이 부분은 HTML 심화편에서 다루겠습니다.

  </pre>

  <pre>
    ,d888a                          ,d88888888888ba.  ,88"I)   d
  a88']8i                         a88".8"8)   `"8888:88  " _a8'
.d8P' PP                        .d8P'.8  d)      "8:88:baad8P'
,d8P' ,ama,   .aa,  .ama.g ,mmm  d8P' 8  .8'        88):888P'
,d88' d8[ "8..a8"88 ,8I"88[ I88' d88   ]IaI"        d8[
a88' dP "bm8mP8'(8'.8I  8[      d88'    `"         .88
,88I ]8'  .d'.8     88' ,8' I[  ,88P ,ama    ,ama,  d8[  .ama.g
[88' I8, .d' ]8,  ,88B ,d8 aI   (88',88"8)  d8[ "8. 88 ,8I"88[
]88  `888P'  `8888" "88P"8m"    I88 88[ 8[ dP "bm8m88[.8I  8[
]88,          _,,aaaaaa,_       I88 8"  8 ]P'  .d' 88 88' ,8' I[
`888a,.  ,aadd88888888888bma.   )88,  ,]I I8, .d' )88a8B ,d8 aI
"888888PP"'        `8""""""8   "888PP'  `888P'  `88P"88P"8m"
  </pre>

</body>
</html>