Home기본 HTML CSS JS 코드를 포함합니다

on9월 25, 2025

368 view

기본 HTML CSS JS 코드를 포함합니다

기본 HTML, CSS 및 JavaScript 코드를 사용하여 텍스트 및 이미지에 링크를 추가하는 것과 같이 웹사이트를 만들고 사용자 정의하는 방법을 소개합니다. 포인트 또는 숫자 배열 글꼴을 통해 아이콘을 추가하여 웹사이트를 현대적으로 보이게 합니다. 다른 웹사이트의 콘텐츠를 iframe으로 포함하는 것을 포함하여 초보자가 웹 개발에 더 쉽게 이해하고 적용할 수 있도록 합니다.

10 min read

기본 HTML CSS JS 코드를 포함합니다

목차 목록 보여주다

텍스트와 간단한 그림의 링크

메시지에 링크를 입력합니다.

<p>
  Visit my website:
  <a href="https://siammakemoney.com" target="_blank">
    SiamMakeMoney
  </a>
</p>

사진에 링크를 추가하십시오.

<a href="https://siammakemoney.com" target="_blank">
  <img src="https://via.placeholder.com/300x200" alt="SiamMakeMoney">
</a>

평범한 사진

<img src="https://via.placeholder.com/300x200" alt="Sample Image">

글머리 기호 코드 예(점 목록)

목록에 하위 목록을 만드는 데 사용되는 HTML 태그입니다. (dot-list) 또는 (number-listed list)와 함께 사용됩니다. 그리고 명확하게 이해할 수 있습니다

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 40px;
}

/* Section box */
.list-box {
  max-width: 600px;
  background: #fff;
  padding: 25px 30px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

h2 {
  color: #333;
}

/* Unordered list */
ul.custom-ul {
  list-style: none;
  padding-left: 0;
}

ul.custom-ul li {
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
}

ul.custom-ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #4a6cff;
  font-weight: bold;
}

/* Ordered list */
ol.custom-ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

ol.custom-ol li {
  counter-increment: item;
  margin-bottom: 12px;
  padding-left: 30px;
  position: relative;
}

ol.custom-ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  background: #4a6cff;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 13px;
}
</style>


<div class="list-box">
  <h2>Unordered List (Bullet)</h2>
  <ul class="custom-ul">
    <li>Learn HTML basics</li>
    <li>Style pages with CSS</li>
    <li>Make websites interactive with JavaScript</li>
  </ul>
</div>

<div class="list-box">
  <h2>Ordered List (Numbered)</h2>
  <ol class="custom-ol">
    <li>Plan your website structure</li>
    <li>Design the layout and style</li>
    <li>Publish and improve continuously</li>
  </ol>
</div>

CSS 코드 삭제 포인트 `<li>` 총알

모두에 대한 글머리 기호를 삭제합니다 `<ul>` 그리고 `<ol>` 어디에나 상관없이

ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

의사 요소에서 글머리 기호를 삭제합니다

li::before {
  content: none !important;
}

아이콘 이미지를 추가합니다

아이콘은 첫 페이지 대신 집과 같은 의미 또는 일부 기능을 나타내는 작은 이미지입니다. 돋보기 이미지는 삭제 대신 검색이나 쓰레기통 대신에 많은 글자를 읽지 않고도 웹이나 앱이 즉시 전달하고 싶은 것을 이해하는 데 도움이 됩니다. 사용하기 쉽고 현대적으로 보이고 빠르게 의사 소통하십시오.

2.1 간단한 20×20 픽셀 이미지를 추가합니다.

<img src="https://example.com/icon.png" alt="icon" width="20" height="20">

글꼴 멋진 아이콘입니다

