본문 바로가기

HTML / CSS / Java Script

정리하는 태그 HR, BR, P, CENTER, PRE

정리태그

웹문서는 태그로 작성하기 때문에 화면에 표시된 문단이 웹브라우저에 그대로 나타나는 것이 아니다.
줄이나 문단을 바꾸는 태그를 문단이나 문자 정렬, 수평선 등을 이용해서 정리하는 방법이 있다?



수평선을 만드는 태그는 <HR>인데 수평선을 만들 때에 속성을 설정하면 색상, 높이, 넓이, 정렬 방식, 입체 여부 등의 효과를 줄 수 있다.

<HR> 태그 속성

size : 입력한 크기만큼의 높이를 설정
width : 입력한 크기만큼 넓이를 설정 크기를 픽셀 단위로 지정할 수 있고, 웹브라우저의 넓이에 대한 비율(%)로 지정할 수도 있다.
align : 정렬 방식(left, right, center)
color : 선의 색상을 설정
noshade : 입체감이 없는 선을 만듦


hr태그


<!-- 웹 브라우저에 꽉 차는 수평선 --><BR>
<HR> 
<!-- 높이가 10인 수평선 --><BR>
<HR size="10"> 
<!-- 높이가 10이고 입체감 없는 수평선 --><BR>
<HR size="10" noshade> 
<!-- 넓이가 100 픽셀인 수평선 --><BR>
<HR width="100"> 
<!-- 넓이가 100 픽셀이고 왼쪽에 정렬된 수평선 --><BR>
<HR width="100" align="left"> 
<!-- 넓이가 웹 브라우저 넓이의 50%인 수평선 --><BR>
<HR width="50%"> 
<!-- 빨간색 수평선 --><BR>
<HR color="red"> 
<!-- 파란색 수평선 --><BR>
<HR color="0000FF">  

참고

주석처리하기

코딩을 할때 웹브라우저에서 보이지 않게 하면서 소스내에 어떤 표시를 하거나 필요한 설명을 넣어 주고 싶을때에는 주석으로 처림합니다.
위와 같이 <!-- 와 --><BR> 사이에 주석으로 입력할 내용을 적으면되요.
티스토리이용자면 스킨 수정할때 많이 봤을꺼에요 -0-



br, p 차이


웹문서는 한글이나, 워드프로세서처럼 엔터를 치면 줄이 바뀌는 게 아니고 원하는 부분에 태그를 사용해서 줄이나 문단을 바꿔야 한다.
줄을 바꿀 때에는 <BR>, 문단을 바꿀 때에는 <P> 태그를 사용합니다.
<P> 태그는 <P align=center> 내용 </P> 처럼 시작 태그와 끝나는 태그를 쌍으로 사용하기도 하고 속성을 지정할 수도 있습니다.



문서를 가운데로 정렬할 때에 쉽게 사용할 수 있는 <CENTER>태그가 있는데, <CENTER> 내용 </CENTER>으로 입력하면 가운데 정렬됨



HTML 태그를 사용하다 보면 태그를 아무리 적절하게 사용해도 불편을 느낄 때가 있다.
입력한 그대로 표시되는 <PRE>태그를 사용한다.
<PRE>...</PRE> 안에 태그를 입력하면 그대로 보입니다.