HTML 약어 태그

소개

HTML <abbr> 태그는 약어 또는 두문자어를 정의하는 데 사용됩니다.

이 랩에서는 HTML <abbr> 태그를 사용하여 웹 페이지 텍스트에 나타나는 약어 및 두문자어를 표시하는 방법을 배우게 됩니다.

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

제목 추가

먼저, index.html이라는 HTML 문서를 생성하고 docType 을 선언합니다.

index.html 파일에 제목을 추가합니다.

    <h1>Creating Abbreviations in HTML</h1>

콘텐츠 추가

HTML 파일에 몇 가지 텍스트 내용을 추가합니다.

    <p>예를 들어, 우리 일상생활에서 매우 흔한 약어인 Mr. 또는 Mrs.가 있거나, HTML, CSS 또는 HTTP 와 같은 기술적 약어가 있을 수 있습니다.</p>

태그 사용

<abbr> 태그를 사용하여 약어를 정의하고, 약어에 대한 전체 설명을 제공하기 위해 title 속성을 포함합니다.

    <p>예를 들어, 우리 일상생활에서 매우 흔한 약어인 <abbr title="Mister">Mr.</abbr> 또는 <abbr title="Misses">Mrs.</abbr>가 있거나, <abbr title="HyperText Markup Language">HTML</abbr>, <abbr title="Cascading Style Sheets">CSS</abbr> 또는 <abbr title="Hypertext Transfer Protocol">HTTP</abbr>와 같은 기술적 약어가 있을 수 있습니다.</p>

태그에 스타일 추가

<abbr> 태그에 스타일을 추가하여 웹 페이지에서 약어가 표시되는 방식을 변경합니다. 예를 들어, 약어임을 나타내기 위해 점선 밑줄을 추가할 수 있습니다.

    <style>
        abbr {
            text-decoration: underline dotted;
        }
    </style>

파일을 저장하고 웹 브라우저에서 열어 결과를 확인하십시오.

요약

이 랩에서는 HTML <abbr> 태그를 사용하여 웹 페이지에서 약어와 두문자어를 만드는 방법을 배웠습니다. 또한 개별 <abbr> 태그에 스타일을 추가하고, 전역 class 속성을 사용하여 여러 태그에 스타일을 적용하는 방법도 배웠습니다.