[HTML 기초] <br>, <p> 줄바꿈, 단락나누기
네이버 블로그는 html 모드를 지원하지 않지만 티스토리 사용자라면 html 사용법을 알아두면 좋죠!
물론 티스토리도 기본 글쓰기 에디터는 있지만 광고를 넣는다던가, 메인 스킨 꾸미는 데 있어서 html 만한 게 없습니다.
html 문서 만들기는 메모장이나 Edit plus와 같은 편집기에서 작성 가능한데요. [파일명 .html] 확장자를 붙여야 파일이 생성됩니다. 뭔지도 잘 모르겠는데 굳이 프로그램까지 깔아야 하냐 생각하시는 분들이라면 우선 티스토리 에디터에서 html 모드로 간단하게 익혀 본 뒤에 이용해보시는 것도 좋은 방법입니다.
HTML 문서 만들기
<title>은 웹 브라우저 상단의 타이틀이 되고,
<body>는 브라우저에 곧바로 내용이 출력됩니다.
HTML 태그 적용하기
웹 브라우저에 출력되는 어떤 내용에 효과를 주고자 할 때는 <body> ∙∙∙ </body> 태그 안에 속성을 지정하면 되는데요~
<body> 태그 안에 어떤 속성을 지정할 수 있는지 가장 기본적인 HTML 태그를 배워보겠습니다.
|
태그 |
의미 |
|
<br> |
개행 (줄바꿈) |
|
<p> |
단락 나누기 |
명령을 내려 응용해보겠습니다.
<body>∙∙∙</body> 사이만 보시면 돼요!
<br> 태그로 줄바꿈
우선 <body> 사이에 문자만 입력해 봤습니다. 어랏! html에서 엔터를 쳐서 줄 바꿈을 해줬는데 웹 브라우저에서는 적용이 되지 않네요?
→ html에서 아무리 엔터를 쳐 줄을 바꿔도 웹브라우저에서는 한 칸의 띄어쓰기로만 인식됩니다.
이번에는 문장마다 <br> 태그를 입력한 결과물인데요, <br> 태그는 'link break'를 의미하며, 따로 종료 태그 없이 단독으로만 사용되어 <br/>로 표기합니다.
→ 문장의 줄바꿈이 필요할 때에는 <br> 태그를 입력해주세요. 신기하죠? 제가 보기 편하시라고 저렇게 만든 건데 <br> 태그를 쓴 자리를 굳이 엔터칠 필요는 없습니다:) 여러 행을 만들고자 할 때에도 <br> 태그를 사용하시면 되는데, 2줄을 만들어야 하면 <br/><br/>, 3줄은 <br/><br/><br/>이런 식입니다.
HTML 문서를 몇 번 작성하시다 보면 줄바꿈 태그를 가장 많이 쓰시게 될 거예요.
<p> 태그로 단락나누기
바로 위 이미지에 <p> 태그를 넣어줬습니다. 'para-graph'의 약어로 종료 태그와 함께 사용해 '<p> ∙∙∙ </p>'로 사용합니다.
→ 문단의 단락을 나누고자 할 때에는 <p> 태그를 사용합니다.
<br> 태그와 <p> 태그 비교
<br>은 단순한 줄바꿈, <p> 태그는 줄바꿈 포함 단락의 시작과 끝을 설정해주는 것으로 '새로운 서식'이 시작됨을 의미합니다. <p> 태그는 단락을 나눠줌으로써 하나의 행이 더 생겨 <br> 태그를 두 번 사용한 효과가 되는데요. 여러 개의 행을 만들고자 할 때에는 <br> 태그를 여러 번 기술하면 되는 반면, <p> 태그는 하나의 단락 구성이므로 여러 번 사용해도 효과가 없습니다.
오늘 html 기초에서 가장 먼저 사용하는 태그와 함께 그 속성을 응용한 문서 세 줄을 만들어봤어요. HTML 태그 입력을 한 번도 안 해보신 분이라면 바로 지금부터 티스토리 HTML 모드를 켜고 장난 삼아 한 번 시작해보시는 건 어떠세요?
'중요한 거니까 일단 저장 > 온라인 정보' 카테고리의 다른 글
| [HTML 기초] <font> 태그로 문자 효과주기 (2) | 2020.09.29 |
|---|---|
| [HTML 기초] <h1> ~ <h6> 제목태그 사용하기 (6) | 2020.09.21 |
| [HTML 기초] HTML 태그와 기본 구조 (4) | 2020.09.12 |
| 카카오톡 대화내용 복구방법 (4) | 2020.09.09 |
| 맥북 단축키 모음 사전 (2) | 2020.08.15 |
