배경에 따라 글자 색이 자동으로 변하는 텍스트 효과
배경 이미지에 따라 글자 색이 자동으로 적응하는 효과를 CSS로 구현한 CodePen 예제다. mix-blend-mode와 background-clip을 활용해 밝은 배경과 어두운 배경 모두에서 글자가 또렷하게 보이도록 하며, 배경 위에 겹쳐진 텍스트의 가독성을 높이는 기법이다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
스크립트 & 소스코드 공유
실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 108건의 글
스크롤에 따라 배경이 움직이는 시차(Parallax) 효과
스크롤 위치에 따라 배경 요소가 서로 다른 속도로 움직이는 시차(Parallax) 스크롤 효과를 보여주는 CodePen 예제다. CSS background-attachment: fixed를 이용하거나 JavaScript 스크롤 이벤트로 요소의 transform을 조절해 깊이감 있는 화면을 연출한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
CSS로 텍스트가 가로로 흐르는 롤링(스크롤) 효과 만들기
텍스트가 가로 방향으로 흐르는 롤링 효과를 CSS로 구현한 CodePen 예제다. @keyframes에서 요소를 왼쪽으로 translateX 이동시키고 infinite 애니메이션을 적용해, 공지사항이나 배너 문구가 화면을 가로질러 반복적으로 흐르도록 만든다. 속도 조절과 일시정지도 CSS로 처리할 수 있다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
CSS width를 콘텐츠 크기에 맞게 지정하기 (fit-content)
요소의 너비를 콘텐츠 크기에 맞게 자동으로 지정하는 CSS 기법을 보여주는 CodePen 예제다. width: fit-content를 사용하면 블록 요소가 화면 전체가 아닌 내용만큼만 너비를 차지하도록 줄어들며, 인라인 요소나 버튼처럼 자연스러운 크기를 만들 때 유용하다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
텍스트가 이미지 주변을 감싸도록 배치하기 (float)
이미지 주변으로 텍스트가 자연스럽게 흐르도록 배치하는 CSS float 예제다. 이미지에 float: left나 right를 적용하고 margin으로 여백을 조절하면, 본문 텍스트가 이미지 옆과 아래를 감싸는 신문 기사 형태의 레이아웃이 만들어진다. 동작을 확인할 수 있는 CodePen 데모를 포함한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
Let's create something great together.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.