HTML 작은 글씨

HTMLBeginner
지금 연습하기

소개

이 랩에서는 HTML <small> 태그를 사용하여 텍스트 크기를 변경하는 방법을 배우게 됩니다. 또한 <small> 태그를 사용하는 다양한 방법과 스타일을 적용하는 방법에 대해서도 배우게 됩니다.

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

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

파일에 구조 추가하기

텍스트 편집기에서 index.html이라는 HTML 파일을 생성합니다.

파일에 HTML 보일러플레이트 (boilerplate) 를 추가합니다. 그런 다음 <body> 태그를 생성하고 다음 코드를 안에 추가합니다:

<h1>Using the HTML small tag</h1>
<p>This is some text that we want to make smaller:</p>

small 태그 추가하기

<p> 태그 안에 <small> 태그를 추가하고, 여는 태그와 닫는 태그 사이에 텍스트를 추가합니다:

<p>This is some text that we want to make <small>smaller</small>:</p>

법적 텍스트에 small 태그 사용하기

<body> 태그 안에 다음 코드를 복사하여 붙여넣어 <small> 태그를 사용하여 법적 텍스트를 추가합니다:

<p>
  This is just some regular text, but here is some <small>legal text</small>:
</p>
<small
  >This website is not responsible for any misinformation or errors. Please read
  carefully before trusting this website.</small
>

small 태그에 스타일 적용하기

<head> 태그 안에 다음 코드를 추가하여 <small> 태그에 스타일을 적용합니다:

<style>
  small {
    font-size: smaller;
    color: red;
  }
</style>

사이드 코멘트를 위한 small 태그 추가

<small> 태그를 사용하여 사이드 코멘트를 추가하려면 <body> 태그 안에 다음 코드를 복사하여 붙여넣습니다:

<p>
  This is just some text, but here is a <small>side comment</small> about this
  text:
</p>

변경 사항을 index.html 파일에 저장하고 웹 브라우저에서 엽니다. <small> 태그에 적용한 변경 사항을 확인할 수 있습니다.

요약

이 랩에서는 HTML <small> 태그를 사용하여 텍스트 크기를 변경하고 스타일을 적용하는 방법을 배웠습니다. 또한 법적 텍스트, 사이드 코멘트 및 작은 글씨 등 <small> 태그를 사용하는 다양한 방법에 대해서도 배웠습니다. 이제 <small> 태그를 사용하여 텍스트에 강조를 추가하고 눈에 띄게 만들 수 있습니다.