[웹 국비 교육 47일차] HTML, CSS, JS 활용: mix-blend-mode, 커서 효과, overlay 등 정리(25.7.30.)

안녕하세요! 

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

 

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

mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환, 커서효과, 스크롤바 overlay, 밑줄의 너비를 글자의 크기와 맞추는 방법, 다각형 호버 변환, 텍스트에 외곽선 효과, 텍스트 외곽선 마우스 움직임 효과에 대해 배웠습니다.

 

---

 

47일차 학습내용

 

36강

## mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

---

37강

## 커서효과

---

38강

## 스크롤바 overlay

---

39강

## 밑줄의 너비를 글자의 크기와 맞추는 방법

---

40강

## 다각형 호버 변환

---

41강

## 텍스트에 외곽선 효과

•  텍스트 외곽선 효과 자세한 설명 (사이트 바로가기)

/* 폰트 */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html > body,
html > body input,
html > body button,
html > body textarea {
  font-family: 'Pretendard-Regular';
}

.section-1 {
    min-height: 100vh;
}

.text-12 {
    font-size: 12rem;
    line-height: 1;
}

.text-7 {
    font-size: 7rem;
    line-height: 1;
}

.border-text {
    --border-width: 2px;
    --color: rgba(0, 0, 0, 0.5);
    color: white;
    text-shadow: 
        calc(var(--border-width) * -1) 0 0 var(--color), 
        calc(var(--border-width) * 1) 0 0 var(--color), 
        0 calc(var(--border-width) * -1) 0 var(--color), 
        0 calc(var(--border-width) * 1) 0 var(--color);
}

---

42강

## 텍스트 외곽선 마우스 움직임 효과

 

---

 

마무리