Font Awesome Icon은 웹사이트에서 사용되는 기성품 아이콘 세트입니다. 그것은 문자 또는 벡터의 형태로 제공됩니다. 글꼴을 조정하는 것과 같이 크기, 색상 및 패턴을 쉽게 조정할 수 있습니다. 홈 아이콘, 전화, 이메일 또는 소셜 미디어와 같은 기호 대신 사용하십시오. 여러 이미지 파일을 사용하지 않고도 웹사이트가 아름답고 현대적이며 빠르게 로드되도록 할 수 있습니다.

3.1 멋진 CDN 글꼴 추가(아직 없는 경우)

<head>
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>

3.2 아이콘을 삽입하고 크기를 조정합니다


<i class="fa-solid fa-house" style="font-size:20px;"></i>

<i class="fa-solid fa-star" style="font-size:20px;"></i>

3.3 (별도의 CSS가 필요한 경우)

<style>
.icon-small {
  font-size: 20px;
  color: #000; 
}
</style>

<i class="fa-solid fa-heart icon-small"></i>

iframe은 다른 웹 페이지를 포함합니다

iFrame은 YouTube 동영상, 지도, Google 지도 또는 외부 웹사이트와 같은 웹 페이지에 표시하기 위해 다른 웹사이트의 웹 페이지 또는 콘텐츠를 삽입하는 데 사용되는 HTML의 태그입니다. 우리 웹사이트에 올릴 다른 웹사이트의 "작은 창"을 가져오는 것과 같습니다. 내부의 내용도 원본 웹사이트에서 가져온 것입니다. 그러나 사용자는 해당 웹 페이지를 떠나지 않고 보고 상호 작용할 수 있습니다.

4.1 iframe은 웹 페이지를 포함합니다

<iframe 
  src="https://www.example.com" 
  width="800" 
  height="600">
</iframe>

4.2 iframe 포함 YouTube 동영상

<iframe 
  width="1349" 
  height="759" 
  src="https://www.youtube.com/embed/DZIASl9q90s" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

설명 표시(툴팁)

ToolTip은 사용자가 홈 화면을 방해하지 않고 텍스트, 아이콘 또는 버튼을 마우스를 가리키거나 탭할 때 추가 설명을 표시하는 작은 텍스트 상자입니다. 의미나 이해하기 쉽게 사용하는 방법을 설명하는 데 도움이 됩니다. 웹 또는 앱을 사용하기 쉽고 전문적으로 보이게 하는 짧은 가이드를 제공하는 데 적합합니다.

5.1 기본 툴팁

<style>
.tooltip {
  position: relative;
  cursor: pointer;
  color: #6a5acd;
  font-weight: bold;
}

.tooltip::after {
  content: attr(data-text);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
  opacity: 0;
  transition: 0.3s;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}
</style>

<p>
  Hover over <span class="tooltip" data-text="HTML defines the structure of a web page">HTML</span>
</p>

5.2 툴팁 페이드 + 슬라이드 프리미엄 보기

<style>
.tooltip-box {
  position: relative;
  display: inline-block;
  color: #009688;
  cursor: pointer;
}

