티스토리 뷰
html 문서 모양
1. <br> 태그로 줄 바꾸기
태그 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
<html> <head> <title> br태그로 줄을 바꿔봅시다!!</title> </head> <body> 한줄바꾸기<br> 두줄바꾸기<br><br> 세줄바꾸기<br><br><br> 네줄바꾸기<br><br><br><br> 끝!!! </body> <html> |
2. 문단 구분하기
|
<p align="정렬방식"> ㅇㅇㅇㅇㅇㅇ</p> |
|
속성 |
설명 |
|
align="정렬방식" |
정렬 방식을 지정하는 것으로 속성값은 left는 왼쪽, right는 오른쪽, center는 가운데 정렬을 뜻한다. |
아래는 <p>태그를 사용한 예로, <p>태그 앞뒤로 빈 줄이 생긴다.
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
<html> <head> <title>p태그로 문단나누기</title> </head> <body> <p>헌책방<br><br><br> 살포시 내려앉은 먼지는<br> 빛바랜 종이위에<br> 새로운 이야기를 써내려가고 있다<br><br> 가게 한편에 자리잡은 적막은<br> 이따금씩 들리는 짧은 종소리에도<br> 흔들림이 없다<br><br> 그곳엔 그런 이야기가 있었다<br> 잊혀진 이야기가 만든 이야기<br> 조금은 낡고 느린 이야기</p> <p align=center>먼지<br><br><br> 먼지가 날아 네 어깨에 앉았다.<br><br> 순간 저 먼지라도 되고 싶었던<br> 내가 너무도 한심스러웠으나<br><br> 생각해보니 이미 네게<br> 나는 한 올의 먼지일 터니<br> 상관 없겠구나 싶었다.</p> <p align=right>한때 꽃<br><br><br> 네가 시드는 건<br> 네 잘못이 아니다.<br><br> 아파하지 말아라<br> 시드니까 꽃이다<br><br> 누군들<br> 살아 한때 꽃,<br> 아닌 적 있었던가</p> </body> </html> |
위 태그를 웹에서 열면 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
문단을 나누는 또 다른 태그로는 <div>태그가 있다.
<p> 태그와의 차이점은 태그 앞뒤로 빈 줄이 생기지 않는 다는 점이다.
|
<div align="정렬방식"> ㅇㅇㅇㅇㅇㅇ</div> |
<div>태그와 <p>태그를 함께 사용하여 차이점을 확인해 보자.
<div>태그 앞뒤로는 빈 줄이 생기지 않는다.
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
<HTML> <HEAD> <TITLE><DIV> 태그와 <P> 태그</TITLE> </HEAD> <BODY> <DIV>살포시 내려앉은 먼지는<br>빛바랜 종이위에<br> 새로운 이야기를 써내려가고 있다</DIV> <DIV>가게 한편에 자리잡은 적박은<br> 이따금씩 들리는 짧은 종소리에도<br 흔들림이 없다.</DIV> <P>그곳엔 그런 이야기가 있었다</P> <P>잊혀진 이야기가 만든 이야기</P> <P>조금은 낡고 느린 이야기</P> </BODY> </HTML> |
위 태그를 웹에서 열면 ↓ ↓ ↓ ↓ ↓ ↓ ↓
3. 수평선 그리기
|
<HR SIZE="굵기" WIDTH="길이" ALIGN="정렬방식" COLOR="색상" NOSHADE> |
|
속성 |
설명 |
|
size=“굵기” |
선의 굵기를 지정하는 것으로 속성 값의 단위는 픽셀 수이다. |
|
width=“길이” |
선의 길이를 지정하는 것으로 속성 값의 단위는 픽셀 수 또는 %를 사용할 수 있는데, %는 브라우저 창의 너비를 100%로 한 상대 비율을 의미한다. |
|
align=“정렬방식” |
정렬 방식을 지정하는 것으로 속성 값은 left, right, center등이 있으며 각각 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬을 나타낸다. |
|
color=“색상” |
선의 색상을 지정하는 것으로 이 속성을 지정하면 NOSHADE 속성도 자동적으로 적용된다. |
|
noshade |
수평선이 평면적으로 나타난다. |
아래는 <hr>태그를 사용한 문서이다, width 속성값의 500이나 700은 픽셀크기를 나타내고, 70% 90% 100%는 브라우저 창 너비의
각각 70% 90% 100% 크기를 의미한다.
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
<html> <head> <title>수평선 연습</title> </head> <body> <hr> <hr size="7" width="500" align="center"> <hr size="12" width="700" align="right"> <hr size="12" width="700" noshade align="right"> <hr size="15" width="70%" align="center" color="blue"> <hr size="15" width="90%" align="center" color="red"> <hr size="15" width="100%" align="center" color="green"> </body> </html> |
위 태그를 웹에서 열면 ↓ ↓ ↓ ↓ ↓ ↓ ↓
'기억하고 싶은 정보 > HTML 공부하기' 카테고리의 다른 글
| html 글자 모양 (제목 표시하기, font 태그, 글자 속성, 특수문자) (0) | 2018.07.02 |
|---|---|
| html 문서 설정 (배경색 설정하기 / 배경을 이미지로 설정하기 / 문서 기본글자색 설정하기) (0) | 2018.01.05 |
| HTML 이란? / HTML의 구성요소 / HTML의 기본구조 (0) | 2018.01.03 |