HTML 아래 첨자 텍스트

HTMLBeginner
지금 연습하기

소개

HTML 에서 <sub> 태그는 순전히 타이포그래피적인 이유로 아래 첨자로 표시되어야 하는 인라인 텍스트를 지정하는 데 사용됩니다. 이 태그 내부의 내용은 일반적으로 더 작은 텍스트를 사용하여 낮아진 기준선으로 렌더링됩니다. 이 랩에서는 HTML 에서 <sub> 태그를 사용하여 아래 첨자 텍스트를 표시하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 기본 구조 추가

index.html이라는 새 파일을 생성합니다.

기본 HTML 구조를 생성하기 위해 다음 코드를 index.html에 추가합니다.

<!doctype html>
<html>
  <head>
    <title>HTML Sub Tag Lab</title>
  </head>
  <body></body>
</html>

sub 태그 추가

아래 첨자 텍스트를 생성하기 위해 <body> 요소 안에 다음 코드를 추가합니다.

<p>My chemical formula is H<sub>2</sub>O.</p>

이 코드는 "My chemical formula is H2O" 텍스트를 표시하며, 여기서 "2"는 아래 첨자로 표시됩니다.

index.html 파일을 저장하고 웹 브라우저에서 열어 출력을 확인합니다. 아래 첨자 텍스트 "H2O"를 볼 수 있습니다.

요약

이 Lab 에서는 HTML 에서 <sub> 태그를 사용하여 아래 첨자 텍스트를 표시하는 방법을 배웠습니다. 이는 화학식 및 기준선이 낮아져야 하는 다른 유형의 텍스트를 표시하는 데 유용합니다. 이 Lab 에 설명된 단계를 따르면 HTML 코드에 <sub> 태그를 쉽게 추가하고 아래 첨자 텍스트를 만들 수 있습니다.