-
Tag - 텍스트 관련프론트엔드/HTML 2020. 8. 18. 17:24
블록 레벨의 텍스트 태그
<hn> 태그 - 제목 표시하기
<h1> 제목입니다 </h1> <h2> 제목입니다 </h2> <h3> 제목입니다 </h3>
<body> 태그 안에서 글의 제목을 표시할 때 써준다.
<hn> 태그는 제목을 뜻하는 'heading'의 줄임말인 h와 숫자(1~6)를 사용해 <h1>~<h6>까지 표현한다.
<p> 태그 - 단락 만들기
<p> 단락입니다 </p>
'p'는 'paragraph'의 줄임말로, 텍스트 단락을 만드는데 사용한다.
<br> 태그 - 줄 바꾸기
<span> 줄 바꾸기 예제입니다. </span> <br> <span> 줄 바꾸기 예제입니다. </span>
<br> 태그를 쓰면 줄바꿈이 된다.
<hr> 태그 - 수평 줄 넣기
<span> 줄 바꾸기 예제입니다. </span> <hr> <span> 줄 바꾸기 예제입니다. </span>
<hr>이 있는 줄에 긴 수평 줄을 넣는다.
<blockquote> - 인용문 넣기
<p> 인용문 테스트입니다 </p> <blockquote> 인용문 테스트입니다. 이 부분은 들여쓰기가 됩니다. </blockquote> <p> 인용문 테스트입니다 </p>
<blockquote> 사이에 텍스트를 넣어주면 해당 텍스트는 들여쓰기가 되서 다른 텍스트와 구별된다.
<pre> - 입력 내용 그대로 화면에 표시
<pre> 입력하는 대로 표시됩니다. </pre>
일반적인 방법으로 내용을 표현해줄 경우 내가 입력한 값 그대로 나오지 않는다.
별도의 명령이 없는 경우 자체적으로 깔끔하게 표시한다.
예를 들어 여러 개의 공백을 넣어도 브라우저 상에는 한 개의 공백만 표시된다.
<pre>를 쓰면 그 안에 있는 내용은 내가 쓴 내용 그대로 표시가 된다.
다만 <pre> 태그를 쓰면 웹 접근성이 떨어지기 때문에 사용을 잘 고려해야 한다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 목록(list) 관련 (0) 2020.08.19 Tag - 텍스트 관련 2 (0) 2020.08.18 HTML 문서 기본 구조 (0) 2020.08.18 태그(Tag)에 관해서 (0) 2020.08.18 HTML이란? (0) 2020.08.18