Notice
Recent Posts
Recent Comments
Link
ยซ   2026/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

็„ก์ œ

์ฝ”๋“œ ํ•ด์„_0326_๋ฑƒ์ง€/์ข…/์•„์ด์ฝ˜/ํฐํŠธ์–ด์ธ/ํ”Œ๋ ‰์Šค/์ €์Šคํ‹ฐํ”ผ์ฝ˜ํ…์ธ /ํฌ์ง€์…˜/๋ฆด๋ ˆํ‹ฐ๋ธŒ/์•ฑ์†”๋ฃจํŠธ ๋ณธ๋ฌธ

<401>

์ฝ”๋“œ ํ•ด์„_0326_๋ฑƒ์ง€/์ข…/์•„์ด์ฝ˜/ํฐํŠธ์–ด์ธ/ํ”Œ๋ ‰์Šค/์ €์Šคํ‹ฐํ”ผ์ฝ˜ํ…์ธ /ํฌ์ง€์…˜/๋ฆด๋ ˆํ‹ฐ๋ธŒ/์•ฑ์†”๋ฃจํŠธ

yo-u-loo 2026. 3. 26. 17:41

 

๐Ÿ‘‡๐Ÿป โ€ŠHTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>๊ฐ€์ƒ ์š”์†Œ</title>
  <!-- Font Awesome ์•„์ด์ฝ˜ URL -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body {
      display: flex; /* ํ•œ ๋ฐฉํ–ฅ ์š”์†Œ ์ •๋ ฌ */
      justify-content: center; /* ๊ฐ€๋กœ ์ค‘์•™ ์ •๋ ฌ */
      align-items: center; /* ์„ธ๋กœ ์ค‘์•™ ์ •๋ ฌ */
      height: 100vh; /* ํ™”๋ฉด ์ „์ฒด ๋†’์ด */
    }
    
    /* ์•„์ด์ฝ˜ ๋ถ€๋ชจ ์š”์†Œ */
    .icon {
      width:30px;
      height: 30px;
      position: relative; /* ์ž์‹ ์š”์†Œ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜ */
    }

    /* ์•„์ด์ฝ˜ ์ž์‹ ์š”์†Œ */
    .icon i::after { /* icon์˜ i์˜ ์˜ค๋ฅธ์ชฝ์— ์ ์šฉ */
      content: "4"; /* ๋ฑƒ์ง€ ์•ˆ์— ๋“ค์–ด๊ฐˆ ์ˆซ์ž */
      font-size: 10px;
      text-align: center;
      background-color: red; /* ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ */
      color: white; /* ๊ธ€์ž ์ƒ‰์ƒ */
      border-radius: 50%; /* ์›ํ˜• */
      padding: 5px; /* ๋ฑƒ์ง€ ์‚ฌ์ด์ฆˆ */
      position: absolute; /* ๋ถ€๋ชจ ์š”์†Œ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ */
      top: -5px; /* ๋ฑƒ์ง€ ์ƒ๋‹จ์œผ๋กœ ์ด๋™ */
      right: -3px; /* ๋ฑƒ์ง€ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™ */
    }
  </style>
</head>
<body>
  <div class="icon">
    <!-- ์ข… ์•„์ด์ฝ˜ -->
    <i class="fa-regular fa-bell fa-2x"></i>  
  </div>
</body>
</html>

๐Ÿ‘†๐Ÿปโ€Š 13/results/badge.html

http://127.0.0.1:5500/doit-hcj-new-main/14/results/mysoul7.html

 

#html #fontawsome #flex #justify-content #position #relative #absolute

#๋ฑƒ์ง€ #์ข… #์•„์ด์ฝ˜ #ํฐํŠธ์–ด์ธ #ํ”Œ๋ ‰์Šค #์ €์Šคํ‹ฐํ”ผ์ฝ˜ํ…์ธ  #ํฌ์ง€์…˜ #๋ฆด๋ ˆํ‹ฐ๋ธŒ #์•ฑ์†”๋ฃจํŠธ