소개
HTML 에서 <em> 태그는 웹 페이지의 특정 텍스트에 강조 또는 중요성을 추가하는 데 사용됩니다. 특정 콘텐츠를 강조하고 눈에 띄게 만드는 데 매우 유용합니다. 이 랩에서는 HTML 에서 <em> 태그를 사용하는 방법과 기본 구문을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
헤더 추가하기
먼저, index.html이라는 HTML 파일을 생성하고 선호하는 코드 편집기에서 엽니다.
HTML 파일에 제목 헤더를 추가하는 것으로 시작해 보겠습니다. index.html 파일에 다음 코드를 입력하십시오.
<!doctype html>
<html>
<head>
<title>HTML Em Tag Lab</title>
</head>
<body></body>
</html>
HTML 태그 사용하기
이제 HTML 파일을 만들었으니, <em> 태그를 사용할 차례입니다. 다음 몇 단계에서 이 태그와 기본 구문을 사용하는 방법을 배우겠습니다.
HTML 파일에 짧은 단락을 추가하고 <em> 태그를 사용하여 특정 단어를 강조하는 것으로 시작하십시오. 다음은 예시입니다.
<p>HTML <em>Emphasized</em> text is important for your web page.</p>
강조 텍스트 추가하기
<em> 태그를 사용하여 문장에서 여러 단어를 강조할 수도 있습니다. 다음은 예시입니다.
<p><em>HTML</em> stands for <em>HyperText Markup Language.</em></p>
CSS 를 사용하여 HTML 태그 스타일 지정하기
기본적으로 강조된 텍스트는 이탤릭체로 표시됩니다. 하지만 CSS 를 사용하여 <em> 태그의 스타일을 사용자 정의할 수도 있습니다. 다음은 예시입니다.
<style>
em {
font-style: normal;
font-weight: bold;
}
</style>
<p><em>CSS is</em> used to style HTML web pages.</p>
링크 추가하기
링크 내에서 <em> 태그를 사용하여 앵커 텍스트를 강조할 수도 있습니다. 다음은 예시입니다.
<a href="https://www.wikipedia.org"
><em>Wikipedia</em> is a free online encyclopedia.</a
>
요약
축하합니다! 이 랩에서는 HTML <em> 태그에 대해 배우고, 웹 페이지에서 텍스트에 강조 또는 중요성을 추가하는 방법을 익혔습니다. 또한 CSS 를 사용하여 <em> 태그의 스타일을 사용자 정의하는 방법도 배웠습니다. HTML 태그와 요소의 마스터가 되기 위해 계속 연습하십시오.
