HTML sup 태그는 웹 페이지에서 텍스트를 위첨자 형식으로 표시할 수 있게 해줍니다. 이 랩에서는 sup 태그를 사용하여 위첨자 텍스트를 만드는 방법을 시연합니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 HTML 파일을 생성하고 기본적인 HTML 구조를 설정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Superscript Text</title>
</head>
<body></body>
</html>HTML 파일에 sup 태그를 추가합니다. sup 요소의 여는 태그와 닫는 태그 사이에 위첨자로 표시하려는 텍스트를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Superscript Text</title>
</head>
<body>
<p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
</body>
</html>CSS 를 사용하여 sup 태그의 글꼴 크기와 수직 정렬을 조정하여 스타일을 지정할 수 있습니다. 다음 CSS 코드를 HTML 파일에 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Superscript Text</title>
<style>
sup {
font-size: smaller;
vertical-align: super;
}
</style>
</head>
<body>
<p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
</body>
</html>위첨자 텍스트는 수학 표기법의 중요한 구성 요소입니다. sup 태그를 사용하여 지수와 거듭제곱을 나타낼 수 있습니다. 예를 들어, 다음 코드를 HTML 파일에 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Superscript Text</title>
<style>
sup {
font-size: smaller;
vertical-align: super;
}
</style>
</head>
<body>
<p>The value of 2<sup>3</sup> is 8.</p>
</body>
</html>이 랩에서는 HTML 의 sup 태그에 대해 배웠습니다. 위첨자 텍스트를 생성하고 지수와 거듭제곱을 나타내는 방법을 살펴보았습니다. 또한 CSS 를 사용하여 sup 태그의 스타일을 지정하는 방법도 배웠습니다. 이 랩에서 배운 기술을 통해 이제 HTML 페이지에 위첨자 텍스트를 쉽게 추가할 수 있습니다.
