외부 자료 링크 추가 및 내부 페이지 링크 추가를 HTML 코드 활용하는 사례
오늘은 외부 자료 링크 추가 및 내부 페이지 링크 추가를 HTML 코드로 활용하는 사례입니다.
외부 자료 링크 추가 예시로는 다음과 같습니다. "에디슨의 발명품 관련 자료 링크 설정 예: https://www.si.edu/edison" 가 있고 내부 페이지 링크 추가 예시로, "테슬라 코일의 원리 관련 블로그 게시물 연결 설정 예: /2025/02/Tesla-Coil-Principle.html" 가 있습니다. 이때 구체적인 외부자료, 내부페이지의 링크추가에 대한 html코드를 활용하는 사례를 알아보겠습니다.
1. 외부 자료 링크 추가 (External Link)
외부 사이트로 연결할 때 <a> 태그를 사용하여
링크를 설정합니다.
<p>더 많은 정보를 원하신다면,
<a href="https://www.si.edu/edison" target="_blank" rel="noopener noreferrer">
에디슨의 발명품 관련 자료
</a>를 확인하세요.
</p>
🔹 설명
-
href="https://www.si.edu/edison"→ 외부 링크 주소 target="_blank"→ 새 창에서 링크 열기-
rel="noopener noreferrer"→ 보안 및 성능을 위한 추가 속성
2. 내부 페이지 링크 추가 (Internal Link)
블로그 내부의 다른 페이지로 연결하는 경우 /를 사용하여 상대
경로를 지정합니다.
<p>테슬라 코일의 원리에 대해 자세히 알고 싶다면,
<a href="/2025/02/Tesla-Coil-Principle.html">
이곳을 클릭하세요
</a>.
</p>
🔹 설명
-
href="/2025/02/Tesla-Coil-Principle.html"→ 내부 블로그 글로 이동 -
내부 링크는 같은 도메인 내에서
동작하므로
target="_blank"속성을 사용할 필요 없음
3. 버튼 스타일로 링크 추가
텍스트 링크 대신 버튼 형태로 만들 수도 있습니다.
✅ 외부 자료 버튼
<a href="https://www.si.edu/edison" target="_blank" rel="noopener noreferrer"
style="display: inline-block; padding: 10px 20px; background-color: #007BFF;
color: white; text-decoration: none; border-radius: 5px;">
에디슨의 발명품 관련 자료 보기
</a>
✅ 내부 페이지 버튼
<a href="/2025/02/Tesla-Coil-Principle.html"
style="display: inline-block; padding: 10px 20px; background-color: #28a745;
color: white; text-decoration: none; border-radius: 5px;">
테슬라 코일 원리 보기
</a>
🔹 설명
-
display: inline-block; padding: 10px 20px;→ 버튼 스타일 적용 -
background-color: #007BFF;→ 파란색(외부 링크), 초록색(내부 링크) border-radius: 5px;→ 모서리를 둥글게 설정
4. 링크에 아이콘 추가 (FontAwesome 사용)
아이콘을 추가하면 링크를 더 직관적으로 만들 수 있습니다.
<p>
<a href="https://www.si.edu/edison" target="_blank" rel="noopener noreferrer">
<i class="fas fa-external-link-alt"></i> 에디슨의 발명품 관련 자료
</a>
</p>
<p>
<a href="/2025/02/Tesla-Coil-Principle.html">
<i class="fas fa-book"></i> 테슬라 코일 원리 자세히 보기
</a>
</p>
🔹 설명
-
<i class="fas fa-external-link-alt"></i>→ 외부 링크 아이콘 -
<i class="fas fa-book"></i>→ 책 아이콘 (내부 링크)
FontAwesome을 사용하려면 <head> 태그 안에 다음
코드 추가:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
결론
-
외부 링크:
target="_blank"를 추가하여 새 창에서 열도록 설정. -
내부 링크:
/2025/02/파일명.html을 사용하여 같은 도메인 내에서 연결. - 버튼 스타일로 시각적으로 강조 가능.
- 아이콘 추가로 직관적인 디자인 적용 가능.
이제 블로그에서 효과적인 링크 활용을 해보세요! 🚀
댓글 쓰기