HTML 저작권 기호(©) 삽입하는 법: 초보자도 바로 쓰는 빠르고 확실한 방법

HTML에서 © 또는 © 코드는 저작권 기호(©)를 의미합니다. 이 코드를 사용하면 웹 페이지 어디든 저작권 표시를 손쉽게 삽입할 수 있습니다. 저작권 기호는 일반적인 키보드에 직접 입력할 수 없기 때문에 반드시 HTML 특수 문자 코드를 활용해야 합니다.

왜 HTML 특수 문자 코드가 필요할까?

HTML에는 키보드로 직접 입력하기 어려운 기호와 개체(entity)가 많습니다. 컴퓨터에서 사용할 수 있는 기호는 수백 가지에 달하기 때문에, 모든 기호를 키보드에 배치하는 것은 사실상 불가능합니다. 그래서 HTML은 앰퍼샌드(&)로 시작해 세미콜론(;)으로 끝나는 'HTML 개체' 문법으로 특수 문자를 지원합니다.

저작권 기호는 © 또는 © 두 가지 방식으로 만들 수 있으며, 주로 문단 태그 안에 함께 작성됩니다. 앰퍼샌드(&)는 웹 페이지에 특수 문자를 삽입하겠다는 신호 역할을 합니다.

저작권 기호의 기본 문법은 다음과 같습니다:

<p>© 2020 Career Karma</p>

같은 결과를 얻으려면 숫자형 개체인 ©를 사용해도 됩니다. 이때 앰퍼샌드(&)와 세미콜론(;)은 반드시 포함해야 합니다. 하나라도 빠지면 브라우저가 이를 특수 문자로 인식하지 못해 저작권 기호가 화면에 제대로 표시되지 않습니다.

저작권 표시가 중요한 이유

웹 페이지를 제작할 때는 자신이 만든 콘텐츠의 소유권을 명확히 밝히는 것이 좋습니다. 이는 창작물에 대한 법적 보호 장치가 되어 줍니다. 보통 페이지 하단의 푸터(footer)에 저작권 문구를 넣어 본인 또는 클라이언트의 자료를 보호하며, 저작권 기호를 함께 사용하면 소유권을 더욱 분명하게 드러낼 수 있습니다.

HTML 저작권 기호 참조표

아래 표는 코드에서 저작권 기호를 만드는 다양한 방법을 정리한 것입니다:

HTML 저작권 기호(©) 삽입하는 법: 초보자도 바로 쓰는 빠르고 확실한 방법

윈도우와 맥에서는 실제 문자를 직접 입력할 수 있는 전용 단축키도 제공됩니다. 윈도우에서는 Alt + 0169를 누르면 저작권 기호(©)가 입력되고, 맥에서는 option + G 조합을 사용합니다.

또한 HTML 개체 이름이나 번호를 활용할 수도 있습니다. © 또는 ©를 <span> 태그로 감싸면 동일한 결과를 얻을 수 있습니다.

저작권 기호 HTML 예제

저작권 기호가 가장 많이 사용되는 곳은 페이지 하단의 푸터입니다. 푸터에 표시될 저작권 문구를 작성해 보겠습니다:

<footer>
  <p>Created by Career Karma. © 2020</p>
</footer>

HTML <footer> 태그는 해당 영역이 웹 페이지의 푸터임을 브라우저에 알려 줍니다. 그 안에 <p> 태그를 넣고 텍스트와 저작권 기호를 함께 작성했습니다. 위 코드는 아래와 같이 출력됩니다:

Created by Career Karma. © 2020

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>repl.it</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
 <style>
 body {
 font-family: Arial
 }
 table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 }
 th, td {
 padding: 15px;
 }
 table, footer {
 margin: 20px auto;
 text-align: center;
 }
 tr:nth-child(even) {
 background-color: #dddddd;
 }
 span {
 color: blue;
 }
 </style>
 <script>
 function todayDate(){
 var d = new Date();
 var n = d.getFullYear() + " ";
 return document.getElementById("date").innerHTML = n;
 }
 </script>
 </head>
 <body onload=todayDate()>
 <table bordered>
 <tr>
 <th>Option</th>
 <th>shortcut or syntax</th>
 </tr>
 <tr>
 <td>Windows</td>
 <td>Alt + 0169</td>
 </tr>
 <tr>
 <td>Mac</td>
 <td>option + G</td>
 </tr>
 <tr>
 <td>HTML Entity Name</td>
 <td><span>&lt;span></span>&amp;copy;<span>&lt;span></span></td>
 </tr>
 <tr>
 <td>HTML Entity Number</td>
 <td><span>&lt;span></span>&amp;#169;<span>&lt;span></span></td>
 </tr>
 </table>
 <footer>
 &copy; <em id="date"></em>Career Karma
 </footer>
 </body>
</html>

마무리

HTML을 더 깊이 배우고 웹 개발자로 성장하고 싶다면 체계적인 학습 계획을 세우는 것이 중요합니다. MDN Web Docs 같은 공식 문서와 무료 온라인 강의 등 검증된 학습 자료를 꾸준히 활용하면 기초를 탄탄히 다질 수 있습니다.

HTML 저작권 기호(©) 삽입하는 법: 초보자도 바로 쓰는 빠르고 확실한 방법

왜 HTML 특수 문자 코드가 필요할까?

저작권 표시가 중요한 이유

HTML 저작권 기호 참조표

저작권 기호 HTML 예제

실전 예제: 저작권 기호 활용하기

마무리