HTML에서 아무리 공백을 많이 입력하여도 한칸으로 인식하였습니다. 그래서 특수기호 를 여러번 사용하여 공백을 추가하였습니다. 문장을 그대로 표시하는 태그가 있는데 바로 <pre> 태그입니다. <pre> 태그의 주 사용처는 프로그램 소스를 표시해야 할때 요긴 하게 사용됩니다. 프로그램 소스를 보면 분석하기 싶게 들여쓰기가 필수로 들어 가는데 이때 <pre>태그가 적당합니다. 하지만 <pre> 태그의 단점이 있습니다. 바로 웹 접근성 문제입니다. 웹 문서를 소리로 읽어 주는 기계등은 <pre> 태그가 적용된 부분을 만나면 건너뛰어 버립니다. 그래서 <pre> 태그 부분을 대처할 수 있는 방법이 필요합니다. 저와 함께 <pre> 태그를 사용하는 방법을 살펴보겠습니다.
<pre> 태그 사용방법은 간단합니다. 입력하고 싶은 문장을 그대로 입력하면 됩니다. 공백을 여러번 사용해도 그대로 표시가 됩니다. 이제 결과값을 확인해 보도록 하겠습니다.
브라우저(크롬)로 실행결과를 보면 위와 같이 여러번 공백을 입력한 것이 그대로 표시된 것을 알수 있습니다. 이제 <pre> 태그의 사용방법을 알았을 것입니다. 이것으로 HTML 입력하는 대로 화면에 표시하기 <pre> 태그 HTML5을 마치겠습니다. 긴 글 읽어주셔서 감사합니다.
HTML 목록 만들기 <ul> <ol> <li> 태그 HTML5 (0) | 2020.06.30 |
---|---|
HTML 시맨틱 태그 문서 구조 알아보기 HTML5 (0) | 2020.06.26 |
HTML 주석 달아보기 HTML5 (0) | 2020.06.24 |
HTML 텍스트 단락 만들기 <p> 태그 HTML5 (0) | 2020.06.24 |
HTML 제목 표시하기 <hn> 태그 HTML5 (0) | 2020.06.23 |