HTML 코드에서 Pre-Formatted Text 태그를 사용하는 방법은 다음과 같습니다.
단락 요소에서 웹 페이지의 HTML 코드에 텍스트를 추가하면 텍스트 줄 바꿈 위치 또는 사용할 간격을 거의 제어 할 수 없습니다. 이것은 웹 브라우저가 텍스트를 포함하는 영역을 기반으로 필요에 따라 텍스트를 흐르게하기 때문입니다. 여기에는 페이지를 보는 데 사용되는 화면 의 크기에 따라 매우 유동적 인 레이아웃을 갖는 반응 형 웹 사이트가 포함됩니다.
HTML 텍스트는 포함 영역의 끝에 도달하면 필요한 라인을 끊습니다. 마지막으로, 브라우저는 텍스트가 사용자가하는 것보다 어떻게 발생하는지 판단하는 데 더 많은 역할을합니다.
특정 서식이나 레이아웃을 만들기 위해 간격을 추가하는 측면에서 HTML은 스페이스 바, 탭 또는 캐리지 리턴을 포함하여 코드에 추가 된 간격을 인식하지 못합니다. 한 단어와 그 뒤에 오는 단어 사이에 20 개의 공백을 넣으면 브라우저는 하나의 공백 만 렌더링합니다. 이것은 공백 붕괴 (white space collapse)로 알려져 있으며, 사실 업계 최초로 많은 사람들이 처음에 시도한 HTML의 개념 중 하나입니다. HTML 공백이 Microsoft Word와 같은 프로그램에서 작동하는 방식을 기대하지만 HTML 공백이 전혀 작동하지 않습니다.
대부분의 경우, HTML 문서의 텍스트를 정상적으로 처리하는 것이 필요로하는 것이지만, 다른 경우에는 실제로 텍스트의 공백을 제거하고 줄 바꿈 위치를 정확히 제어 할 수 있습니다.
이것은 미리 포맷 된 텍스트로 알려져 있습니다 (즉, 형식을 지정합니다). HTML 사전 태그를 사용하여 웹 페이지에 미리 포맷 된 텍스트를 추가 할 수 있습니다.
태그 사용하기
수년 전에 미리 형식이 지정된 텍스트 블록이있는 웹 페이지를 보는 것이 일반적이었습니다. pre 태그를 사용하여 타이핑 그 자체로 포맷 된 페이지의 섹션을 정의하는 것은 웹 디자이너가 원하는대로 텍스트를 표시 할 수있는 빠르고 쉬운 방법이었습니다.
이것은 레이아웃을위한 CSS의 등장 이전이었습니다. 웹 디자이너가 테이블 및 기타 HTML 전용 방법을 사용하여 레이아웃을 강제 실행하려고했을 때였습니다. 미리 포맷 된 텍스트는 구조가 HTML 렌더링이 아닌 활자체 규칙에 의해 정의되는 텍스트로 정의되기 때문에 이것은 다소 효과가있었습니다.
오늘날이 태그는 CSS가 HTML에 외형을 강제하는 것보다 훨씬 효율적인 방식으로 비주얼 스타일을 지정하도록 허용하고 웹 표준이 구조 (HTML)와 스타일 (CSS)의 명확한 구분을 요구하기 때문에이 태그는별로 사용되지 않습니다. 그래도 미리 포맷 된 텍스트가 적합 할 수 있습니다. 줄 바꿈을 강제하려는 메일 주소 나 내용의 읽기 및 전체 흐름에 줄 바꿈이 필수적인시의 예와 같은 경우가 있습니다.
다음은 HTML
태그를 사용하는 한 가지 방법입니다.Twas brillig와 slithey toves일반 HTML은 문서의 공백을 축소합니다. 즉,이 텍스트에 사용 된 캐리지 리턴, 공백 및 탭 문자는 모두 하나의 공백으로 축소됩니다. 위의 따옴표를 p (단락) 태그와 같은 일반적인 HTML 태그에 입력하면 다음과 같이 한 줄의 텍스트가 표시됩니다.
Twas brillig and slithey toves 그 망할 녀석과 gymble 했어?
pre 태그는 그대로 공백 문자를 남깁니다. 따라서 줄 바꿈, 공백 및 탭은 브라우저에서 해당 내용을 렌더링 할 때 모두 유지 관리됩니다. 따옴표를 동일한 텍스트의 사전 태그 안에 넣으면이 표시가 나타납니다.
Twas brillig and slithey toves 그 망할 녀석과 gymble 했어?글꼴 관련
pre 태그는 작성한 텍스트의 공백과 중단을 유지하는 것 이상을 수행합니다. 대부분의 브라우저에서, 이는 pk 스 d 이스 글 C로 작성됩니다. 그러면 텍스트의 문자가 모두 너비가 같습니다. 다시 말해서, 편지 i는 편지 w만큼의 공간을 차지합니다.
브라우저가 표시하는 기본 고정 폭 글꼴 대신 다른 글꼴을 사용하고 싶다면 스타일 시트로 이것을 변경 하고 텍스트를 렌더링 할 다른 글꼴을 선택할 수 있습니다 .
HTML5
HTML5에서
속성은 더 이상 요소에서 지원되지 않는다는 점에 유의해야합니다. HTML 4.01에서 너비는 줄에 포함될 문자 수를 지정했지만 HTML5 이상에서는 삭제되었습니다.제레미 지라드 편집 : 2/2/17