소개
이 랩에서는 HTML <small> 태그를 사용하여 텍스트 크기를 변경하는 방법을 배우게 됩니다. 또한 <small> 태그를 사용하는 다양한 방법과 스타일을 적용하는 방법에 대해서도 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
파일에 구조 추가하기
텍스트 편집기에서 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> 태그를 사용하여 텍스트에 강조를 추가하고 눈에 띄게 만들 수 있습니다.
