-
HTML - <p>태그 / <br>태그HTML/HTML 2020. 2. 26. 17:47
오늘은 <p> ~ </p> 태그와 <br> 태그에 대해서 알아보자!
[예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다. 저분은 백 법학박사이고, 이분은 박 법학박사이다. 작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다. </body> </html>우선, 문장이 저렇게 3개의 문장이 주어졌다.
하지만, 3개의 문장이 단락이 구분되는 것이 아니라 한 줄로 출력되는 것을 확인할 수 있다.
그렇다면 이 3개의 문장을 가지고 단락을 구분하고 싶다면 <p> 태그를 사용하면 가능하다.
[예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다.</p> <p>저분은 백 법학박사이고, 이분은 박 법학박사이다.</p> <p>작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다.</p> </body> </html>결과는 이렇게 단락이 구분되어 깔끔하게 3개의 문장이 나뉘어서 출력이 되는 것을 확인할 수 있다.
그렇다고 단락을 나눌 때 꼭 p태그만을 이용하는 것은 아니다.
우리는 <br> 태그를 통해 단락을 구별할 수 있다.<br> 태그는 생각하면 된다.
<br> 태그는 'void element'라고 해서 내용이 없는 태그를 의미한다.
그렇기 때문에 닫는 태그 없이 열리는 태그 하나만 있어도 된다.
<a> abcdefg </a>처럼 <a> 태그는 어디서부터 어디까지 인지를 지정해줘야 하는 태그인데, 이런 태그와는 다르다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다.<br><br> 저분은 백 법학박사이고, 이분은 박 법학박사이다.<br><br> 작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다.<br><br> </body> </html><br> 태그의 개수는 사용자가 마음대로 쓸 수 있다.
이처럼 p태그와 같이 단락을 구분할 수 있게 되었다.
하지만 단락만을 구분하고 싶다면 <p> 태그를 쓰는 것을 권장한다.
'HTML > HTML' 카테고리의 다른 글
HTML - <table>태그 (0) 2020.03.02 HTML - img태그 (0) 2020.02.29 HTML - <ul> 태그 / <ol>태그 (0) 2020.02.25 HTML - <a>태그와 속성 (0) 2020.02.24 HTML - 기본문법 (0) 2020.02.23