html 입력하는대로 화면에 표시 pre태그

html 입력하는 대로 화면에 표시 pre 태그 


■ HTML 문서 작성에 익숙하지 않을 때 가장 어색했던 게 띄어쓰기와 줄 바꿈 등의 공백 처리였었는데요. 이런 부분은 br태그나 & nbsp 등 특수 기호를 사용해서 처리할 수 있지만, 복잡한 텍스트의 경우는 이런 태그들로 처리하게에 한계가 있을 겁니다. 가장 대표적인 게 프로그램 소스 같은 복잡한 언어인데요. 


public static void main(String[]ar) throws IOException{

system.out.println("HTML5 & CSS3");

};


■ 이런 텍스트를 태그나 특수기호 등을 이용해서 HTML 문서에 삽입한다고 생각해보세요. 많이 번거롭겠죠? 이럴 때 사용하는 태그가 pre 태그인데요. 이 녀석을 이용하면 그 안에 작성한 텍스트는 브라우저에서 그대로 표시됩니다. 예제를 만들어서 적용해볼게요.

■ body 태그 안에 앞에서 언급한 프로그램 코드를 그대로 입력했는데요. 첫 번째 입력할 때는 일반 텍스트로 입력하고, 두 번째는 pre 태그를 이용해서 작성해봤습니다. 브라우저에서 출력 결과를 확인해볼게요.


■ 일반적인 텍스트 입력은 HTML 문서에서 아무리 줄바꿈을 했어도 br 태그가 없기 때문에 한 줄로 출력되고, pre 태그를 사용한 부부는 줄바꿈 띄어쓰기 등이 입력한 그대로 출력되는 걸 확인할 수 있습니다. ^^ 


 그런데 이 pre 태그를 이용하는데 있어서 한가지 주의할 점이 있는데요. 웹 문서를 읽어주거나 점자로 표시하는 기계들은 pre 태그를 만나게 되면 읽거나 표시하지 않고 뛰어넘어 버리거든요. 그래서 대체 텍스트를 꼭 입력해줘야 합니다. 이 점만 주의하시면 필요한 경우에 유용하게 사용할 수 있는 태그가 될 거예요. ^^ 수고하셨습니다.