하루의 일상💜

[HTML] 웹 문서에 다양한 서식 태그 입력하기 본문

HTML

[HTML] 웹 문서에 다양한 서식 태그 입력하기

도하루박 2022. 9. 17. 13:00
반응형
텍스트 굵게 표시하기 

<strong>, <b>

두 태그는 표현은 동일하지만 사용 용도가 다르다.

접근성이란 누구나 쉽게 이용하고 접근할 수 있는 것으로 <strong>을 사용할 경우 브라우저에서 웹 접근성으로 인식되며, 스크린 리터로 페이지를 읽을 때 강조하여 읽어줄 수 있다. 예) 시각장애인 낭독기 등

그렇기 때문에 <strong>이 접근성에 더 좋다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	안녕하세요 <strong>박은지</strong>입니다.
</body>
</html>

 

결과창

텍스트 기울이기

<i>, <em>

<i>태그는 마음속의 생각이나 용어, 관용구 등에 사용하며 단순히 화면의 텍스트를 이태릭체로 표현한 것이고

<em>태그는 그 내용이 중요하다는 의미도 함께 포함 되어 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	안녕하세요 <em>박은지</em>입니다.
</body>
</html>

결과창

텍스트 하이라이팅 효과

<mark> 

텍스트에 하이라이팅 효과를 준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	안녕하세요 <mark>박은지</mark>입니다.
</body>
</html>

결과창

텍스트에 줄긋기

<del>, <ins>

<del>태그는 텍스트 중앙에 가로 줄을 그어서 텍스트를 지운 것과 같은 효과를 낸다,

<ins>태그는 텍스트 밑에 선을 추가하여 텍스트 강조효과를 낸다.

추가로 <br>은 줄바꿈 태그이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	안녕하세요 <del>박은지</del>입니다.<br>
	안녕하세요 <ins>박은지</ins>입니다.
</body>
</html>

결과창

위 첨자, 아래 첨자

<sup>, <sub>

위 첨자와 아래 첨자를 주는 효과로 수학용어, 과학용어로도 쓰인다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	안녕하세요 <sup>박은지</sup>입니다.<br>
	안녕하세요 <sub>박은지</sub>입니다.<br>
	O<sub>2</sub>
</body>
</html>

결과창

내용을 명령어로 인식하지 못하도록 하는 문법

화면상에 "" 나 & 같은 태그를 사용해야 할때가 있을 것이다. ""같은 경우는 명령어로 인식할 수 있기 때문에 이를 입력할 수 있는 문법들이 있다. 또는 텍스트 사이에 공백을 입력할때 스페이스바를 이용해 아무리  띄어줘도 인식하지 못한다. 그렇기 때문에 그에 맞는 문법태그를 사용해줘야 한다.

< : &lt; (less than)
> : &gt; (greater than)
& : &amp; (ampersand)
" : &quot; (quotation)
공백 : &nbsp;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	&lt;행복하세요&gt;<br>
	LOVE&amp;PEACE<br>
	&quot;행복하세요&quot;<br>
	행복&nbsp;&nbsp;&nbsp;하세요
</body>
</html>

결과창

 

반응형
저작자표시 (새창열림)

'HTML' 카테고리의 다른 글

[HTML] 회원가입 입력 창 만들기  (0) 2022.09.17
[HTML] HTML 요소의 종류(display)  (0) 2022.09.17
[HTML] 테이블 태그 표 만들기, 행과 열 합치기  (0) 2022.09.17
[HTML] 리스트 태그 작성하기, type 값 변경하기  (0) 2022.09.17
'HTML' Related Articles more