dev/HTML + CSS

HTML - 텍스트 관련 태그

꼿모 2023. 3. 3. 21:01

 

HTML 텍스트 관련 태그 

 

 * 제목 태그 

 h1, h2, h3, h4, h5, h6 

  • Heading : 제목 
  • 전체 내용을 예상할 수 있는 목차와 같은 역할을 한다.
  • HTML 논리 구조에서 매우 중요한 태그이다!
  • h1 태그는 한 페이지에 한 번만 사용하는 것을 권장한다. 
  • 스타일의 목적으로 h 태그를 사용하지 말자. 
  • h1~h6의 순서대로 작성해야 한다. 
  • 검색 엔진 사이트, 스크린리더, 사용자에게 중요한 정보가 된다.
  • 검색 엔진은 h 태그에 기반하여 결과물을 보여준다.

✏ 제목 태그를 잘 설정하는 것도 SEO(검색 엔진 최적화)에 도움을 준다. 검색어를 고려하고 어떻게 그룹핑하면 좋을지 고민하면서 작성하는 것이 좋다. 

※ SEO(Search Engine Optimization) : 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 

※ 스크린리더 : 컴퓨터 화면의 낭독 프로그램 / 전맹, 저시력, 난독증과 같은 학습장애, 노인, 다문화가족 등의 웹 접근성을 지원해 준다. 

<body>
    <h1>제목입니다</h1>
    <h2>제목입니다</h2>
    <h3>제목입니다</h3>
    <h4>제목입니다</h4>
    <h5>제목입니다</h5>
    <h6>제목입니다</h6>
</body>

 

 

 

 * a 태그 

 <a href=""></a> 


- href: 하이퍼텍스트를 참조하여 링크로 연결한다.

  •  tel : 전화번호
<a href="tel:010-0000-0000">전화 연결</a>

 

 

  •  mailto : 메일 주소
 <a href="mailto:google@gmail.com">메일 연결</a>

 

 


- target 속성값 

  • _self : 현재 창에서 링크된 웹 페이지가 열린다. (기본값)
<a href="hello.html" target="_self">hello</a>

 

  • _blank : 새 창에서 링크된 웹 페이지가 열린다.
<a href="hello.html" target="_blank">hello</a>

 

  • _parent : 현재 프레임의 부모 프레임에서 새 웹 페이지가 열린다. 부모 창이 존재하지 않으면 _self와 동일하다.
<a href="hello.html" target="_parent">hello</a>

 

  • _top : 최상위 프레임에서 링크된 웹 페이지가 열린다.
<a href="hello.html" target="_top">hello</a>

 

  • download : 링크 이동 대신 사용자에게 url을 저장할지 물어본다.
<a href="hello.html" download>파일 다운로드</a>

 

✏ 인라인(Inline) 요소이지만 예외적으로 블록 요소들을 감쌀 수 있다. 

 

 

 

 

 * <p> 

- paragraph의 약어로, 하나의 문단을 의미한다. 

- 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있다. 

- 블록 요소이다. 

