Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 텍스트 형식 강조:굵게, 기울임꼴 및 밑줄

주의를 끌기 위해 HTML로 텍스트의 서식을 지정하는 방법에는 여러 가지가 있습니다. 이 게시물에서는 HTML의 텍스트를 굵게, 기울임꼴 또는 밑줄로 지정하는 방법에 대해 설명합니다. 곧 포맷 전문가가 될 것입니다!

굵게

텍스트를 굵게로 설정 HTML5 이전의 HTML에서 굵게 표시하려는 텍스트를 <b>로 둘러싸는 것과 관련됨 태그:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is <b>bold</b></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5 Standard가 출시되었을 때 텍스트를 굵게 표시하는 방법이 <strong> 를 사용하는 것으로 변경되었습니다. 태그:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is also <strong>bold</strong></p>
   <script src="script.js"></script>
 </body>
</html>

<b>의 유일한 차이점은 및 <strong> 요소는 의미론입니다. 스크린 리더에는 <strong>가 표시됩니다. 태그를 추가하고 텍스트를 읽을 때 텍스트를 더 명시적으로 강조합니다. <b> 그것을 허용하지 않습니다.

기울임꼴

굵게와 동일 , 기울임꼴로 된 텍스트를 생성하기 위해 우리가 알고 있는 두 가지 다른 표준이 있습니다. HTML5 표준 이전에는 기울임꼴 텍스트를 <i>로 캡슐화하여 생성했습니다. 태그. 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <p>This text is in <i>italics</i></p>
   <script src="script.js"></script>
 </body>
</html>

HTML5가 표준이 되면서 <i> 보다 의미 있는 <em> 태그 꼬리표. "em"은 emphasis의 약자입니다. . <em> 태그는 사용자가 일반 텍스트와 강조 텍스트를 구분할 수 있도록 텍스트를 더 강조하도록 스크린 리더에 신호를 보냅니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

밑줄

HTML 밑줄이 그어진 텍스트는 철자가 틀린 단어를 나타내는 데 가장 자주 사용됩니다. 하이퍼링크로 혼동될 수 있는 곳에서는 사용하지 마세요. <u>로 텍스트 마크업 태그를 사용하여 서식을 표시한 다음 CSS를 사용하여 원하는 밑줄 스타일 유형을 표시합니다. 

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <style>
     p u {
       text-decoration: underline red wavy;
     }
   </style>
 </head>
 <body>
   <p>This is a <u>mispelled</u> word</p>
 </body>
</html>



결론

이 기사에서 우리는 HTML의 많은 형식화 태그에 대해 논의했습니다. 및 의 경우 화면에서 볼드체 및 이탤릭체로 보이는 요소에 의미 체계를 적용하는 데 사용합니다. 스크린 리더에서는 해당 단어가 강조됩니다. 태그를 사용하여 텍스트에 밑줄을 긋는 데 사용할 수 있습니다. 이 세 가지 외에도 더 많은 서식 옵션이 있습니다.