HTML에서 외부 코드 불러오기
웹 페이지를 제작할 때 외부 코드를 불러오는 것은 필수적인 작업 중 하나입니다. 이를 통해 CSS 스타일링, 자바스크립트 기능 추가, 사이트 아이콘 설정 등을 간편하게 할 수 있습니다. 이번 글에서는 HTML에서 외부 코드를 불러오는 방법에 대해 알아보겠습니다.
1. 외부 CSS 파일 불러오기: <link> 태그
CSS 파일을 불러와서 웹 페이지의 스타일을 적용하려면 <link> 태그를 사용합니다. <link> 태그는 주로 <head> 태그 안에 위치합니다.
예제:
<head>
<link rel="stylesheet" href="styles.css">
</head>rel: 링크된 파일의 관계를 나타냅니다. CSS 파일을 불러올 때는stylesheet로 설정합니다.href: 불러올 CSS 파일의 경로를 지정합니다.
2. 사이트 아이콘 설정: <link> 태그
사이트 아이콘(favicon)은 웹 브라우저 탭에 표시되는 작은 아이콘입니다. <link> 태그를 사용하여 설정할 수 있습니다.
예제:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>rel: 링크된 파일의 관계를 나타냅니다. 사이트 아이콘을 설정할 때는icon으로 설정합니다.href: 불러올 아이콘 파일의 경로를 지정합니다.type: 아이콘 파일의 MIME 타입을 지정합니다. 일반적으로image/x-icon을 사용합니다.
3. 외부 자바스크립트 파일 불러오기: <script> 태그
자바스크립트 파일을 불러와서 웹 페이지에 동적인 기능을 추가하려면 <script> 태그를 사용합니다. <script> 태그는 주로 <body> 태그 안의 맨 마지막에 위치합니다.
예제:
<body>
<!-- 페이지 내용 -->
<script src="script.js"></script>
</body>src: 불러올 자바스크립트 파일의 경로를 지정합니다.
4. HTML 파일 내에서 다른 HTML 파일 불러오기: <iframe> 태그
외부 HTML 파일을 현재 페이지에 포함하려면 <iframe> 태그를 사용할 수 있습니다.
예제:
<iframe src="another_page.html" width="600" height="400"></iframe>src: 불러올 HTML 파일의 경로를 지정합니다.width와height: iframe의 크기를 지정합니다.
결론
HTML에서 외부 코드를 불러오는 방법을 잘 이해하고 활용하면 웹 페이지를 더 효과적으로 구성할 수 있습니다. 외부 CSS 파일을 불러와 스타일을 적용하고, 자바스크립트 파일을 불러와 동적인 기능을 추가하며, 사이트 아이콘을 설정하고, 필요한 경우 외부 HTML 파일을 포함하는 등의 작업을 통해 웹 페이지를 더욱 풍부하게 만들 수 있습니다. 각 태그의 속성과 사용 방법을 숙지하여 효율적인 웹 개발을 진행해 보세요.
1인개발자가 되겠다