티스토리 뷰

Web/HTML

[Web/HTML] HTML - 텍스트 입력

poopooreum 2024. 4. 14. 16:20
반응형

✏️ 제목을 나타내는 <hn> 태그

<h1> 내용 </h1>

//웹 문서에서 제목을 나타내는 태그로서 종류는 <h1> ~ <h6> 태그까지 있으며
//숫자가 작아질수록 글자의 크기가 작아지며 자동으로 줄바꿈을 해줌

✏️ 텍스트 단락을 나타내는 <p> 태그

<p> 내용 </p>

// <p>와 </p>태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 줄바꿈이 생김
// 편집기에서 줄바꿈을 시도하더라도 웹사이트상에서는 변함이 없음

✏️ 줄바꿈을 해주는 <br> 태그

<p> 안녕하세요 <br> 잘 부탁드립니다</p>

// <br>태그는 줄을 바꿔주고 다른 태그들과는 달리 닫는 태그가 없음
// <br>태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 생긴 것처럼 화면에 표시할 수 있지만
// 실제로는 단락이 만들어진 것이 아님 => <p>태그를 사용해서 텍스트 단락을 만들기

✏️ 인용할 때 쓰는 <blockquote> 태그

<blockquote> 인용문 </blockquote>
/*
일반적으로 남의 말을 인용할 때는 ""큰 따옴표를 사용해 표시하지만 웹 브라우저에서는 인용문을 인식할 방법이 없음
브라우저가 인용문을 인식하게 하기 위해서는 <blockquote> 태그를 사용해야 함
*/

✏️ 텍스트를 굵게 표시해주는 <strong>, <b> 태그

<strong> 굵게 강조할 텍스트 </strong>
<b> 굵게 표시할 테스트 </b>

// 둘이 표면적으로는 별 차이가 없지만 구분하는 이유는 화면 낭독기의 기능 차이
// 경고나 주의사항처럼 중요한 내용들은 <strong> 태그로, 키워드처럼 단순한 글자만 굵게 표시할 때는 <b> 태그를 사용
// 즉, 보이는 것이 아니라 의미 중심으로 나뉜다

✏️ 기울인 텍스트를 입력해주는 <em>, <i>태그

<em> 이탤릭체로 강조할 텍스트 </em>
<i> 이탤릭체로 표시할 텍스트 </i>

//텍스트를 기울여 표시할 때 사용하는 태그들
// <em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
// <i> 태그는 마음속의 생각이나 용어, 관용구 등에 사용

✏️ 다양한 텍스트 관련 태그

//<abbr> 태그 : 줄임말을 표시하고 title속성을 함께 사용할 수 있음
<abbr title = "Internet of Things"> IOT </abbr>

//<cite> 태그 : 웹 문서나 표스트에서 참고 내용을 표시
<p>내가 경험한 가장 흥미지진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite>중</p>

//<code> 태그 : 컴퓨터 인식을 위한 소스 코드
<code> function savetheLocal()</code>

//<small> 태그 : 부가 정보처럼 작게 표시해도 되는 텍스트를 사용할 때
<p>가격 : 13,000원 <small>(부가세 별도)</small></p>

//<sub> 태그 : 아래 첨자를 표시하는 태그
<p>물의 화학식은 H<sub>2</sub>0입니다</p>

//<sup> 태그 : 윗 첨자를 표시하는 태그
<p>E=mc<sup>2</sup></p>

//<s> 태그 : 취소선을 표시하는 태그
<p><s>34,000원</s>19,000원</p>

//<u> 태그 : 밑줄을 표시하는 태그
<u>텍스트에 단순히 밑줄 긋기</u>

//<ins> 태그 : 공동 작업 문서에서 새로운 내용을 삽입하는 태그
<ins>새로운 내용을 삽입합니다.</ins>

//<del> 태그 : 공동 작업 문서에서 기존 내용을 삭제하는 태그
<del>기존 내용을 삭제합니다.</del>

 

 

 

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함