HTML 샘플 태그
- WBOY원래의
- 2024-09-04 16:25:54951검색
웹 페이지에 프로그램 출력이나 소스 코드를 적절한 글꼴 스타일과 형식으로 텍스트로 표시해야 하는 경우가 종종 있습니다. 이는 출력 샘플을 적절하게 나타냅니다. HTML은 구조적 의미를 지닌 텍스트 블록을 나타내는 구문 태그를 제공합니다. samp는 프로그램이나 스크립트의 출력 샘플을 적절한 형식으로 나타내기 위해 HTML에 제공되는 태그 중 하나입니다. 이 태그를 사용하면 외부 CSS나 스타일 구성 요소를 사용하지 않고도 텍스트를 프로그램의 샘플 출력으로 표시할 수 있습니다.
구문:
Html의 다른 구문 태그와 마찬가지로 samp 태그의 구문은 매우 간단합니다. 다음은 samp 태그의 구문입니다.
<samp> . . . . . </samp>
samp 태그의 구문은 시작 태그 로 시작됩니다. 종료 태그 로 끝납니다. 두 태그 사이의 공백에는 아래와 같이 프로그램이나 스크립트의 출력으로 표시하려는 텍스트가 포함됩니다.
<samp> Sample of output of a program or script text. . . </samp>
속성:
samp 태그에는 사용할 수 있는 특정 속성이나 특별한 속성이 없지만 HTML에서 사용할 수 있는 기존의 전역 속성과 이벤트 속성을 지원합니다.
HTML samp 태그 구현 예시
samp 태그는 기본적으로 내용을 인라인으로 표시하고 일반적으로 브라우저에서 지원하는 고정폭 글꼴을 사용하여 내용을 표시합니다.
예시 #1
먼저 samp 태그 구현의 간단한 예를 살펴보겠습니다.
코드:
samp tag in HTML <samp> Sample of output of a program or script text. . . </samp>
출력:
여기에는 샘플 텍스트가 포함된 간단한 태그 샘플이 있습니다. 출력은 자동으로 고정 폭 글꼴로 인쇄됩니다.
예시 #2
samp 태그를 사용하여 생성된 텍스트 출력을 일반 텍스트와 비교해 보겠습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>
출력:
여기에서는 세 가지 다른 스타일을 사용하여 출력을 표시했습니다. body 태그에는 기본적으로 다양한 스타일을 사용하여 인쇄될 세 줄의 텍스트가 있습니다. 첫 번째 출력은 첫 번째 예와 유사한 samp 태그를 사용하는 것입니다. 그런 다음 출력을 두 번째 줄에서 볼 수 있는 일반 텍스트와 비교했습니다. 세 번째 줄에서는 samp 요소와 동일한 효과를 얻기 위해 스타일링 요소를 사용했습니다. 우리는 스타일을 고정 폭 글꼴 모음으로 사용했는데, 이는 samp 태그와 유사한 출력을 표시합니다.
일부 CSS 스타일을 사용하여 samp 태그와 같은 유사한 효과를 어떻게 달성했는지 살펴보세요. 웹 사이트 개발에서는 최신 CSS 스타일링 요소를 사용하여 동일한 효과를 얻을 수 있으므로 samp 태그를 사용하는 것이 의무적으로 권장되지는 않습니다. 현대 웹 사이트 개발에서 samp 태그보다 더 나은 효과를 얻기 위해 이를 사용할 수 있습니다. 이는 samp 태그 사용이 더 이상 사용되지 않는다는 의미는 아니지만 웹 사이트 개발자의 선택에 달려 있습니다. 복잡한 스타일링을 하지 않고도 아주 간단한 태그만으로 효과를 얻을 수 있는 곳에서 활용이 가능합니다.
예시 #3
앞서 설명한 것처럼 이미 전역 속성을 지원하므로 samp 태그 위에 CSS 효과를 적용하는 것도 가능합니다. 예시의 기존 samp 요소에 CSS 스타일을 추가해 보겠습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
samp {
font-weight: bold;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>
출력:
여기에서는 samp 태그의 기존 스타일에 글꼴 두께를 굵게 적용했습니다. 글꼴 스타일, 글꼴 모음, 색상 속성 등과 같은 다른 CSS 스타일링 요소를 사용하여 samp 태그의 스타일을 수정하는 것도 가능합니다.
예시 #4
몇 가지 흥미로운 스타일링 효과를 사용하여 프로그램 출력의 독특한 스타일을 얻을 수 있는 방법을 보여드리겠습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
samp {
font-weight: bold;
letter-spacing: 2px;
color: green;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>
출력:
여기서는 태그 텍스트. 텍스트 그림자, 텍스트 장식 등과 같은 다른 스타일도 있으며 원하는 대로 다양한 스타일과 효과를 시도하고 얻을 수 있습니다.
참고: samp 태그는 버전 5까지의 모든 HTML 버전에 존재하며 거의 모든 브라우저를 지원합니다.결론
그래서 우리는 HTML에서 samp 태그를 보았습니다. HTML의 구문 태그이며 프로그램이나 스크립트의 출력으로 텍스트를 표시하는 데 사용됩니다. 고정 폭 글꼴을 사용하여 샘플 출력을 표시하며 전역 속성을 지원합니다.
위 내용은 HTML 샘플 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!