안녕하세요 위키드스마트입니다.
오늘은 html 태그를 이용하여, 텍스트를 표시하는 다양한 방법을 알아보겠습니다.
이전글 보기: https://sharingknowledge.tistory.com/361
html 문서에서 텍스트는 별다른 태그 없이도 <body> ... </body> 안에서 표시할 수 있습니다.
그러나 여러 줄로 이루어진 텍스트는 단락을 생성한 후에 단락 안에서 표시하는 것이 좋습니다.
html 문서를 작성할 때 입력한 줄 바꿈 문자는 완전히 무시되기 때문에 단락을 생성하지 않으면, 모든 테스트가 하나의 긴 줄로 표시되기 때문이죠.
- 먼저 줄 바꿈을 위해 단락태그인 p 태그를 이용할 수 있는데요, 단락태그인 p 태그를 이용하면 이렇게 자동적으로 단락의 전후에 빈줄이 추가됩니다.
- 새로운 단락을 시작하지 않고 줄바꿈을 원하면 <br> 태그를 사용합니다. <br>태그는 break 에서 나온 말로써, 종료태그를 가지지 않는 태그입니다.
- 줄바꿈이 화면 그대로 나오게 하기 위해선 pre 태그를 이용하면 이렇게 줄바꿈이 그대로 화면에 구현되어 나옵니다. pre는 previously formatted text에서 나온 용어로, pre 태그를 사용하면 개발자가 입력한 스페이스나 탭, 줄 바꿈이 그대로 유지됩니다.
헤딩(heading) 태그도 빼놓을 수 없는데요,
헤딩 태그는 <h1> 부터 <h6>까지 있습니다.
헤딩태그는 페이지의 머리기사 용도로만 사용해야 합니다. 글씨를 크게하거나 굵게 하기 위해
사용하면 안됩니다.
검색엔진은 헤딩을 사용하여 웹 페이지의 내용을 색인화하여 저장하기 때문에 사용자가 웹페이지의
헤딩만 보고 지나갈 수 있어, 헤딩을 사용해 문서의 중요한 키워드를 사용자에게 보여주는 것이 중요합니다.
<h1>이 가장 중요한 머리기사를 쓸 때 사용됩니다.
텍스트 서식
텍스트 서식을 지정하는 태그도 있는데요
<b>....</b> 불드체로 만들구요
<i>....</i> 이탤릭체로 만들구요
<strong>....</strong> 텍스트를 강하게 표시하라는 것을 의미하며 볼드체로 표기됩니다.
<em>....</em> 텍스트를 강조하라는 것을 의미하며 이탤릭체로 표기됩니다.
<code>....</code> 텍스트가 코드임을 표시하구요
<sup>....</sup> 위첨자
<sub>....</sub> 아래첨자를 표시합니다.
화면으로 구현된 모습은 아래와 같습니다.
알고 보니 참 쉽죠?
다음 글에선 리스트와 링크를 만드는 법에 대해 알아보겠습니다.
빠이~
'웹프로그래밍' 카테고리의 다른 글
| 모든 파이썬 프로그래머를 위한 20가지 실용적인 파이썬 라이브러리 (0) | 2019.03.16 |
|---|---|
| HTML 리스트와 링크 만드는 법 (0) | 2019.02.10 |
| HTML 문서의 기본 구조 (0) | 2019.02.06 |
| HTML 문서 구조 (0) | 2018.01.20 |
| 웹 프로그래밍 공부하는 순서 (0) | 2018.01.20 |