Web/슈퍼코딩

(2024.11.25(월요일)) 슈퍼코딩 (신입연수원) 1주차 Day 2 후기

유니얼 2024. 11. 26. 22:13
728x90

오늘의 과제

오늘은 알림 이미지 HTML 구현 과제를 진행했습니다. 벨 모양 이미지를 사용하고 그 위에 빨간색 원으로 알림 배지를 추가해 숫자를 표시하는 작업이었습니다. HTML 구조와 CSS를 사용해 디자인을 구현했고, 특히 position: absolute 속성을 활용하여 위치를 조정하는 데 집중했습니다.

과제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bell {
            position: absolute;

            width: 200px;
            height: 200px;
        }

        .circle {
            width: 60px;
            height: 60px;
            background-color: red;
            border: 3px solid white;
            border-radius: 50%;
            position: absolute;
            right: 25px;
            top: 15px;
        }

        .circle span {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;
            font-size: 40px;
            color: white;
        }

    </style>

</head>
<body>
    <div class="bell">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
            <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z" clip-rule="evenodd" />
        </svg>
        <div class="circle">
            <span>1</span>
        </div>
    </div>

</body>
</html>

학습범위

11강 HTML로 간단한 회원가입 페이지 만들기 ~ 15강 CSS 선택자와 상태

 

일일 보고 양식

  1. 부족한 점 : position: absolute 속성 사용 시 부모 요소의 relative 설정을 놓쳤던 점.
  2. 스스로 시도해본 것들 : CSS 속성 실험으로 position의 동작 원리 확인.
  3. 알게된 점 : absolute와 relative의 관계 및 z-index 활용 방법.
  4. 회고 : 기본적인 HTML, CSS 활용 능력을 점검할 수 있었고, 디테일한 구현 방법에 대해 더 고민해볼 기회가 됐습니다.
반응형