※ lorem / 한글 입숨(http://hangul.thefron.me/) 등 문장 더미로 체크해 볼 수 있다. 

<p> 
	안녕하세요 안녕하세요 
 </p>

 

 

 * <br> 

- break(link break)의 약어로 줄을 나누는 역할을 한다. 

- HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어있어도 실제 화면에는 한 줄로 보인다. 

- 텍스트 안에 줄 바꿈 처리를 해주며, 2번 연속 사용하지 않는다. 

 

※ 여백은 CSS를 사용하여 적용하자. 내용이 없는 p 태그나 br 태그를 여러 번 사용하지 않는다!

화면에 따른 줄 바꿈 처리를 위해 br 대신 span 태그와 CSS display 속성 또는 wbr 태그를 사용하자.  

 

 

 * <wbr> 

- 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낸다. 

- 한글의 경우 word-break:keep-all 속성과 함께 사용해야 한다. 

  • word-break : 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로우 할 때 줄을 바꿀지 지정해 준다. 
  • keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 않는다. 단어 기준으로 줄 바꿈 한다.
  • break-all : 영어 전체를 한 단어로 인식하지 않고 강제로 줄을 바꾼다. 글자 단위를 모두 자른다.
.ko{
 word-break:keep-all;
}

.en{
 word-break:break-all;
}

※ 요소에 width나 height를 지정해야만 적용된다.

 

 

 * <code> 

- 짧은 코드 조각 한 줄을 나타낼 때 사용한다.

- 텍스트의 고정 폭 글꼴을 사용한다.

<code>짧은 코드</code>

 

 

 * <pre> 

- HTML에 작성한 내용 그대로를 표현한다. 

- 텍스트는 고정 폭 글꼴을 사용하고 공백을 그대로 유지한다. 

- 공백이 필요한 코드나 텍스트를 사용해 그림을 그릴 때 사용한다. 

 <pre>
 
 ∧  _  ∧
(。・ω・。)つ━☆・*。
⊂ ノ ・゜+.
しーJ °。+ *´¨)
.· ´¸.·*´¨) ¸.·*¨)
(¸.·´ (¸.·'*
 
 </pre>

 

 

 * <strong>  

- 중대하거나 긴급한 단어 또는 문장을 나타낸다. 

- 기본적으로 굵은 글꼴이 적용된다. 

- 스크린 리더를 사용하여 낭독할 때 strong 태그 사이에 있는 문자는 거센 억양으로 소리를 내어 발음한다.

<strong>
 	경고! 이런 행동은 매우 위험합니다! 
</strong>

 

 

 * <b> 

- 과거에 굵은 글씨 처리를 위해 사용했다.

- 사용하지 않는 걸 권장하지만 에디터 개발 등 필요한 경우도 존재한다. 

 

 

 * <em> 

- Emphasis : 강조, 강한 어조 

- 텍스트의 강세, 콘텐츠를 강조해서 읽었으면 하는 부분을 지정한다. 

- 억양을 강조하여 문장의 의미를 변경하는 데 사용된다. 

- 요소를 중첩하면 더 큰 강세의 뜻이 된다. 

- 기본적으로 기울임꼴이 적용된다. 

- 한국에서는 잘 사용되지 않으며 주로 영문에 사용된다. 

 

 

 * <i> 

- 외국어, 등장 인물의 생각 등 일반적인 산문에서 벗어난 경우에 사용한다. 

- 기본적으로 기울임 꼴이 적용된다. 

- italic의 약자이다.

<i> 기울여서 표시됩니다 </i>

※ strong, b, em, i 등 모두 굵게, 기울임 등의 스타일을 위해서 사용하지 않도록 하자! 스타일은 CSS!

 

 

 * <q> 

- 줄 바꿈 없이 짧은 인용문에 사용된다. 

- cite 속성을 사용해서 출처 url을 넣어줄 수 있다. 

<p>
	나태주 시의 한 구절이야. 
	<q>"나는 이제 너 없이도 너를 좋아할 수 있다."</q>
</p>

<!-- 
<q cite="url"> 인용문 </q>
-->

 

 

 * <blockquote> 

- 긴 인용문을 나타낸다. 

- 반드시 블록 타입의 요소만을 포함해야 한다.

- 브라우저에는 보통 들여쓰기로 표현된다. 

<blockquote>
	<p>
	 "만약 네가 오후 네시에 온다면 난 세시부터 행복해질 거야. 
	 그리고 널 만날 시간이 가까워질수록 점점 더 행복해지겠지. 
	 네시가 되면, 흥분해서 안절부절 못할 거야. 
	 그래서 행복이 얼마나 값진 것인지를 알게 될 거야."
	</p>
</blockquote>

 

 

 * <cite> 

- 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 한다. 

<p><cite>Mona Lisa</cite> 레오나르도 다 빈치</p>

 

 

 * <address> 

- 물리적 연락처 정보(url, 이메일, 전화번호, SNS, 좌표 등)를 담고 있다. 

- 연락처가 가리키는 개인, 조직, 단체의 이름을 반드시 작성하자! 

- 페이지 헤더 또는 푸터에 배치한다. 

- <article> 태그 내에 사용하여 글의 작성자를 나타낼 수도 있다. 

- 연락처 외의 정보를 담아서는 안된다. 

✏ 학원, 병원, 식당처럼 직접적인 연락처가 필수인 곳이라면 이 태그를 꼭 사용하는 것이 좋다. 

 

 

 * <mark> 

- 형관펜으로 칠한 것 처럼 표현된다. 

- 하이라이트 텍스트를 정의할 때 사용한다. 

- 보통 검색 결과에 대한 시각적 효과를 위해 주로 사용한다. 

- background-color 속성을 이용하여 색상을 바꿀 수 도 있다. 

  <mark>
    마크 효과입니다. 
    </mark>
    
    
<!-- CSS
mark {
background-color: pink
}
-->

 

 

 * <abbr> 

- 약어(abbreviation)임을 나타내는 태그이다. 

- title을 이용하여 커서가 올려졌을 때만 설명이 나타나게 할 수도 있다. 

<abbr>CSS</abbr> (Cascading Style Sheets)

<abbr title="Cascading Style Sheets">CSS</abbr>

 

 

 * <dfn> 

- 현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다. 

<p>
	<dfn id="html">
		<abbr title="HyperText Markup Language">HTML</abbr>
	</dfn> 
	웹 페이지의 의미론과 구조를 만드는 데 사용되는 마크업 언어입니다.
</p>

 

 

 * <sup> 

- 위 첨자 요소로 지수, 서수 표기를 위해 사용한다. 

<p> English: 5<sup>th</sup> </p>

 

 

 * <sub> 

- 아래 첨자 요소로 각주, 변수, 화학식 등을 표기하기 위해 사용한다. 

CO<sub>2</sub>

※ 작은 글씨 표현 용도로 사용하면 안 된다. 스타일은 CSS!

 

 

 * <kbd> 

- 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다. 

<p>복사 단축키 <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!