[html기초] , br, pre, p 태그 사용법
html기초에서 제일 처음 다루었어야 하는 게 아닌가 싶은데요....
각 항목을 다루기에는 분량이 너무 적어서, 같이 묶어서 정리해 봤습니다.
|
<br> |
<br> 태그는 line break 약자로, 줄바꿈 할 때 사용합니다.
<br>태그는 끝태그가 없는 빈 태그(empty tag)입니다. 하지만
xhtml 에서는 <br /> 태그로, 열고 닫는 태그를 대신합니다.
<사용 예>
우선 아래에서 태그 작성 시 '오신 것을' 이후에 '환영 합니다'가
줄바꿈 되어 있지만, 실제 실행해 보면 한 줄로 나옵니다.
|
<html> <body> |
이번엔 <br>태그를 넣어 보겠습니다.
|
<html> <body> |
실행하면 중간에 줄 바꿈되었습니다.
이렇게 한 줄 짜리 문장을 줄바꿈 할 때 <br> 태그를 사용하지만
문단을 분리할 때는 <p> 태그를 사용합니다.
|
<p> |
<p>는 paragraph 약자로 문단을 구분할 때 씁니다.
<p>태그 앞뒤로 여백이 들어가는데 <br>이 두 번 들어간 것과 같은 결과가 나옵니다
사용 예: <p> 내용 </p>
|
<html> <body> <p>환영 합니다</p> </body> |
|
<pre> |
<pre> 는 Preformatted Text의 약자로, 입력한 대로 화면 출력되는 태그입니다.
문장 안에 있는 여백이나 줄바꿈도 그대로 표시됩니다
코드를 표시할 때 사용할 수 있습니다.
|
<html> <body>
<!-- CSS 코드는 이렇게 --> </body> |
<pre>실행 하면입니다. 줄바꿈이나 여백도 그대로 표시되네요..
|
|
는 non breaking space 의 약자인데요
태그는 아니고 공백을 넣는 기능을 합니다.
맨 위에 br 태그 사용 예에서 살펴 보았 듯이, html 코드 작성할 때
아무리 줄바꿈을 해 보았자, 실행 화면은 줄바꿈이 되지 않아요.
또한 공란을 아무리 많이 넣어도 하나 이상의 공란은 인식하지 않아요.
공란이 5개라면 1개만을 표시함.
사용 예 :
|
<html> <body> <p>환영 합니다</p> </body> |
html 코딩과 실행 화면을 대조해서 보시면 공백 구분이 좀 더 쉬우실 거예요.
HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)
CSS란? (HTML과 CSS의 차이, CSS 작성법)
html, css, javascript 주석 처리 방법
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
'html' 카테고리의 다른 글
| [html 기초] b, strong, em, i, cite, small 태그 (0) | 2014.03.18 |
|---|---|
| [html 기초] 제목 태그 h1, h2, h3, h4, h5, h6 (0) | 2014.03.18 |
| table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (7) | 2014.03.05 |
| html, css, javascript 주석 처리 방법 (2) | 2014.02.26 |
| [html 기초] head 에 들어가는 태그 (title, style, script, meta 태그) (2) | 2014.02.20 |
댓글