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

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

2024년 11월 26일
- 유니얼
- 작성자
- 2024.11.26.: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 선택자와 상태

일일 보고 양식

부족한 점 : position: absolute 속성 사용 시 부모 요소의 relative 설정을 놓쳤던 점.

스스로 시도해본 것들 : CSS 속성 실험으로 position의 동작 원리 확인.

알게된 점 : absolute와 relative의 관계 및 z-index 활용 방법.

회고 : 기본적인 HTML, CSS 활용 능력을 점검할 수 있었고, 디테일한 구현 방법에 대해 더 고민해볼 기회가 됐습니다.
반응형
다음글

다음 글이 없습니다.

이전글

이전 글이 없습니다.

댓글

오늘의 과제

과제 코드

학습범위

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

일일 보고 양식

티스토리툴바