HTML - <br>태그, <p>태그
HTML - <br>태그, <p>태그
HTML이란? - http://server-talk.tistory.com/1
HTML - 문법과 주의사항 - http://server-talk.tistory.com/102
HTML - 목록을 만드는 태그 - http://server-talk.tistory.com/103
| <br> 태그 줄바꿈을 하는 태그 |
<br> 태그
<br> 태그는 line break 약자로 줄바꿈을 할때 사용합니다.
<br>태그는 닫아주는 태그가 없는 빈 태그<empty tag> 입니다 하지만 xhtml에서는 <br/> 태그로, 열고 다는 태그를 대신합니다.
예제)
<html> <head> <meta charset="utf-8"> <title>줄바꿈을 하는 태그</title> </head> <body> br태그는 line break 약자로 줄바꿈을 할때 사용합니다.<br> br태그는 닫아주는 태그가 없는 빈태그 입니다 </body> </html>
| <p> 태그 문단을 구분하는 태그 |
<p> 태그
<p> 태그는 paragraph 약자로 문단을 구분할 때 사용합니다 <p>태그 앞뒤로 여백이 들어가는 <br>이 두번 들어간 것과 같이 나오게 됩니다.
* <p> 태그는 앞뒤로 여백이 들어가는대 <br> 태그가 두번 들어간 것과 같은 결과가 나오게 됩니다.
예제)
<html> <head> <meta charset="utf-8"> <title>문단을 구분하는 태그</title> </head> <body> <p>p태그는 paragraph 약자로 문단을 구분할때 씁니다.</p> <p>p태그는 앞뒤로 여백이 들어가는 br태그가 두번 들어간 것과 같이 나오게 됩니다. </p> </body> </html>
| <div> 태그 영역을 나누는 태그 |
<div> 태그
<div> 태그는 division의 약자로 레이아웃을 나눌 때 주로 쓰입니다. 태그의 특성상 가로 크기가 영역에 꽉차게 설정되는데, CSS의 float 속성을 이용하면 내용에 꽉 붙게 설정할 수도 있습니다. 가로(width), 세로(height) 크기를 지정할수 있고 테이블 대체하며 레이아웃 배치 용도로 주로 쓰입니다
div 영역만 지정
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div> 단순히 영역만 지정 </div> </body> </html>
div 지정된 영역에 바탕색 지정
1) background: 색상
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red";> 지정된 영역에 바탕색을 설정 </div> </body> </html>
div 가로 세로 크기 설정
1) width : 세로 크기
2) height : 가로크기
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red ; width: 210px ; height: 20px"> 가로 세로 크기 설정 </div> </body> </html>
div 영역 안쪽 여백 설정
1) padding : 여백의 순서는 윗쪽 오른쪽, 아래쪽, 왼쪽입니다 각각의 여백을 지정하지 않고, 하나만 쓰면 동일한 여백이 정용됩니다.
2) padding : 윗쪽, 오른쪽, 아래쪽, 왼쪽
<html> <head> <meta charset="utf-8"> <title>영역을 나누는 태그</title> </head> <body> <div style="background: red ; width: 210px ; height: 20px ; padding: 30px 20px 30px 20px ;"> 영역 안쪽 여백 설정 </div> </body> </html>
