소개
HTML 에서 <mark> 태그는 텍스트의 중요성을 나타내기 위해 텍스트의 일부를 강조 표시하거나 마크하는 데 사용됩니다. 이 랩에서는 <mark> 태그를 사용하여 강조 표시된 텍스트를 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 파일 설정
시작하려면 index.html 파일을 생성하고 HTML 파일의 기본 구조를 설정합니다. 다음 코드를 삽입합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Highlighted Text with Mark Tag</title>
</head>
<body></body>
</html>
마크업에 텍스트 추가
<body> 태그 사이에 텍스트를 추가합니다. 이 예제에서는 문장 내에서 "Brown fox" 텍스트를 강조 표시합니다.
<body>
<p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>
기본 색상 변경을 위한 CSS 스타일 추가
기본적으로 강조 표시된 텍스트는 노란색 배경색과 검은색 텍스트 색상을 갖습니다. <mark> 태그에 CSS 를 추가하여 이러한 색상을 변경할 수 있습니다. 예를 들어, 강조 표시된 배경색을 빨간색으로, 텍스트 색상을 흰색으로 변경하려면 다음 CSS 스타일을 추가합니다.
<style>
mark {
background-color: red;
color: white;
}
</style>
(선택 사항) 스타일 지정을 위한 Class 선택자 추가
페이지에 강조 표시된 텍스트가 여러 개 있고 모두 동일한 방식으로 스타일을 지정하려는 경우, <mark> 태그에 클래스를 추가하고 CSS 클래스 선택자를 추가할 수 있습니다. 다음 예제에서는 highlight라는 클래스를 <mark> 태그에 추가한 다음 CSS 를 사용하여 스타일을 지정합니다.
<body>
<p>
The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
</p>
<p>The <mark class="highlight">sun</mark> is a star.</p>
</body>
<style>
.highlight {
background-color: green;
color: white;
}
</style>
요약
이것이 전부입니다! HTML 에서 <mark> 태그를 사용하여 강조 표시된 텍스트를 만드는 방법을 배웠습니다. <mark> 태그와 몇 가지 CSS 스타일을 사용하면 독자의 주의를 텍스트의 중요한 부분으로 쉽게 끌 수 있습니다.
