[HTML] 웹 문서에 다양한 서식 태그 입력하기
텍스트 굵게 표시하기
<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>
내용을 명령어로 인식하지 못하도록 하는 문법
화면상에 "" 나 & 같은 태그를 사용해야 할때가 있을 것이다. ""같은 경우는 명령어로 인식할 수 있기 때문에 이를 입력할 수 있는 문법들이 있다. 또는 텍스트 사이에 공백을 입력할때 스페이스바를 이용해 아무리 띄어줘도 인식하지 못한다. 그렇기 때문에 그에 맞는 문법태그를 사용해줘야 한다.
< : < (less than)
> : > (greater than)
& : & (ampersand)
" : " (quotation)
공백 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<행복하세요><br>
LOVE&PEACE<br>
"행복하세요"<br>
행복 하세요
</body>
</html>