.tooltip-box .tooltip-text {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: #009688;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tooltip-box:hover .tooltip-text {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
</style>

<p>
  Hover over 
  <span class="tooltip-box">
    CSS
    <span class="tooltip-text">CSS styles the website</span>
  </span>
</p>

5.3 툴팁 메시지를 클릭하면 표시됩니다.

<style>
.click-tooltip {
  position: relative;
  display: inline-block;
  color: #e91e63;
  cursor: pointer;
}

.click-tooltip .tooltip-content {
  display: none;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #e91e63;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  white-space: nowrap;
}
</style>

<p>
  <span class="click-tooltip" onclick="toggleTooltip(this)">
    JavaScript
    <span class="tooltip-content">JavaScript makes websites interactive</span>
  </span>
</p>

<script>
function toggleTooltip(element) {
  const tooltip = element.querySelector(".tooltip-content");
  tooltip.style.display = tooltip.style.display === "block" ? "none" : "block";
}
</script>

팝업 카드 팝업 카드 를 클릭합니다

팝업 카드를 클릭합니다. 사용자가 버튼, 텍스트 또는 이미지를 클릭하면 웹 페이지를 변경하지 않고 사진, 이름, 아이콘 또는 설명과 같은 자세한 내용을 표시하기 위해 화면에 "카드"가 표시되는 정보를 표시하는 형식입니다. 정보를 편리하게 볼 수 있도록 도와줍니다. 사용을 현대적이고 전문적으로 보이게하십시오

6.1 팝업 카드(HTML + CSS + JS) 클릭


<style>
body {
  font-family: Arial, sans-serif;
  background: #f4f6f8;
  text-align: center;
  padding-top: 100px;
}

/* Button */
.open-btn {
  padding: 12px 24px;
  font-size: 16px;
  background: #4a6cff;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Card */
.popup-card {
  background: #fff;
  width: 360px;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  animation: pop 0.3s ease;
}

@keyframes pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Close button */
.close-btn {
  margin-top: 20px;
  padding: 8px 18px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>


<body>

<button class="open-btn" onclick="openCard()">Click Me</button>

<div class="overlay" id="overlay">
  <div class="popup-card">
    <h2>Hello 👋</h2>
    <p>This is a popup card shown after clicking.</p>
    <button class="close-btn" onclick="closeCard()">Close</button>
  </div>
</div>

<script>
function openCard() {
  document.getElementById("overlay").style.display = "flex";
}

function closeCard() {
  document.getElementById("overlay").style.display = "none";
}
</script>

</body>

6.2 그림, 아이콘 및 설명이 있는 팝업 카드를 클릭합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup Card with Image</title>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f2f4f8;
  text-align: center;
  padding-top: 100px;
}

/* Button */
.open-btn {
  padding: 12px 26px;
  background: #4a6cff;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Card */
.card {
  background: #fff;
  width: 360px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  animation: pop 0.3s ease;
}

@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Image */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Content */
.card-content {
  padding: 24px;
}

.card-content h2 {
  margin: 10px 0;
}

.icon {
  font-size: 32px;
  color: #4a6cff;
}

.description {
  color: #555;
  margin-top: 10px;
  font-size: 15px;
}

/* Close button */
.close-btn {
  margin-top: 20px;
  padding: 8px 20px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>

<body>

<button class="open-btn" onclick="openCard()">Show Card</button>

<div class="overlay" id="overlay" onclick="closeCard()">
  <div class="card" onclick="event.stopPropagation()">

    <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f" alt="Image">

    <div class="card-content">
      <div class="icon">
        <i class="fa-solid fa-lightbulb"></i>
      </div>

      <h2>SiamMakeMoney</h2>

      <p class="description">
        Learn digital skills and build online income with practical knowledge.
      </p>

      <button class="close-btn" onclick="closeCard()">Close</button>
    </div>

  </div>
</div>

<script>
function openCard() {
  document.getElementById("overlay").style.display = "flex";
}

function closeCard() {
  document.getElementById("overlay").style.display = "none";
}
</script>

</body>
</html>

6.3 아름다운 팝업 카드 + SEO 친화적

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiamMakeMoney – SEO Friendly Popup</title>
<meta name="description" content="Learn digital skills and build online income with SiamMakeMoney">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 60px;
  text-align: center;
}

/* Main content */
h1 {
  color: #333;
}

p {
  color: #555;
  max-width: 600px;
  margin: 20px auto;
}

/* Button */
.open-btn {
  padding: 10px 22px;
  border-radius: 25px;
  border: none;
  background: #4a6cff;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
}

/* Overlay */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Card */
.popup-card {
  background: #fff;
  width: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  animation: popup 0.3s ease;
}

@keyframes popup {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Image */
.popup-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Content */
.card-content {
  padding: 24px;
}

.card-content h2 {
  margin: 12px 0;
  color: #333;
}

.icon {
  font-size: 30px;
  color: #4a6cff;
}

.description {
  font-size: 15px;
  color: #555;
  margin-top: 10px;
}

/* Close button */
.close-btn {
  margin-top: 18px;
  padding: 8px 18px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>

<body>

<main>
  <!-- SEO main content -->
  <h1>SiamMakeMoney</h1>
  <p>
    SiamMakeMoney helps people learn digital skills and build sustainable
    online income with practical knowledge.
  </p>

  <button class="open-btn" onclick="openPopup()">Learn More</button>

  <!-- Popup (content already in HTML = SEO friendly) -->
  <section class="popup-overlay" id="popup" onclick="closePopup()">
    <article class="popup-card" onclick="event.stopPropagation()">

      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f" alt="Digital learning">

      <div class="card-content">
        <div class="icon">
          <i class="fa-solid fa-lightbulb"></i>
        </div>

        <h2>Digital Knowledge</h2>

        <p class="description">
          Learn online business, marketing, and digital skills with step-by-step
          guidance designed for real results.
        </p>

        <button class="close-btn" onclick="closePopup()">Close</button>
      </div>

    </article>
  </section>
</main>

<script>
function openPopup() {
  document.getElementById("popup").style.display = "flex";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}
</script>

</body>
</html>

6.4 동적 팝업 카드(단일 HTML 파일)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SiamMakeMoney – Dynamic Cards</title>
<meta name="description" content="Learn digital skills and build online income with SiamMakeMoney">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 40px;
  text-align: center;
}

/* Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 40px auto;
}

/* Card item */
.card-item {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.card-item:hover {
  transform: translateY(-5px);
}

.card-item i {
  font-size: 32px;
  color: #4a6cff;
}

.card-item h3 {
  margin-top: 10px;
  color: #333;
}

/* Popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.popup-card {
  background: #fff;
  width: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  animation: popup 0.3s ease;
}

@keyframes popup {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.popup-content {
  padding: 24px;
}

.popup-content h2 {
  margin: 10px 0;
}

.popup-content p {
  color: #555;
}

.close-btn {
  margin-top: 15px;
  padding: 8px 18px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>

<body>

<h1>SiamMakeMoney</h1>
<p>Click a card to learn more</p>

<!-- Cards -->
<div class="card-grid" id="cardGrid"></div>

<!-- Popup -->
<div class="popup-overlay" id="popup" onclick="closePopup()">
  <div class="popup-card" onclick="event.stopPropagation()">
    <img id="popupImage" src="" alt="">
    <div class="popup-content">
      <i id="popupIcon" class=""></i>
      <h2 id="popupTitle"></h2>
      <p id="popupDescription"></p>
      <button class="close-btn" onclick="closePopup()">Close</button>
    </div>
  </div>
</div>

<script>
// Card data (Dynamic)
const cards = [
  {
    title: "Online Business",
    icon: "fa-solid fa-briefcase",
    image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
    description: "Learn how to build and grow online businesses step by step."
  },
  {
    title: "Digital Marketing",
    icon: "fa-solid fa-bullhorn",
    image: "https://images.unsplash.com/photo-1557838923-2985c318be48",
    description: "Understand SEO, ads, and social media marketing strategies."
  },
  {
    title: "Passive Income",
    icon: "fa-solid fa-coins",
    image: "https://images.unsplash.com/photo-1605902711622-cfb43c44367f",
    description: "Create income streams that work for you automatically."
  }
];

// Render cards
const cardGrid = document.getElementById("cardGrid");

cards.forEach((card, index) => {
  const div = document.createElement("div");
  div.className = "card-item";
  div.innerHTML = `
    <i class="${card.icon}"></i>
    <h3>${card.title}</h3>
  `;
  div.onclick = () => openPopup(card);
  cardGrid.appendChild(div);
});

// Popup functions
function openPopup(card) {
  document.getElementById("popupImage").src = card.image;
  document.getElementById("popupImage").alt = card.title;
  document.getElementById("popupIcon").className = card.icon;
  document.getElementById("popupTitle").textContent = card.title;
  document.getElementById("popupDescription").textContent = card.description;
  document.getElementById("popup").style.display = "flex";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}
</script>

</body>
</html>

기본 테이블 코드

테이블은 데이터를 행과 열로 배열된 필드로 배열하는 형식입니다. 가격표, 목록 표 또는 점수 결과와 같이 정보를 정리하고 쉽게 비교할 수 있도록 하여 독자가 정보를 명확하게 보고, 빠르게 이해하고, 원하는 정보를 쉽게 찾을 수 있도록 합니다.

7.1 기본 응답 테이블 코드는 모든 장치를 지원합니다

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 40px;
}

/* Table wrapper */
.table-container {
  max-width: 1000px;
  margin: auto;
  overflow-x: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

thead {
  background: #4a6cff;
  color: #fff;
}

th, td {
  padding: 14px 16px;
  text-align: left;
}

th {
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background: #f2f4f8;
}

tbody tr:hover {
  background: #eaf0ff;
}

/* Mobile view */
@media (max-width: 600px) {
  table {
    min-width: 100%;
  }
}
</style>
</head>

<body>

<h2>Course List</h2>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Course</th>
        <th>Level</th>
        <th>Duration</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML Basics</td>
        <td>Beginner</td>
        <td>4 Weeks</td>
        <td>Free</td>
      </tr>
      <tr>
        <td>CSS Design</td>
        <td>Intermediate</td>
        <td>6 Weeks</td>
        <td>$49</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>Advanced</td>
        <td>8 Weeks</td>
        <td>$99</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

7.2 아이콘 + 클릭 가능한 이름 + 팝업 + 웹 사이트 버튼이있는 테이블

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 40px;
}

/* Table container */
.table-container {
  max-width: 1000px;
  margin: auto;
  overflow-x: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

thead {
  background: #4a6cff;
  color: #fff;
}

th, td {
  padding: 14px 16px;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f2f4f8;
}

/* Name clickable */
.name {
  color: #4a6cff;
  font-weight: bold;
  cursor: pointer;
}

.icon {
  margin-right: 8px;
  color: #4a6cff;
}

/* Button */
.visit-btn {
  padding: 8px 16px;
  background: #4caf50;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: 14px;
}

/* Popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.popup-card {
  background: #fff;
  width: 360px;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  animation: pop 0.3s ease;
}

@keyframes pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close-btn {
  margin-top: 16px;
  padding: 8px 18px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>

<body>

<h2>Learning Platforms</h2>

<div class="table-container">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <i class="fa-solid fa-lightbulb icon"></i>
        <span class="name" onclick="openPopup('SiamMakeMoney','A platform that teaches digital skills and online income step by step.')">
          SiamMakeMoney
        </span>
      </td>
      <td>Online Business</td>
      <td>
        <a class="visit-btn" href="https://siammakemoney.com" target="_blank">
          Visit
        </a>
      </td>
    </tr>

    <tr>
      <td>
        <i class="fa-solid fa-code icon"></i>
        <span class="name" onclick="openPopup('Web Learning','Learn HTML, CSS, and JavaScript from beginner to advanced.')">
          Web Learning
        </span>
      </td>
      <td>Programming</td>
      <td>
        <a class="visit-btn" href="https://www.w3schools.com" target="_blank">
          Visit
        </a>
      </td>
    </tr>
  </tbody>
</table>
</div>

<!-- Popup -->
<div class="popup-overlay" id="popup" onclick="closePopup()">
  <div class="popup-card" onclick="event.stopPropagation()">
    <h3 id="popupTitle"></h3>
    <p id="popupDescription"></p>
    <button class="close-btn" onclick="closePopup()">Close</button>
  </div>
</div>

<script>
function openPopup(title, description) {
  document.getElementById("popupTitle").textContent = title;
  document.getElementById("popupDescription").textContent = description;
  document.getElementById("popup").style.display = "flex";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}
</script>

</body>
</html>

7.3 아이콘 + 클릭 가능한 이름 + 팝업 + 웹 사이트 버튼이있는 테이블

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Table with Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  padding: 40px;
}

/* Table container */
.table-container {
  max-width: 1100px;
  margin: auto;
  overflow-x: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

thead {
  background: #4a6cff;
  color: #fff;
}

th, td {
  padding: 14px 16px;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f2f4f8;
}

/* Icon image */
.icon-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Clickable name */
.name {
  color: #4a6cff;
  font-weight: bold;
  cursor: pointer;
}

/* Stars */
.stars {
  color: #ffb400;
  font-size: 16px;
}

/* Popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
}

.popup-card {
  background: #fff;
  width: 400px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  animation: popup 0.3s ease;
}

@keyframes popup {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.popup-content {
  padding: 24px;
}

.popup-content h3 {
  margin: 10px 0;
}

.popup-content p {
  color: #555;
  font-size: 15px;
}

.price {
  margin: 12px 0;
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}

.popup-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.visit-btn {
  padding: 10px 18px;
  background: #4a6cff;
  color: #fff;
  text-decoration: none;
  border-radius: 22px;
  font-size: 14px;
}

.close-btn {
  padding: 8px 16px;
  border: none;
  background: #e91e63;
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>

<body>

<h2>Recommended Platforms</h2>

<div class="table-container">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Rating</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="https://cdn-icons-png.flaticon.com/512/1828/1828884.png" class="icon-img" alt="icon">
        <span class="name"
          onclick="openPopup(
            'SiamMakeMoney',
            'https://images.unsplash.com/photo-1522202176988-66273c2fd55f',
            'A platform that teaches digital skills and online income step by step.',
            '$49 / month',
            'https://siammakemoney.com'
          )">
          SiamMakeMoney
        </span>
      </td>
      <td>Online Business</td>
      <td class="stars">★★★★★</td>
      <td>
        <a class="visit-btn" href="https://siammakemoney.com" target="_blank">Visit</a>
      </td>
    </tr>

    <tr>
      <td>
        <img src="https://cdn-icons-png.flaticon.com/512/1055/1055687.png" class="icon-img" alt="icon">
        <span class="name"
          onclick="openPopup(
            'Web Learning',
            'https://images.unsplash.com/photo-1518770660439-4636190af475',
            'Learn HTML, CSS, and JavaScript from beginner to advanced.',
            'Free',
            'https://www.w3schools.com'
          )">
          Web Learning
        </span>
      </td>
      <td>Programming</td>
      <td class="stars">★★★★☆</td>
      <td>
        <a class="visit-btn" href="https://www.w3schools.com" target="_blank">Visit</a>
      </td>
    </tr>
  </tbody>
</table>
</div>

<!-- Popup -->
<div class="popup-overlay" id="popup" onclick="closePopup()">
  <div class="popup-card" onclick="event.stopPropagation()">
    <img id="popupImage" src="" alt="">
    <div class="popup-content">
      <h3 id="popupTitle"></h3>
      <p id="popupDescription"></p>
      <div class="price" id="popupPrice"></div>

      <div class="popup-actions">
        <a id="popupLink" class="visit-btn" href="#" target="_blank">Visit Website</a>
        <button class="close-btn" onclick="closePopup()">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
function openPopup(title, image, description, price, link) {
  document.getElementById("popupTitle").textContent = title;
  document.getElementById("popupImage").src = image;
  document.getElementById("popupDescription").textContent = description;
  document.getElementById("popupPrice").textContent = price;
  document.getElementById("popupLink").href = link;
  document.getElementById("popup").style.display = "flex";
}

function closePopup() {
  document.getElementById("popup").style.display = "none";
}
</script>

</body>
</html>

가장 간단한 링크 코드

링크 버튼 사용자가 다른 웹 사이트로 이동하는 것, 등록 또는 자세한 내용을 보는 것과 같이 사용자가 명확하고 클릭 가능하며 즉시 이해할 수 있도록 버튼처럼 보이도록 설계된 일반 텍스트인 웹 사이트 링크를 가져오는 것입니다. 링크 버튼은 종종 CSS와 함께 HTML에서 생성됩니다. 여전히 일반 링크처럼 작동하지만(SEO에 적합하고 사용하기 쉽습니다), 아름다운 모양과 사용자가 클릭할 가능성을 높입니다.

<style>
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #4a6cff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 25px;
  font-size: 16px;
}
</style>
<a href="https://siammakemoney.com" class="btn" target="_blank">
  Visit Website
</a>

8.1 호버 효과가 있는 링크 버튼

<style>
.btn {
  padding: 12px 24px;
  background: #4a6cff;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
}

.btn:hover {
  background: #324de3;
  transform: translateY(-2px);
}
</style>

<br>
<a href="https://siammakemoney.com" class="btn" target="_blank">
  Visit Website
</a>

기본 메뉴 코드

메뉴 코드는 웹사이트에서 메뉴 모음을 만드는 데 사용되는 명령의 집합입니다. 사용자가 홈 회사 소개, 서비스 또는 문의하기와 같은 페이지로 이동하기 위해 클릭하기 위해 메뉴 코드는 일반적으로 링크 구조를 위한 HTML, 장식용 CSS로 구성되며 줌 메뉴 또는 모바일 메뉴와 같은 특수 기능을 향상시키기 위한 JavaScript를 포함할 수 있습니다. 메뉴 코드를 사용하면 웹사이트를 사용하기 쉽고 구성하며 사용자가 필요한 정보를 더 빠르게 찾을 수 있습니다.

9.1 기본 탐색 메뉴

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Menu</title>
<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

nav {
  background: #4a6cff;
  padding: 12px 24px;
}

nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
  font-weight: bold;
}
</style>
</head>

<body>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

</body>
</html>

9.2 반응식 메뉴(모든 기기에서 권장)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

nav {
  background: #4a6cff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.menu-btn {
  display: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    background: #4a6cff;
    position: absolute;
    top: 56px;
    right: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  .menu.show {
    display: flex;
  }

  .menu-btn {
    display: block;
  }
}
</style>
</head>

<body>

<nav>
  <div class="logo">MyWebsite</div>

  <div class="menu-btn" onclick="toggleMenu()">☰</div>

  <div class="menu" id="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

<script>
function toggleMenu() {
  document.getElementById("menu").classList.toggle("show");
}
</script>

</body>
</html>

코드 그리드 카드(카드 그리드)

그리드 카드 그리드(그리드)에 배열된 여러 "카드"를 사용하여 웹사이트의 콘텐츠 형식입니다. 제품, 기사, 서비스 또는 코스를 나열하는 데 적합합니다. 그리드 카드의 장점은 조직적이고 아름답고 읽기 쉽고 화면 크기에 따라 열 수를 자동으로 조정할 수 있다는 것입니다. 컴퓨터와 휴대폰 모두에서 잘 작동하도록 합니다.

10.1 카드 그리드 – 반응형

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beautiful Card Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
  margin: 0;
  padding: 40px;
  font-family: Arial, sans-serif;
  background: #f0f2f5;
}

/* Grid */
.grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Card */
.card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  position: relative;
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* Badge */
.badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #ff5722;
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
}

/* Icon */
.icon {
  font-size: 40px;
  margin-bottom: 16px;
}

/* Content */
.card h3 {
  margin: 0 0 10px;
}

.card p {
  font-size: 14px;
  color: #555;
}

/* Button */
.card a {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;
  background: #4a6cff;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  font-size: 14px;
}
</style>
</head>

<body>

<h2 style="text-align:center;">Our Services</h2>

<div class="grid">

  <div class="card">
    <span class="badge">Popular</span>
    <div class="icon">🚀</div>
    <h3>Online Business</h3>
    <p>Learn how to build online income step by step.</p>
    <a href="#">Learn More</a>
  </div>

  <div class="card">
    <span class="badge">New</span>
    <div class="icon">💻</div>
    <h3>Web Development</h3>
    <p>HTML, CSS, JavaScript for beginners.</p>
    <a href="#">Learn More</a>
  </div>

  <div class="card">
    <div class="icon">📈</div>
    <h3>Digital Marketing</h3>
    <p>Grow your business with online marketing.</p>
    <a href="#">Learn More</a>
  </div>

</div>

</body>
</html>

Facebook Comments Box

admin.siammakemoney

on9월 25, 2025

368 view

이전 기사

기본 HTML CSS JS 코드를 포함합니다

기본 HTML CSS JS 코드를 포함합니다

텍스트와 간단한 그림의 링크

메시지에 링크를 입력합니다.

사진에 링크를 추가하십시오.

평범한 사진

글머리 기호 코드 예(점 목록)

CSS 코드 삭제 포인트 <li> 총알

모두에 대한 글머리 기호를 삭제합니다 <ul> 그리고 <ol> 어디에나 상관없이

의사 요소에서 글머리 기호를 삭제합니다

아이콘 이미지를 추가합니다

2.1 간단한 20×20 픽셀 이미지를 추가합니다.

글꼴 멋진 아이콘입니다

3.1 멋진 CDN 글꼴 추가(아직 없는 경우)

3.2 아이콘을 삽입하고 크기를 조정합니다

3.3 (별도의 CSS가 필요한 경우)

iframe은 다른 웹 페이지를 포함합니다

4.1 iframe은 웹 페이지를 포함합니다

4.2 iframe 포함 YouTube 동영상

설명 표시(툴팁)

5.1 기본 툴팁

5.2 툴팁 페이드 + 슬라이드 프리미엄 보기

5.3 툴팁 메시지를 클릭하면 표시됩니다.

팝업 카드 팝업 카드 를 클릭합니다

6.1 팝업 카드(HTML + CSS + JS) 클릭

6.2 그림, 아이콘 및 설명이 있는 팝업 카드를 클릭합니다.

6.3 아름다운 팝업 카드 + SEO 친화적

6.4 동적 팝업 카드(단일 HTML 파일)

기본 테이블 코드

7.1 기본 응답 테이블 코드는 모든 장치를 지원합니다

7.2 아이콘 + 클릭 가능한 이름 + 팝업 + 웹 사이트 버튼이있는 테이블

7.3 아이콘 + 클릭 가능한 이름 + 팝업 + 웹 사이트 버튼이있는 테이블

가장 간단한 링크 코드

8.1 호버 효과가 있는 링크 버튼

기본 메뉴 코드

9.1 기본 탐색 메뉴

9.2 반응식 메뉴(모든 기기에서 권장)

코드 그리드 카드(카드 그리드)

10.1 카드 그리드 – 반응형

15개의 무료 플러그인 링크 관리 링크 삽입 WordPress에서 AFF 링크 단축

초보자를 위한 블로거 테마 제작 가이드: 블로거 빈 페이지

Read Next

초보자를 위한 블로거 테마 제작 가이드: 블로거 빈 페이지

Softr의 AI 도구를 사용하여 Google Sheets 기반의 디렉토리 웹사이트를 손쉽게 무료로 제작하세요! 💯

(3분만에 알려드립니다) 초보자를 위한, 그리고 여러분이 모르는 비밀 팁.

CSS 코드 삭제 포인트 `<li>` 총알

모두에 대한 글머리 기호를 삭제합니다 `<ul>` 그리고 `<ol>` 어디에나 상관없이