소개
HTML 은 모든 웹사이트의 기반이며, 웹 페이지를 만들기 위해 사용할 수 있는 다양한 요소에 대한 이해가 필수적입니다. 이번 랩에서 중점적으로 다룰 요소 중 하나는 <samp> 태그입니다. <samp> 태그는 컴퓨터 코드의 샘플 또는 출력을 표시하는 데 사용됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
기본 HTML 페이지 만들기
index.html이라는 새 파일을 만듭니다.
이 단계에서는 기본 HTML 페이지를 만들고 <samp> 태그에 필요한 구조를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<title>Creating a Sample Output with the HTML tag</title>
</head>
<body>
<h1>Using the <samp> Tag</h1>
</body>
</html>
위 코드에서는 HTML 페이지의 기본 구조를 추가했습니다. 또한 페이지 제목을 포함할 <h1> 태그도 추가했습니다.
요소 추가하기
이 단계에서는 컴퓨터 프로그램의 샘플 출력을 만들기 위해 페이지에 <samp> 태그를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Creating a Sample Output with the HTML tag</title>
</head>
<body>
<h1>Using the <samp> Tag</h1>
<p>Here is an example of using the <samp> tag:</p>
<samp>Sample Text</samp>
</body>
</html>
위 코드에서는 <samp> 태그의 목적을 설명하는 단락 태그를 추가했습니다. 그런 다음, "Sample Text"라는 샘플 텍스트가 포함된 <samp> 태그를 추가했습니다.
CSS 를 사용하여 요소 스타일 지정하기
CSS 를 사용하여 <samp> 태그의 스타일을 수정할 수 있습니다. 이 단계에서는 <samp> 태그에 몇 가지 기본적인 변경 사항을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<title>Creating a Sample Output with the HTML tag</title>
<style>
samp {
background-color: #f1f1f1;
padding: 1em;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Using the <samp> Tag</h1>
<p>Here is an example of using the <samp> tag:</p>
<samp>Sample Text</samp>
</body>
</html>
위 코드에서는 페이지에 style 태그를 추가했습니다. style 태그 내에서 <samp> 태그의 배경색, 패딩 및 border-radius 속성을 정의했습니다.
코드 출력 추가하기
이 단계에서는 <samp> 태그를 사용하여 컴퓨터 코드의 출력을 표시하는 방법을 보여줍니다.
<!doctype html>
<html>
<head>
<title>Creating a Sample Output with the HTML tag</title>
<style>
samp {
background-color: #f1f1f1;
padding: 1em;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Output of a Computer Code:</h1>
<samp>
<code> print("Hello World"); </code>
</samp>
</body>
</html>
위 코드에서는 컴퓨터 코드의 출력을 표시하기 위해 <samp> 태그 안에 코드 블록을 추가했습니다.
요약
이 랩에서는 웹 페이지에서 컴퓨터 코드의 샘플 출력을 생성하는 데 사용되는 HTML <samp> 태그에 대해 배웠습니다. 또한 CSS 를 사용하여 스타일을 지정하는 방법과 코드 블록과 함께 사용하는 방법을 살펴보았습니다.
