소개
<footer> 태그는 웹페이지/웹사이트의 푸터를 생성하는 데 사용될 수 있습니다. 이 랩에서는 HTML footer 태그를 사용하여 기본적인 푸터를 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
웹페이지의 기본 구조 설정
.html 확장자를 가진 새 파일을 생성하고 이름을 index.html로 지정합니다. 여기에 푸터를 생성하기 위한 HTML 코드를 추가합니다.
이 단계에서는 웹페이지의 기본 구조를 생성합니다. 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Header will be here -->
<main>
<!-- Main content will be here -->
</main>
<!-- Footer will be here -->
</body>
</html>
푸터 코드 추가
main 태그 뒤에 다음 코드를 추가하여 기본적인 푸터를 생성합니다.
<footer>
<p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>
이 예제에서는 간단한 단락 태그를 푸터에 추가하여 텍스트를 넣었습니다. 링크, 저작권 정보, 사이트맵 및 기타 콘텐츠를 추가하여 푸터를 사용자 정의할 수 있습니다.
index.html 파일을 저장하고 웹 브라우저에서 엽니다. 하단에 푸터가 있는 기본적인 웹페이지가 표시됩니다.
푸터 사용자 정의
이 단계에서는 몇 가지 정보를 더 추가하여 푸터를 사용자 정의합니다. 다음은 예시입니다.
<footer>
<p>Contact us:</p>
<ul>
<li>Email: info@example.com</li>
<li>Phone: 123-456-7890</li>
</ul>
<p>Follow us:</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</footer>
이 예제에서는 두 개의 단락과 두 개의 순서가 없는 목록을 추가했습니다. 첫 번째 목록에는 웹사이트의 연락처 정보가 포함되어 있으며, 두 번째 목록에는 소셜 미디어 프로필 링크가 포함되어 있습니다.
index.html 파일을 저장하고 웹 브라우저에서 엽니다. 웹페이지 하단에 사용자 정의된 푸터가 표시됩니다.
요약
이 랩에서는 HTML footer 태그를 사용하여 기본적인 푸터를 만드는 방법을 배웠습니다. 푸터 태그는 웹페이지의 푸터를 정의하는 데 사용되며, 웹페이지와 관련된 링크 및 저작권 데이터와 같은 다양한 정보를 담는 데 사용될 수 있습니다. 또한 연락처 정보 및 소셜 미디어 링크를 포함하도록 푸터를 사용자 정의하는 방법도 배웠습니다.
