#HTML기초 #비주얼스튜디오코드 #웹개발 #프로그래밍기초 #코딩튜토리얼 #myip
[주요 목차]
목차1 🌐 HTML 문서 만들기
목차2 💻 개발 환경 설정
목차3 🗂️ 폴더 및 파일 생성
목차4 ✍️ HTML 기본 구조 작성
목차5 🔄 라이브 서버 실행
안녕하세요! 오늘의 블로그 포스트에서는 HTML 문서 만들기 과정과, 비주얼 스튜디오 코드(Visual Studio Code)를 활용한 웹 개발 환경 설정에 대해 알아보겠습니다. 웹 개발을 처음 시작하는 분들에게 유익한 정보가 될 것입니다. 이 튜토리얼을 따라 하시면, HTML 문서를 생성하고, 기본적인 웹 페이지를 테스트하는 방법을 배우실 수 있습니다. 그럼 시작해볼까요?
🌐 HTML 문서 만들기
HTML은 웹 페이지의 뼈대를 구성하는 언어입니다. 첫 번째 단계로, HTML 문서를 만드는 방법을 알아보겠습니다. 비주얼 스튜디오 코드를 열고, 새로운 파일을 생성한 후, 'index.html'이라는 이름으로 저장합니다. 이 파일은 브라우저에서 기본적으로 로드되는 파일이기 때문에, 웹 페이지의 시작 지점이 됩니다. HTML 문서는 <!DOCTYPE html>로 시작하며, 태그 안에
와 를 포함합니다. 에는 메타 정보와 제목이, 에는 실제 콘텐츠가 들어갑니다.
💻 개발 환경 설정
웹 개발을 시작하려면 적절한 개발 환경을 설정해야 합니다. 우리는 비주얼 스튜디오 코드를 사용하여 코딩을 진행할 것입니다. 이 소프트웨어는 다양한 확장 기능을 제공하여 개발을 더욱 효율적으로 만들어 줍니다. 크롬과 같은 브라우저를 사용하여 코드를 실행하고 테스트할 수 있습니다. 익스텐션 마켓플레이스에서 'Live Server'를 설치하여 실시간으로 변경 사항을 확인할 수 있습니다.
🗂️ 폴더 및 파일 생성
프로젝트를 시작할 때는 적절한 폴더 구조를 만드는 것이 중요합니다. 비주얼 스튜디오 코드에서 'Open Folder'를 클릭하여 작업할 폴더를 생성합니다. 이 폴더 안에 'index.html' 파일을 생성하면, 기본적인 프로젝트 구조가 완성됩니다. 폴더를 선택하고, 파일을 추가하면, 프로젝트의 기초가 마련됩니다.
✍️ HTML 기본 구조 작성
HTML 문서의 기본 구조는 매우 간단합니다. 태그 안에
와 가 있으며, 각 섹션에 필요한 내용을 추가합니다. 에는 태그를 사용하여 페이지 제목을 설정하고, <body>에는 실제 웹 페이지에 표시될 요소들을 추가합니다. 비주얼 스튜디오 코드의 자동 완성 기능을 활용하면, 이러한 기본 구조를 빠르게 작성할 수 있습니다.</p>
<p><img src="https://idc.myip.co.kr/board/images/2025/01/11/741608ffb1e4fa1467f7127834a80dbc.png" class="mt-10 mb-10" /></p>
<h2>🔄 라이브 서버 실행</h2>
<p>코드를 작성한 후에는 결과를 확인하는 것이 중요합니다. 'Live Server' 익스텐션을 사용하면, 실시간으로 변경 사항을 웹 브라우저에 반영할 수 있습니다. 비주얼 스튜디오 코드에서 'Go Live' 버튼을 클릭하면, 브라우저가 자동으로 열리고, 변경된 내용을 즉시 확인할 수 있습니다. 이는 개발 속도를 빠르게 하고, 오류를 즉시 수정할 수 있게 도와줍니다.</p>
<h2>🌐 공식사이트</h2>
<p><a href="https://code.visualstudio.com/">Visual Studio Code 공식 사이트</a></p>
<h2>📚 추천자료</h2>
<ul>
<li><a href="https://developer.mozilla.org/ko/">MDN Web Docs</a></li>
<li><a href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a></li>
</ul>
<h2>🔗 관련 링크</h2>
<ul>
<li><a href="https://www.codecademy.com/learn/learn-html">HTML 기초 강좌</a></li>
<li><a href="https://www.howtogeek.com/658962/how-to-install-visual-studio-code-on-linux/">비주얼 스튜디오 코드 설치 가이드</a></li>
</ul>
<h2>❓ FAQ 섹션</h2>
<ul>
<li><strong>질문</strong>: HTML 문서를 어떻게 저장하나요?</li>
<li><strong>답</strong>: 비주얼 스튜디오 코드에서 Ctrl+S를 눌러 저장할 수 있습니다.</li>
</ul>
</div>
</section>
<!-- 액션 버튼 섹션: 목록, 글쓰기, 수정, 삭제 -->
<footer class="flex flex-wrap justify-end gap-3 px-6 sm:px-10 py-6 border-t border-gray-100">
<div onclick="location.href='list.php?table=tip&category1=language&category2=htmlcss'" class="bg-gray-600 text-white px-6 py-2 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 cursor-pointer text-sm">
목록
</div>
<div onclick="location.href='write.php?table=tip&category1=language&category2=htmlcss'" class="bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 cursor-pointer text-sm">
글쓰기
</div>
</footer>
<!-- 광고 섹션: 한국 서버호스팅 -->
<section class="mx-4 sm:mx-8 my-5 p-3 lg:p-4 bg-gradient-to-r from-slate-50 to-blue-50 border border-slate-200 rounded-xl">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-1.5">
<svg class="w-4 h-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
<span class="text-xs font-semibold text-slate-700">한국 서버호스팅</span>
</div>
<a href="/product.php?S_content=%EC%84%9C%EB%B2%84%ED%98%B8%EC%8A%A4%ED%8C%85&languagechange=Korean" class="text-xs text-blue-600 hover:text-blue-800 font-medium">
전체보기 →
</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-2">
<a href="/product/product_detail.php?id=123&languagechange=Korean" class="block bg-white rounded-lg border border-slate-200 overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
<div class="w-full h-16 sm:h-20 overflow-hidden bg-slate-100">
<img src="/partner/2024/12/15/e3-1240v6.png" alt="Xeon E3-1240 v6 서버" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
</div>
<div class="p-2">
<div class="flex items-center gap-1 mb-1">
<svg class="w-3 h-3 text-blue-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
<span class="text-[11px] font-bold text-slate-800 truncate">Xeon E3-1240 v6</span>
</div>
<p class="text-[10px] text-slate-500 leading-tight mb-1 line-clamp-1">4C/8T (4.1GHz) + 16GB + SSD 500GB</p>
<div class="text-right">
<span class="text-xs font-bold text-blue-600 group-hover:text-blue-700">80,000원</span>
<span class="text-[9px] text-slate-400">/월</span>
</div>
</div>
</a>
<a href="/product/product_detail.php?id=102&languagechange=Korean" class="block bg-white rounded-lg border border-slate-200 overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
<div class="w-full h-16 sm:h-20 overflow-hidden bg-slate-100">
<img src="/partner/2024/12/15/i3_12100-001.png" alt="i3-12100 서버" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
</div>
<div class="p-2">
<div class="flex items-center gap-1 mb-1">
<svg class="w-3 h-3 text-indigo-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
<span class="text-[11px] font-bold text-slate-800 truncate">i3-12100</span>
</div>
<p class="text-[10px] text-slate-500 leading-tight mb-1 line-clamp-1">4C/8T (4.3GHz) + GPU + 16GB + NVME 500GB</p>
<div class="text-right">
<span class="text-xs font-bold text-blue-600 group-hover:text-blue-700">100,000원</span>
<span class="text-[9px] text-slate-400">/월</span>
</div>
</div>
</a>
<a href="/product/product_detail.php?id=103&languagechange=Korean" class="block bg-white rounded-lg border border-slate-200 overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
<div class="w-full h-16 sm:h-20 overflow-hidden bg-slate-100">
<img src="/partner/2024/12/15/i9_12900K-001.png" alt="i9-12900K 서버" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
</div>
<div class="p-2">
<div class="flex items-center gap-1 mb-1">
<svg class="w-3 h-3 text-violet-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
<span class="text-[11px] font-bold text-slate-800 truncate">i9-12900K</span>
</div>
<p class="text-[10px] text-slate-500 leading-tight mb-1 line-clamp-1">16C/24T (5.2GHz) + GPU + 32GB + NVME 1TB</p>
<div class="text-right">
<span class="text-xs font-bold text-blue-600 group-hover:text-blue-700">200,000원</span>
<span class="text-[9px] text-slate-400">/월</span>
</div>
</div>
</a>
<a href="/product/product_detail.php?id=105&languagechange=Korean" class="block bg-white rounded-lg border border-slate-200 overflow-hidden hover:shadow-md hover:border-blue-300 transition-all duration-200 group">
<div class="w-full h-16 sm:h-20 overflow-hidden bg-slate-100">
<img src="/partner/document/105/105_img_01.png" alt="RYZEN 9 9950X 서버" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
</div>
<div class="p-2">
<div class="flex items-center gap-1 mb-1">
<svg class="w-3 h-3 text-red-500 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>
<span class="text-[11px] font-bold text-slate-800 truncate">RYZEN 9 9950X</span>
</div>
<p class="text-[10px] text-slate-500 leading-tight mb-1 line-clamp-1">16C/32T (5.7GHz) + 32GB + NVME 1TB</p>
<div class="text-right">
<span class="text-xs font-bold text-blue-600 group-hover:text-blue-700">300,000원</span>
<span class="text-[9px] text-slate-400">/월</span>
</div>
</div>
</a>
</div>
</section>
<!-- 댓글 섹션 -->
<section class="mt-6 border-t border-gray-200 pt-8 bg-gray-50 rounded-b-lg">
<h3 class="text-lg font-bold mb-4 px-4">댓글 0</h3>
<!-- 댓글 목록 -->
<div class="space-y-4 mb-6">
</div>
<!-- 댓글 페이징 -->
<!-- 댓글 작성 폼 -->
<div class="border border-gray-200 rounded-lg p-4">
<textarea id="commentContent" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="3" placeholder="댓글을 입력하세요"></textarea>
<div class="mt-2 flex justify-end">
<button onclick="submitComment()" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">댓글 등록</button>
</div>
</div>
</section>
</article>
</main>
</div>
<!-- ========== END MAIN CONTENT ========== -->
<!-- JavaScript for toggle menu -->
<script>
function toggleMenu(menuId) {
const menu = document.getElementById(menuId);
const icon = document.getElementById(menuId + 'Icon');
menu.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
}
// 좋아요 버튼 처리 함수
async function handleLike() {
try {
const response = await fetch(`read.php?id=1234&table=tip&action=like`, {
method: 'GET'
});
const data = await response.json();
if (data.success) {
// 좋아요 버튼 상태 업데이트
const likeButton = document.getElementById('likeButton');
const likeCount = document.getElementById('likeCount');
// 버튼 스타일 변경
likeButton.classList.add('bg-pink-100', 'text-pink-600');
likeButton.classList.remove('bg-gray-100', 'hover:bg-gray-200');
// 아이콘 색상 변경
likeButton.querySelector('svg').classList.add('text-pink-600');
likeButton.querySelector('svg').classList.remove('text-gray-600');
// 카운트 텍스트 색상 변경
likeCount.classList.add('text-pink-600');
likeCount.classList.remove('text-gray-600');
// 카운트 업데이트
likeCount.textContent = data.likes;
// 버튼 비활성화
likeButton.disabled = true;
} else {
alert(data.message || '이미 좋아요를 누르셨습니다.');
}
} catch (error) {
console.error('Error:', error);
alert('좋아요 처리 중 오류가 발생했습니다.');
}
}
function showDeleteModal() {
document.getElementById('deleteModal').classList.remove('hidden');
}
function hideDeleteModal() {
document.getElementById('deleteModal').classList.add('hidden');
}
function confirmDelete() {
window.location.href = `edit.php?mode=delete&id=1234&table=tip`;
}
// 모달 외부 클릭 시 닫기
document.addEventListener('click', function(event) {
const modal = document.getElementById('deleteModal');
if (event.target === modal) {
hideDeleteModal();
}
});
// ... 나머지 기존 함수들 ...
</script>
<!-- JSON-LD 구조화 데이터: Article -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Article","headline":"[코딩 자율학습 HTML + CSS + 자바스크립트] 1장 Hello, HTML + CSS + 자바스크립트 - 2","description":"#HTML기초 #비주얼스튜디오코드 #웹개발 #프로그래밍기초 #코딩튜토리얼 #myip [주요 목차] 목차1 🌐 HTML 문서 만들기 목차2 💻 개발 환경 설정 목차3 🗂️ 폴더 및 파일 생성 목차4 ✍️ HTML 기본 구조 작성 목차5 🔄 라이브 서버 실행 안녕하세요! ","url":"https://myip.co.kr/board/read.php?id=1234\u0026table=tip","datePublished":"2025-01-11T19:49:11+09:00","author":{"@type":"Person","name":"익명"},"publisher":{"@type":"Organization","name":"MyIP IDC","logo":{"@type":"ImageObject","url":"https://myip.co.kr/templates/logo.png"}},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0}],"mainEntityOfPage":{"@type":"WebPage","@id":"https://myip.co.kr/board/read.php?id=1234\u0026table=tip"},"image":"https://myip.co.kr/board/files/1234/67824ca70daa6.jpg","articleSection":"개발/프로그래밍","keywords":"HTML/CSS"}
</script>
<!-- JSON-LD 구조화 데이터: BreadcrumbList -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"홈","item":"https://myip.co.kr/"},{"@type":"ListItem","position":2,"name":"게시판","item":"https://myip.co.kr/board/list.php?table=tip"},{"@type":"ListItem","position":3,"name":"개발/프로그래밍","item":"https://myip.co.kr/board/list.php?table=tip\u0026category1=language"},{"@type":"ListItem","position":4,"name":"HTML/CSS","item":"https://myip.co.kr/board/list.php?table=tip\u0026category1=language\u0026category2=htmlcss"}]}
</script>
<!-- 공유하기 모달 -->
<div id="shareModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
<div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<h3 class="text-lg font-medium text-gray-900 text-center mb-4">공유하기</h3>
<div class="flex flex-col space-y-4">
<!-- 복사 완료 메시지 -->
<div id="copyMessage" class="hidden text-center py-2 text-green-600 bg-green-50 rounded-md">
링크가 복사되었습니다!
</div>
<!-- 링크 복사 버튼 -->
<button onclick="copyLink()" class="flex items-center justify-center space-x-2 px-4 py-3 rounded-md bg-gray-100 hover:bg-gray-200 text-gray-800 transition-colors duration-200">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
</svg>
<span>링크 복사하기</span>
</button>
</div>
<div class="mt-4">
<button onclick="hideShareModal()" class="w-full px-4 py-2 bg-gray-100 text-gray-800 text-base font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400">
닫기
</button>
</div>
</div>
</div>
</div>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
// 카카오톡 SDK 초기화
Kakao.init('YOUR_KAKAO_APP_KEY'); // 여기에 카카오 앱 키를 넣어주세요
// 공유하기 모달 표시
function showShareModal() {
document.getElementById('shareModal').classList.remove('hidden');
}
// 공유하기 모달 숨기기
function hideShareModal() {
document.getElementById('shareModal').classList.add('hidden');
}
// 카카오톡 공유하기
function shareKakao() {
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: '[코딩 자율학습 HTML + CSS + 자바스크립트] 1장 Hello, HTML + CSS + 자바스크립트 - 2',
description: document.querySelector('.prose').textContent.substring(0, 100) + '...',
imageUrl: '/board/files/1234/67824ca70daa6.jpg',
link: {
mobileWebUrl: window.location.href,
webUrl: window.location.href
}
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: window.location.href,
webUrl: window.location.href
}
}
]
});
}
// 링크 복사하기
function copyLink() {
const dummy = document.createElement('input');
document.body.appendChild(dummy);
dummy.value = window.location.href;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);
// 복사 완료 메시지 표시
const copyMessage = document.getElementById('copyMessage');
copyMessage.classList.remove('hidden');
// 2초 후 메시지 숨기기
setTimeout(() => {
copyMessage.classList.add('hidden');
}, 2000);
}
// 모달 외부 클릭 시 닫기
window.onclick = function(event) {
const modal = document.getElementById('shareModal');
if (event.target == modal) {
hideShareModal();
}
}
</script></div>
<!-- End Page Content -->
</div>
</main>
<!-- Footer -->
<footer class="bg-gradient-to-b from-gray-800 to-gray-900 mt-20">
<div class="mx-auto max-w-7xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<!-- 로고 및 연락처 -->
<div class="space-y-8">
<div>
<a href="/en/" class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center">
<i data-lucide="server" class="w-5 h-5 text-white"></i>
</div>
<span class="text-xl font-bold text-white">MyIP</span>
</a>
</div>
<div class="space-y-3">
<p class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="phone" class="w-5 h-5 text-primary-400"></i>
Customer Support 032-723-9999
</p>
<p class="text-sm text-gray-400">Mon-Fri 09:00 - 18:00 (Closed weekends/holidays)</p>
</div>
<!-- 소셜 미디어 -->
<div class="flex gap-x-4">
<a href="https://www.facebook.com/myipidc" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-primary-500/20 ring-1 ring-gray-600 flex items-center justify-center transition-colors group" aria-label="Go to Facebook page">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5 text-gray-400 group-hover:text-primary-400 transition-colors" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="https://www.instagram.com/myipidc" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-primary-500/20 ring-1 ring-gray-600 flex items-center justify-center transition-colors group" aria-label="Go to Instagram page">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5 text-gray-400 group-hover:text-primary-400 transition-colors" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="https://twitter.com/myipidc" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-primary-500/20 ring-1 ring-gray-600 flex items-center justify-center transition-colors group" aria-label="Go to X (Twitter) page">
<span class="sr-only">X</span>
<svg class="h-5 w-5 text-gray-400 group-hover:text-primary-400 transition-colors" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="https://github.com/myipidc" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-primary-500/20 ring-1 ring-gray-600 flex items-center justify-center transition-colors group" aria-label="Go to GitHub page">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5 text-gray-400 group-hover:text-primary-400 transition-colors" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="https://www.youtube.com/@myipidc" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-gray-700/50 hover:bg-primary-500/20 ring-1 ring-gray-600 flex items-center justify-center transition-colors group" aria-label="Go to YouTube channel">
<span class="sr-only">YouTube</span>
<svg class="h-5 w-5 text-gray-400 group-hover:text-primary-400 transition-colors" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- 링크 섹션 -->
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-white flex items-center gap-2">
<i data-lucide="server" class="w-4 h-4 text-primary-400"></i>
<a href="/en/product.php?S_content=서버호스팅" class="hover:text-primary-400 transition-colors">Server Hosting</a>
</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<!-- /expert_create.php -->
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="user-plus" class="w-4 h-4"></i>
Register as Seller
</a>
</li>
<li>
<!-- /expert_server.php -->
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="package-plus" class="w-4 h-4"></i>
Register Product
</a>
</li>
<li>
<a href="/en/game_server_register.php" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="gamepad-2" class="w-4 h-4"></i>
Promote Game Server
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="cloud" class="w-4 h-4"></i>
SaaS (Software as a Service)
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="settings" class="w-4 h-4"></i>
Server Management
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="code" class="w-4 h-4"></i>
Software Development
</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm font-semibold text-white flex items-center gap-2">
<i data-lucide="headphones" class="w-4 h-4 text-primary-400"></i>
Support
</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="/index.php?/tickets/new/" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="message-square-plus" class="w-4 h-4"></i>
Submit Ticket
</a>
</li>
<li>
<a href="/index.php?/knowledgebase/" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4"></i>
Knowledge Base
</a>
</li>
<li>
<a href="/index.php?/userapi" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="code-2" class="w-4 h-4"></i>
OpenAPI
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-white flex items-center gap-2">
<i data-lucide="building-2" class="w-4 h-4 text-primary-400"></i>
Company
</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="/en/map.php" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="map-pin" class="w-4 h-4"></i>
Location
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="users" class="w-4 h-4"></i>
Careers
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="handshake" class="w-4 h-4"></i>
Investment & Partnership
</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm font-semibold text-white flex items-center gap-2">
<i data-lucide="scale" class="w-4 h-4 text-primary-400"></i>
Legal
</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="/en/idctermsofuse.php" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4"></i>
Terms of Use
</a>
</li>
<li>
<a href="/en/idcprivacypolicy.php" class="text-sm text-gray-300 hover:text-primary-400 transition-colors flex items-center gap-2">
<i data-lucide="shield" class="w-4 h-4"></i>
Privacy Policy
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 결제 방식 지원 -->
<div class="mt-16 border-t border-gray-700/50 pt-8">
<div class="flex flex-col items-center gap-4 lg:flex-row lg:justify-center lg:gap-6">
<h3 class="text-sm font-semibold text-white flex items-center gap-2 shrink-0">
<i data-lucide="credit-card" class="w-4 h-4 text-primary-400"></i>
Payment Methods Supported :
</h3>
<div class="flex items-center gap-3 overflow-x-auto pb-2 -mx-2 px-2 max-w-full scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent">
<img src="/templates/modernpanel2026/assets/payment/visa.svg" alt="Visa 신용카드 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/mastercard.svg" alt="MasterCard 마스터카드 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/unionpay.PNG" alt="UnionPay 银联 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/paypal.PNG" alt="PayPal 페이팔 글로벌 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/alipay.PNG" alt="Alipay 支付宝 알리페이 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/wechatpay.png" alt="WeChat Pay 微信支付 위챗페이 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/TossPay_Logo_Primary.png" alt="Toss Pay 토스페이 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/NAVER_login_Light_KR_green_icon_H48.png" alt="Naver Pay 네이버페이 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/assets/payment/kakaopay.PNG" alt="Kakao Pay 카카오페이 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
<img src="/templates/modernpanel2026/images/crypto-300x91.png" alt="Crypto 암호화폐 BTC ETH USDT 결제 지원" class="h-[41px] w-auto shrink-0 bg-white rounded-lg p-2 shadow-sm" loading="lazy" decoding="async">
</div>
</div>
</div>
<!-- 하단 정보 -->
<div class="mt-12 border-t border-gray-700/50 pt-8">
<div class="space-y-2">
<p class="text-sm text-gray-300">© 2002 - 2026 Piranha Systems, Inc. All rights reserved.</p>
<p class="text-xs text-gray-500">주식회사 피란하시스템즈 대표이사 김영곤 / 통신판매업신고번호 : 2016-인천연수구-0264호 / 개인정보관리책임자 : 김안식</p>
<p class="text-xs text-gray-500">사업자등록번호 : 121-81-56339 | <b><a href=http://www.ftc.go.kr/info/bizinfo/communicationViewPopup.jsp?wrkr_no=1218156339 target=_blank>사업자정보확인</a></b> | 인천광역시 연수구 송도동 송도과학로 32, 송도테크노파크 IT센터 S동 25층</p>
</div>
</div>
</div>
</footer>
<!-- End of Footer -->
<!-- Lucide Icons 초기화 및 다크모드 토글 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Lucide Icons 초기화
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// 다크모드 토글 기능 - 모든 테마 토글 버튼 선택
const themeToggleBtns = document.querySelectorAll('#theme-toggle-btn, #theme-toggle-btn-logged');
const themeIconsLight = document.querySelectorAll('#theme-icon-light, .theme-icon-light');
const themeIconsDark = document.querySelectorAll('#theme-icon-dark, .theme-icon-dark');
// 현재 테마 상태에 따라 모든 아이콘 업데이트
function updateThemeUI() {
const isDark = document.documentElement.classList.contains('dark');
themeIconsLight.forEach(function(icon) {
if (isDark) {
icon.classList.remove('hidden');
} else {
icon.classList.add('hidden');
}
});
themeIconsDark.forEach(function(icon) {
if (isDark) {
icon.classList.add('hidden');
} else {
icon.classList.remove('hidden');
}
});
}
// 테마 토글 함수
function toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
updateThemeUI();
}
// 모든 테마 토글 버튼에 이벤트 리스너 추가
themeToggleBtns.forEach(function(btn) {
btn.addEventListener('click', toggleTheme);
});
// 초기 UI 상태 설정
updateThemeUI();
});
</script>
</div> </body>
</html> 