HTML 기초, <pre><center><hr><hn>태그 (다섯번째)

유용한정보/IT / PC

★＃♬ 2014. 6. 25. 22:45

이 포스트는 Tistory 블로그를 하면서 자주 접하는 HTML에 대한 궁금증을 해소하기 위해

HTML 기초공부를 시작하고, 공부한 내용을 정리 목적으로 작성된 포스트입니다. ^^

늦게 진행되지만 벌써 HTML 독학 다섯번째 포스팅입니다. 짝짝짝~ 자축'-')/

한 포스팅에 많은 태그와 기초에 대한 정보를 입력하고 싶은데.. 그렇게하면 내용이 너무 많아지고 포스팅도 길어져서..

여러가지로 좋지못한 관계로 짧게 짧게 계~속 진행하겠슴다! 어디까지나 개인적인 공부목적이니까요. ^-^

오늘은 <pre>, <center>, <hr>, <hn> 태그에 대해서 공부하겠습니다.

HTML 기초, <pre><center><hr><hn>태그

★입력한 대로 보여주는 <pre> 태그

HTML 문서에서는 탭(tab), 엔터(enter), 연속된 공백(space) 등 여러 번 사용해도 인터넷 익스플로러에 출력되는건

하나의 공백입니다. HTML에서 작성한 문장 형태가 그대로 나타날 수 있도록 하고싶을때 원하는 곳에 <pre> 태그를 사용.

<pre></pre> 태그에 포함되는 모든 텍스트는 시스템의 고정 폰트로 보여지고, 탭 / 엔터 / 스페이스로 편집한 모양 그대로

인터넷 화면에 나타납니다. <pre> 태그를 사용할 때 주의해야 할 점은 이 태그 안에서 다른 태그를 사용하지 않아야 됩니다.

★내용을 가운데로 정렬하는 <center> 태그

<center> 태그는 텍스트 / 이미지, 테이블 등을 가운데로 정렬시킬 때 사용합니다. 다른태그에 비해서 초보분들도 익숙한

태그라 생각됩니다. <center></center> 태그에 포함되는 모든 텍스트는 인터넷 화면의 너비에 대하여 가운데로 정렬되서

화면에 표시됩니다.

★구분선을 그리는 <hr> 태그

<hr> 태그는 Horizontal ruler의 약어로서 수평선을 그려주는 태그입니다. <hr> 태그를 사용하면 자동으로

줄바꿈이 실행되기 때문에 문단을 구분하는 용도로 사용합니다.

<hr> 태그만 사용해서 수평라인을 출력하면 기본적인 수평선이 출력되지만 이보다 조금 더 두꺼운 라인을 표현하고 싶다면

size를 <hr> 태그 내에 지정할 수 있습니다. 이와 같은 <hr> 태그 내부에 다양한 요구를 해결해 주기 위해 사용하는 속성이 있습니다.

예문)

속성 내용

width 브라우저의 너비에 대한 비율이나 픽셀 수로 수평선의 길이를 지정

size 수평선의 두께를 지정, 픽셀수로 지정

align 수평선의 정렬방법을 설정. 문서의 너비가 수평선의 너비보다 짧았을 때 사용. 기본적으로 가운데 정렬이

적용되고 왼쪽 정렬은 "left", 오른쪽 정렬은 "right", 가운데 정렬은 "center"로 지정

noshade 수평선의 음영 효과를 주지 않아서 그림자 없는 평면 느낌의 수평선을 만든다.

color 수평선의 색상을 지정

color 속성을 사용해 색상을 지정하면 noshade 기능이 적용되 수평선이 평면으로 표시됩니다.

아무 속성을 지정하지 않는다면 문서의 가로 폭에 맞게 회색의 수평선이 삽입됩니다.

★제목을 위한 <Hn> 태그

<Hn> 태그는 headline의 약어로 문서의 제목을 위해 사용되는 태그입니다. n은 1~6까지의 숫자입니다.

제목 글자의 크기는 6단계로 나타낼 수 있으며, 숫자가 작을수록(H1) 제목의 크기는 크고, 숫자가 클수록(H6)

제목의 크기는 작습니다. <Hn> 태그 안에 align 속성을 사용해 제목문자열의 위치를 정렬할 수 있습니다.

예문)