소개
HTML 에서 <s> 태그는 취소선이 그어진 텍스트 또는 가로선이 그어진 텍스트를 나타냅니다. 더 이상 관련이 없거나 정확하지 않은 텍스트 내용을 표시하는 데 사용할 수 있습니다. 문서 편집 목적으로는 <s> 태그 대신 <del> 태그를 사용하는 것이 중요합니다. 이 Lab 에서는 <s> 태그를 사용하여 HTML 에서 취소선 텍스트를 만드는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
기본 HTML 파일 생성
index.html이라는 HTML 파일을 생성합니다. 기본 HTML 구조를 만드는 방법은 다음과 같습니다.
<!doctype html>
<html>
<head>
<title>HTML 에서 취소선 텍스트 만들기</title>
</head>
<body>
<!-- 여기에 HTML 코드가 들어갑니다 -->
</body>
</html>
취소선 텍스트 추가
HTML 파일의 body 태그 안에 취소선 텍스트를 나타내는 <s> 태그를 추가합니다. 기본 구문을 작성하는 방법은 다음과 같습니다.
<s>This text has a strikethrough.</s>
HTML 출력에서 위 텍스트에 가로선이 그어진 것을 볼 수 있습니다.
속성 추가
<s> 태그는 특정 속성을 가지고 있지 않지만, 전역 속성 (global attributes) 과 이벤트 속성 (event attributes) 을 모두 지원합니다. <s> 태그에 이벤트 속성을 추가하는 방법은 다음과 같습니다.
<s onclick="alert('This is a strikethrough text.')">Click me!</s>
위 코드에서 onclick 이벤트 속성은 취소선 텍스트를 클릭하면 텍스트와 함께 알림 메시지를 표시합니다.
CSS 스타일 추가
취소선 텍스트의 모양을 변경하기 위해 사용자 정의 CSS 스타일을 추가할 수도 있습니다. <s> 태그에 CSS 스타일을 추가하는 방법은 다음과 같습니다.
<style>
s {
text-decoration: line-through;
color: red;
font-size: 20px;
}
</style>
위 코드에서 text-decoration 속성은 취소선을 만들고, color 속성은 글자 색상을 빨간색으로 변경하며, font-size 속성은 글자 크기를 20px 로 설정합니다.
요약
이 랩에서는 <s> 태그를 사용하여 HTML 에서 취소선 텍스트를 만드는 방법을 배웠습니다. CSS 스타일 또는 이벤트 속성을 추가하여 텍스트 모양을 사용자 정의할 수 있습니다. <s> 태그는 더 이상 정확하거나 관련이 없는 텍스트를 표시하는 데 적합하며 문서 편집 목적으로도 유용할 수 있습니다.
