[웹 국비 교육 48일차] HTML, CSS, JS 활용: 메뉴아이템들 회전, 카운팅 애니메이션+full page 등 정리(25.7.31.)

안녕하세요! 

2025년 7월 31일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 48일차 수업 내용을 정리해보았습니다.

 

오늘은 HTML, CSS, JS를 활용하여, 

섹션의 정중앙에 중심을 두고 회전, 메뉴아이템들도 회전, 텍스트량에 따라 유연하게 길어지는 디자인, CSS로 프로그레스 바 및 숫자 카운팅 애니메이션 + full page에 대해 배웠습니다.

 

---

 

48일차 학습내용

 

43강

## 섹션의 정중앙에 중심을 두고 회전, 메뉴아이템들도 회전

 

 

/* 섹션 기본 크기 설정 */
.section {
    width: 1920px;
    height: 900px;
    margin: 0 auto;
}

/* 섹션1: 회전 애니메이션 포함 */
.section-1 {
    position: relative;
    overflow: hidden;
}

/* 요소를 화면 중앙에 위치시키기 */
.section-1 .abs-center-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 바깥 원 - 마우스 이벤트 비활성화 */
.section-1 .out-circle {
    pointer-events: none;
}

/* 바깥 원 이미지에 회전 애니메이션 */
.section-1 .out-circle > div > img {
    display: block;
    animation: rotate-1 40s linear infinite;
}

/* 두 번째 바깥 원은 반대 방향으로 설정 */
.section-1 .out-circle-2 > div {
    transform: rotate(180deg);
}

.section-1 .out-circle-2 > div > img {
    animation-direction: reverse;
}

/* 회전 애니메이션 키프레임 정의 */
@keyframes rotate-1 {
    100% {
        transform: rotate(360deg);
    }
}

/* 메뉴 박스 위치, 크기 및 패딩 설정 */
.section-1 .menu-box {
    width: 1000px;
    height: 1000px;
    position: absolute;
    padding: 200px;
}

/* 메뉴 박스 전체에 회전 효과 적용 */
.section-1 .menu-box > div {
    animation: rotate-1 45s linear infinite;
}

/* 마우스 올리면 회전 멈춤 */
.section-1 .menu-box:hover > div {
    animation-play-state: paused;
}

/* 개별 버튼은 반대 방향으로 회전 */
.section-1 .menu-box > div .btn {
    animation: rotate-1 45s linear infinite;
    animation-direction: reverse;
}

/* 마우스 올리면 버튼 회전 멈춤 */
.section-1 .menu-box:hover > div .btn {
    animation-play-state: paused;
}

/* 버튼에 마우스를 올리면 색상 변경 */
.section-1 .menu-box > div .btn:hover {
    color: white;
    background-color: black;
}

---

44강

## 텍스트량에 따라 유연하게 길어지는 디자인

---

45강

## CSS로 프로그레스 바 및 숫자 카운팅 애니메이션 + full page