47일차
HTML, CSS, JS 활용 36강 mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환
개요
mix-blend-mode: difference를 활용해 탑바 배경과 섹션 배경의 색상이 대비되도록 자동 변환됨.
JS 없이도 시각적 변화 표현 가능. hover나 scroll 감지 없이 CSS로 해결하는 방식.
핵심 코드 요약
html
<header class="top-bar"></header>
<section class="section section-1"></section>
<section class="section section-2"></section>
<section class="section section-3"></section>
css
body { margin: 0; }
.top-bar { position: fixed; top: 0; left: 0; height: 60px; width: 100%; background: white; mix-blend-mode: difference; z-index: 999; }
.section { height: 100vh; }
.section-1 { background-color: white; }
.section-2 { background-color: black; }
.section-3 { background-color: red; }
작동 방식
| 항목 | 설명 |
|---|---|
mix-blend-mode: difference | 배경색과 top-bar 색이 서로 반전되게 섞임 |
.top-bar | 배경색이 white로 고정되지만, 섹션에 따라 시각적으로 달라 보임 |
.section-X | 섹션별 배경색 설정됨 (white, black, red 등) |
| JS 사용 여부 | 없음 – CSS만으로 구현 |
mix-blend-mode: difference 작동 원리
- 두 색상을 서로 비교해서 시각적으로 "차이"를 보여줌
- 배경이 white일 땐 → black으로 보이고
- 배경이 black일 땐 → white로 보임
- 색이 다르면 색반전된 느낌 연출됨
핵심 정리표
| 요소 | 기능 |
|---|---|
.top-bar | 고정된 상단바, white 배경 + difference blending |
mix-blend-mode: difference | 아래 배경색과 대비되도록 blending |
.section | 각각의 배경색으로 색변화 연출됨 |
| JS 필요 여부 | ❌ (CSS만으로 구현 가능) |
한줄 요약
mix-blend-mode: difference속성으로 탑바 배경이 각 섹션 배경색과 대비되도록 자동 전환됨. JS 없이 CSS로만 구현.
HTML, CSS, JS 활용 37강 커서효과
CODEPEN - 1부
CODEPEN - 2부
CODEPEN - 3부
CODEPEN - 4부
CODEPEN - 5부
CODEPEN - 6부
CODEPEN - 7부
CODEPEN - 8부
선생님 영상?
개요
마우스 커서를 따라다니는 커스텀 커서(dot)를 구현함.
기본 커서는 숨기고,mousemove이벤트로 원형 엘리먼트를 따라다니게 만듦.
주요 코드 요약
html
<div class="cursor"></div>
css
body { cursor: none; /* 기본 커서 숨김 */ }
.cursor { position: fixed; top: 0; left: 0; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%; pointer-events: none; transition: transform 0.1s ease-out; }
js
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => { cursor.style.transform =translate(${e.clientX}px, ${e.clientY}px); });
작동 방식 설명
| 기능 | 설명 |
|---|---|
cursor: none | 기본 커서를 보이지 않게 함 |
.cursor div | 커서 대신 따라다니는 원형 요소 |
mousemove 이벤트 | 마우스 좌표 감지해서 .cursor 위치 갱신 |
transform: translate() | 마우스 위치에 맞춰 div 이동 |
pointer-events: none | 커서가 다른 요소 클릭 등 이벤트 방해하지 않도록 처리 |
핵심 정리표
| 항목 | 역할 |
|---|---|
.cursor | 사용자 정의 커서 역할을 하는 div |
JS mousemove | 마우스 좌표를 실시간으로 추적 |
transform | 부드러운 이동 처리 |
transition | 이동 시 부드러운 애니메이션 효과 |
cursor: none | 기본 커서 숨기기 |
한줄 요약
마우스 좌표를 추적하여 div 요소를 따라다니게 하고, CSS로 커스텀 커서 효과를 부여함.
HTML, CSS, JS 활용 38강 스크롤바 overlay
개요
기본 스크롤바 대신 오버레이 형식의 얇고 깔끔한 스크롤바를 만들고 커스터마이징함.
주요 코드 요약
html
<div class="scroll-box">
<div class="scroll-content">
<!-- 스크롤 될 내용 -->
</div>
</div>
css
.scroll-box { width: 300px; height: 400px; overflow-y: scroll; }
/* 오버레이 형태 스크롤바 설정 */
.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 3px; }
.scroll-box::-webkit-scrollbar-track { background-color: transparent; }
작동 방식 설명
| 요소 | 설명 |
|---|---|
.scroll-box | overflow-y: scroll로 세로 스크롤 가능하게 함 |
::-webkit-scrollbar | 스크롤바 자체의 너비를 지정함 (6px로 얇게) |
::-webkit-scrollbar-thumb | 스크롤바 드래그 손잡이 색상 및 모양 지정 |
::-webkit-scrollbar-track | 스크롤 트랙 배경을 투명하게 처리하여 오버레이 느낌 강조 |
핵심 정리표
| 항목 | 설정값 |
|---|---|
| 스크롤바 너비 | width: 6px |
| 손잡이 색상 | rgba(0, 0, 0, 0.4) |
| 트랙 색상 | transparent |
| 디자인 효과 | 얇고 투명한 오버레이형 스크롤바 구현 |
한줄 요약
::-webkit-scrollbar커스터마이징으로 얇고 세련된 오버레이 스타일의 스크롤바 구현함.
HTML, CSS, JS 활용 39강 밑줄의 너비를 글자의 크기와 맞추는 방법
개요
inline텍스트 요소에 밑줄 효과를 줄 때, 밑줄의 너비가 글자의 실제 렌더링 크기와 딱 맞도록 정밀하게 조절하는 방법 구현.
주요코드 요약
html
<p>
<span class="underline">Hello</span>
</p>
css
.underline { display: inline-block; position: relative; }
.underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: black; }
작동 방식 설명
| 요소 | 설명 |
|---|---|
.underline | inline-block으로 설정하여 크기 제어 가능하게 함 |
::after | 가상요소로 밑줄 생성. absolute로 하단에 배치 |
width: 100% | 텍스트 내용 길이에 딱 맞게 밑줄 길이 지정 |
bottom: 0 | 텍스트의 아래쪽에 딱 붙게 설정 |
포인트
display: inline이면::after의 위치와 크기 제어가 어려움 → 반드시inline-block또는block으로 설정- 폰트마다
bottom: 0이 완전히 붙지 않는 경우 있음 →bottom: 0.1em또는2px등 조정 가능
핵심 정리표
| 항목 | 설정값/의미 |
|---|---|
| 텍스트 밑줄 위치 | position: relative + ::after로 제어 |
| 밑줄 길이 | width: 100% |
| 밑줄 높이 | height: 2px |
| 밑줄 색상 | background-color: black |
한줄 요약
inline-block+::after가상요소를 활용해 텍스트 길이에 딱 맞는 밑줄 효과를 정밀하게 구현함.
HTML, CSS, JS 활용 40강 다각형 호버 변환
개요
클립패스(clip-path)를 이용하여 버튼 혹은 카드 등의 엘리먼트를 마우스 오버 시 다각형 형태로 변형시키는 인터랙션 구현.
주요 코드 요약
<div class="card">Hover Me</div>
html
<div class="card">Hover Me</div>
css
`.card { width: 200px; height: 200px; background-color: tomato; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 0.5s ease-in-out; }
.card:hover { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
작동 방식 설명
| 요소 | 설명 |
|---|---|
clip-path | 요소를 특정 다각형 형태로 잘라서 보여줌 |
transition | clip-path의 변화가 부드럽게 일어나도록 설정 |
hover 시 polygon 좌표 변경 | 사각형 → 마름모 형태로 변형됨 |
포인트
clip-path: polygon(...)은x%y%형태로 좌표 지정hover전후의polygon좌표를 다르게 지정해 마우스 인터랙션 연출transition속성을clip-path에 적용할 수 있음
핵심 정리표
| 항목 | 설정값/의미 |
|---|---|
| 클립패스 초기값 | 사각형 (0 0, 100% 0, 100% 100%, 0 100%) |
| 클립패스 호버값 | 마름모 (50% 0, 100% 50%, 50% 100%, 0 50%) |
| 변환 효과 | transition: clip-path 0.5s ease-in-out |
한줄 요약
clip-path를 활용해 요소의 모양을 사각형 → 다각형으로 부드럽게 전환하는 호버 효과 구현.
HTML, CSS, JS 활용 41강 텍스트에 외곽선 효과
주요코드 요약
css
.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); }
작동 방식 해설
| 속성 | 설명 |
|---|---|
--border-width: 2px | 외곽선 두께를 변수로 정의함 |
--color: rgba(0, 0, 0, 0.5) | 외곽선 색상 (투명도 포함 가능) |
color: white | 텍스트 기본 색상 |
text-shadow | 네 방향(상하좌우)에 그림자 줘서 외곽선처럼 보이게 만듦 |
text-shadow: x-offsety-offset blur color- 총 4개 방향에 외곽선 흉내: 위, 아래, 왼쪽, 오른쪽
핵심 비교 요약
| 방식 | 장점 | 단점 |
|---|---|---|
-webkit-text-stroke | 간단하고 진짜 외곽선 느낌 | 사파리, 일부 크롬에서만 지원 |
text-shadow | 브라우저 호환성 좋음, 커스터마이징 쉬움 | 정확한 외곽선처럼 보이지는 않음 (모서리 디테일 부족) |
핵심 정리표
| 개념 | 설명 |
|---|---|
| 외곽선 구현 방법 | text-shadow를 네 방향으로 줘서 모양 만듦 |
| 색상 투명도 | rgba() 사용 가능 |
| 재사용성 | CSS 변수로 두께/색 조절 가능 |
| 호환성 | 모든 브라우저 지원 (IE 포함) |
한줄 요약
text-shadow네 방향 조합하면 텍스트 외곽선처럼 표현 가능하며,-webkit-text-stroke보다 호환성이 뛰어남.
HTML, CSS, JS 활용 42강 텍스트 외곽선 마우스 움직임 효과
핵심 설명
- 마우스의 움직임에 따라 텍스트 외곽선이 입체적으로 흔들림
mousemove이벤트로clientX,clientY값을 받아 계산- 텍스트는
.border-text클래스로 설정되어 있으며,text-shadow로 외곽선 표현- 커서 위치 기준으로 외곽선 방향이 동적으로 변함
구조
html
<div class="outer">
<h1 class="border-text">MOVE ME</h1>
</div>
css
.outer { height: 100vh; display: flex; justify-content: center; align-items: center; background: #222; color: white; overflow: hidden; }
.border-text { --x: 0; --y: 0; font-size: 8rem; text-shadow: calc(var(--x) * -1px) 0 0 red, calc(var(--x) * 1px) 0 0 blue, 0 calc(var(--y) * -1px) 0 lime, 0 calc(var(--y) * 1px) 0 yellow; }
js
const outer = document.querySelector(".outer"); const text = document.querySelector(".border-text");
outer.addEventListener("mousemove", (e) => { const x = (e.clientX / window.innerWidth - 0.5) * 10; const y = (e.clientY / window.innerHeight - 0.5) * 10; text.style.setProperty("--x", x.toFixed(2)); text.style.setProperty("--y", y.toFixed(2)); });
핵심 정리표
| 요소 | 역할 |
|---|---|
.outer | 전체 화면을 채우는 컨테이너 |
.border-text | 마우스 움직임 반응하는 텍스트 |
--x, --y | text-shadow 방향 제어용 커스텀 변수 |
mousemove 이벤트 | 마우스 위치에 따라 --x, --y 갱신 |
한줄 요약
마우스 위치에 따라 텍스트 외곽선의 방향이 실시간으로 움직이는 효과 구현함.
