코드 해석_0326_뱃지/종/아이콘/폰트어썸/플렉스/저스티피콘텐츠/포지션/릴레티브/앱솔루트

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

#뱃지 #종 #아이콘 #폰트어썸 #플렉스 #저스티피콘텐츠 #포지션 #릴레티브 #앱솔루트

'<401>' 카테고리의 다른 글

[Flexible and fixed] 브라우저 넓이에 반응하는 웹사이트 코딩 실무 예제 (0)	2026.04.08
[HD] HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 (0)	2026.04.08
코드 해석_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate (0)	2026.03.27
코드 해석_3/27_노란 박스를 화면 정중앙에 배치시키는 방법 (0)	2026.03.27
코드 해석_0325_회원가입폼/필수입력/자동포커스/읽기전용/안내문구/메일형식/자동검사/셀렉터/수도클래스/의사클래스/가상클래스 (0)	2026.03.25

'<401>' Related Articles

無제

코드 해석_0326_뱃지/종/아이콘/폰트어썸/플렉스/저스티피콘텐츠/포지션/릴레티브/앱솔루트 본문

코드 해석_0326_뱃지/종/아이콘/폰트어썸/플렉스/저스티피콘텐츠/포지션/릴레티브/앱솔루트

'<401>' 카테고리의 다른 글

티스토리툴바