ponyo118 님의 블로그

테일윈드

ponyo118 — Wed, 25 Mar 2026 17:11:10 +0900

️ 챕터 1 : 부트스트랩, 테일윈드 비교

1강

부트스트랩 5
- 부트스트랩 - 공식문서
- CODEPEN - 부트스트랩 5
데이지 UI
- 데이지UI 컴포넌트 - 공식문서
- CODEPEN - 테일윈드, 데이지UI
테일윈드 3

동영상

2603, CSS 라이브러리, 테일윈드, 챕터 1, 부트스트랩, 데이지 UI, 테일윈드 비교

️ 챕터 2 : 테일윈드 JIT

2강

3강

CODEPEN - 테일윈드 JIT 모드 활용

동영상

2603, CSS 라이브러리, 테일윈드, 챕터 2, 테일윈드 JIT 모드

️ 챕터 3 : 테일윈드 식 코딩방법

4강

동영상

2603, CSS 라이브러리, 테일윈드, 챕터 3, 테일윈드 방식으로 2차메뉴 구현

️ 챕터 4 : 이벤트 메뉴 구현

5강

[hrml]

[css]

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family: "GmarketSansMedium";
}

️ 챕터 5 : 반응형 상품리스트 구현

6강

[html]

[css]

7강

반응형 이벤트상품리스트 텍스트 부분 구현
CODEPEN - 시작
CODEPEN - 정답 미리보기

[html]

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.tailwindcss.com"></script>

<div class="container mx-auto px-[10px]">
  <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-[20px]">
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/237/752/442" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          댓글만 남겨도 클래스 0원 당첨 기회!
        </div>
        <div class="flex gap-2 text-xs">
          <div class="text-[#fd3049]">D-12</div>
          <div class="text-gray-400">22.05.26 (목)~22.06.07 (화)</div>
        </div>
      </a>
    </li>
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/231/802/442" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          취향저격 클래스 추천받으면 시원한 커피가!
        </div>
        <div class="flex gap-2 text-xs">
          <div class="text-[#fd3049]">D-5</div>
          <div class="text-gray-400">22.05.26 (목)~22.05.31 (화)</div>
        </div>
      </a>
    </li>
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/100/752/302" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          최대 20만원 랜덤쿠폰을 받아요!
        </div>
        <div class="text-xs">
          <div class="text-[#2897FB]">상시이벤트</div>
        </div>
      </a>
    </li>
  </ul>
</div>

동영상

️ 챕터 6 : 호버효과

8강

9강

이미지 호버 효과를 테일윈드 방식으로 변경, 1단계, before
CODEPEN - 시작
CODEPEN - 정답 미리보기
CODEPEN - 정답

10강

이미지 호버 효과를 테일윈드 방식으로 변경, 2단계, 이미지
CODEPEN - 시작
CODEPEN - 정답 미리보기

CODEPEN - 정답

[html]

[css]

11강

이미지 호버 효과를 테일윈드 방식으로 변경, 3단계, after
CODEPEN - 시작
CODEPEN - 정답 미리보기
CODEPEN - 정답

번외

클래스101 반응형 이벤트상품리스트에 이미지 호버효과를 적용
CODEPEN - 시작
CODEPEN - 정답 미리보기
CODEPEN - 정답

동영상

SASS/SCSS

ponyo118 — Fri, 20 Mar 2026 18:34:30 +0900

SASS/SCSS

SASS 공식 가이드
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.

1강

SASS - Playground

SASS/SCSS 쓰는 이유

CSS는 웹페이지의 스타일을 정의하는 데 매우 유용하지만, 프로젝트 규모가 커지고 구조가 복잡해질수록  
코드의 중복이 많아지고 관리가 어려워지는 문제가 발생합니다.

SASS는 이러한 문제를 해결하기 위해 고안된 CSS 전처리기로,  
더 나은 구조화, 재사용성, 가독성을 제공하여 유지보수를 용이하게 합니다.
<!--

SASS/SCSS는 CSS를 대체하기 위한 언어가 아니다.

SASS는 CSS를 대체하는 것이 아닌, CSS의 기능을 확장한 전처리기 언어입니다.  
즉, SASS는 더 효율적으로 스타일을 작성할 수 있도록 도와주는 도구일 뿐,  
궁극적으로는 SASS 코드를 컴파일하여 일반 CSS 파일을 생성하는 방식으로 작동합니다.

따라서, SASS를 사용하더라도 최종적으로 웹 브라우저는 여전히 CSS 파일을 해석하여 스타일을 적용합니다.

2강

SASS/SCSS 기본 사용법

3강

SASS/SCSS 변수

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

4강

@mixin 사용법

CODEPEN - mixin

- 믹스인 정의: @mixin
  키워드를 사용하여 반복적으로 사용되는 스타일 블록을 정의합니다.  
  이는 재사용 가능한 스타일 조각을 만들어 코드 중복을 줄이는 데 유용합니다.

- 믹스인 사용: @include
  키워드를 사용하여 정의된 믹스인을 호출하고 해당 스타일을 적용할 수 있습니다.  
  다양한 요소에 같은 스타일을 손쉽게 적용할 수 있어 유지보수가 간편해집니다.

2603, SASS/SCSS 기초, @mixin 사용법

5강

@mixin 사용법 - 매개변수와 인자

CODEPEN - mixin, 매개변수와 인자

믹스인 요약

믹스인 정의: @mixin 키워드를 사용하여 스타일 블록을 정의
믹스인 사용: @include 키워드를 사용하여 정의된 믹스인을 호출
인자 사용: 믹스인에 인자를 전달하여 유동적인 스타일 생성 가능
기본값 사용: 인자에 기본값을 설정하면 필요할 때만 인자 전달 가능

@mixin 이란?

- @mixin: 재사용 가능한 스타일 블록 정의 방법
1. 매개변수 없는 믹스인을 정의할 수 있음
2. 매개변수 있는 믹스인을 정의할 수 있음
  - 매개변수를 초기화하지 않으면 @include 시마다 인자값을 꼭 전달해야 함
  - 매개변수에 기본값이 있으면 인자 전달 생략 가능
  - 인자를 전달할 경우에는 매개변수 순서와 개수에 맞게 전달해야 함

[html]

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="box-1">박스 1</div>
<div class="box-2">박스2</div>

[css]

@font-face {
font-family: "SUIT-Regular";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}

html > body {
font-family: "SUIT-Regular";
padding: 1rem;
}

// @mixin : 재사용 컴포넌트 정의
// 정의한 믹스인 소괄호 안에는 변수를 넣는 것이 가능 => 매개변수
@mixin box-base($btn-bg-color, $font-size) {
width: 200px;
height: 200px;
background-color: $btn-bg-color;
border-radius: 1.2rem;
transition: all 0.3s ease;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: $font-size;

&:hover {
background-color: #86a372;
}
}

.box-1 {
@include box-base(#a8c2e0, 2rem);
}
.box-2 {
@include box-base(#ebda7a, 1.2rem);
}

2603, SASS/SCSS 기초, @mixin 사용법, 매개변수와 인자

6강

@mixin 사용법 - 매개변수 초기화

7강

@if문과 미디어쿼리

8강

@for문

9강

@for문을 이용한 배경이미지 적용

SCSS VSCODE 세팅

2602, SASS/SCSS 기초, SCSS VSCODE 세팅
settings.json(파일 - 기본설정 - 설정 - settings.json 검색)
또는 ctrl + shift + p 눌러서 settings.json 선택

"liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css" // 내가 원하는 css 저장 폴더 경로 설정
    }
  ],
"liveServer.settings.donotShowInfoMsg": true

VSCODE에서 scss를 사용하기 위한 작업 순서

settings.json / scss 사용을 위한 세팅
scss 폴더 생성
- style.scss 파일 생성
vsc 하단에 watch sass 클릭!
- scss 파일을 css 파일로 컴파일 후 생성
- scss에서 ctrl + s 해서 저장하면 css 파일이 생성
index.html에는 scss에 의해 생성 된 css 파일 연결

SCSS(SASS) 기초

ponyo118 — Thu, 19 Mar 2026 17:08:14 +0900

1강

BEM CSS 명명법

BEM 공식문서
CODEPEN
BEM(Block Element Modifier) 명명법의 특징
구성 요소

Block: 독립적으로 의미를 갖는 단위 컴포넌트
- 예: header, menu, button, form 등
- → 예: .button, .nav, .card
Element: Block 내부의 구성요소. Block 없이는 의미 없음
- 예: menu__item, form__label, card__title
- → 예: .button__icon, .card__content
Modifier: Block이나 Element의 상태나 변형된 스타일을 표현
- 예: button--large, card__title--highlighted
- → 예: .button--active, .card__content--dark

장점
- 명확한 구조와 계층 관계 표현
- 재사용성이 높은 모듈화된 CSS
- 유지보수가 용이
- 협업 시 코드 이해도 향상

[html]

[css]

.card {
border: 1px solid black;
padding: 20px;
}

.card--featured {
border-color: gold;
}

.card__title {
font-size: 18px;
}

.card__button--primary {
background: gold;
}

2강

CSS Logical Properties

3강

CSS nesting(중첩 css) 사용방법

/* 폰트 */ @font-face { font-family: "SUIT-Regular"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } html > body { font-family: "SUIT-Regular"; }

2602, SASS/SCSS 기초, CSS nesting(중첩 css) 사용방법

[html]

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<header class="top-bar">
  <div class="con">
    <div class="logo-box">
      <a href="#" class="logo">
        UIUX
      </a>
    </div>

    <nav class="top-bar__menu-1">
      
      <ul class="depth1-menu">
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 1</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 2</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 3</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 4</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

[css]

@font-face {
  font-family: "OmuDaye";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2")
    format("woff2");
  font-weight: normal;
  font-display: swap;
}
html > body {
  font-family: "OmuDaye";
}

/* 라이브러리 */
.con {
  max-width: 1080px;
  margin-inline: auto;
}

/* 커스텀 */
.top-bar {
  height: 80px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);

  .con {
    height: 100%;
    display: flex;
  }

  .logo {
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: bold;
    font-size: 1.5rem;
    transition: color 0.3s ease-in-out;

    /* .logo:hover */
    &:hover {
      color: pink;
    }
  }
}

.top-bar__menu-1 {
  margin-left: auto;

  .depth1-menu {
    display: flex;
    height: 100%;

    .menu-item {
      &:hover .menu-text {
        font-weight: bold;
      }
      .menu-text {
        display: flex;
        height: 100%;
        align-items: center;
        padding-inline: 1rem;
      }
    }
  }
}

4강

CSS nesting에서 media 쿼리 중첩

[html]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />


<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<header class="top-bar">
  <div class="con">
    <div class="logo-box">
      <a href="#" class="logo">
        UIUX
      </a>
    </div>

    <nav class="top-bar__menu-1">
      
      <ul class="depth1-menu">
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 1</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 2</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 3</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-text">1차 메뉴 아이템 4</a>
        </li>
      </ul>
    </nav>

    <div class="mobile-menu-btn-box">
      <button class="mobile-menu-btn">
        <span>
          <i class="fa-solid fa-bars"></i>
        </span>
      </button>
    </div>
  </div>
</header>

[css]

@font-face {
  font-family: "OmuDaye";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2")
    format("woff2");
  font-weight: normal;
  font-display: swap;
}
html > body {
  font-family: "OmuDaye";
}

/* 라이브러리 */
.con {
margin-inline: auto;
max-width: 1080px;
}

/* 커스텀 */
/*
1 : .top-bar > .con {}
2 : .top-bar .con {}
*/

.top-bar {
height: 80px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/*
> .con {
background-color: red;
height: 100%;
}
*/

.con {
height: 100%;
display: flex;

@media (width <= 920px) {
padding-inline: 1rem;
}
}

.logo {
font-size: 1.5rem;
font-weight: bold;
height: 100%;
display: flex;
align-items: center;
transition: color 0.3s ease-in-out;

/* .logo:hover */
&:hover {
color: red;
}
}
}

.top-bar__menu-1 {
margin-left: auto;

@media (width <= 920px) {
display: none;
}

.depth1-menu {
display: flex;
height: 100%;

.menu-item {
&:hover .menu-text {
font-weight: bold;
}

.menu-text {
display: flex;
height: 100%;
align-items: center;
padding-inline: 1rem;
}
}
}
}

.mobile-menu-btn-box {
align-self: center;
margin-left: auto;

@media (width > 920px) {
display: none;
}

.mobile-menu-btn {
cursor: pointer;

i {
font-size: 1.3rem;
}
}
}

Git, GitHub 기초

ponyo118 — Wed, 18 Mar 2026 17:27:24 +0900

강사 리포지터리 주소

리포지터리 - uiux_ex_2603

깃 기본 명령어

# 최초 한번만 등록
git init 
git config --global user.email "깃헙 이메일"
git config --global user.name "깃헙 이름"
git commit -m "커밋 메세지"

# 최초 한번만 등록
git remote add origin "저장소 주소"
git push -u origin main

# 브런치 master에서 main으로 변경
git branch -M main
git config --global init.defaultBranch main

# commit 메세지 수정
git commit --amend
  - a 또는 i를 누른 후 내용 수정
  - 수정 된 후 esc -> :wq!

1강

자격 증명 관리자에서 로그인 정보 삭제

윈도우 키 : 자격 증명 관리자 검색
- Windows 자격 증명
- git:https://github.com 자기 이름 아니면 제거

폴더 생성 후 vscode 열기

c드라이브 -> work 폴더 생성
- web_git_ex 폴더 생성
- 폴더 url 빈공간에 cmd 엔터
- cmd 창에서 code . 엔터

vdcode 터미널 단축키

Ctrl + j
Ctrl + ~

복사 후 붙여넣는 법

vscode 터미널
- Ctrl + v
git bash
- Shift + Insert

리포지터리 생성

리포지터리 새로 만들기
- GITHUB - https://github.com/new
리포지터리 - uiux_ex_2603

동영상

2603, Git, GitHub 기초, 1강, git 설치 및 세팅, 리포지터리 생성

2강

git 폴더 및 브런치 설정

.git 생성
- git init
master -> main으로 바꾸는 명령어
- git branch -M main
- git config --global init.defaultBranch main
기록 지우기
- Ctrl + L, clear

동영상

2603, Git, GitHub 기초, 2강, git 폴더 및 브런치 설정

3강

사용자 설정

현재 폴더만 사용자 바꾸기
- git config user.name ""
- git config user.email ""
전체 폴더 사용자 바꾸기
- git config --global user.name ""
- git config --global user.email ""
사용자 확인 방법
- git config user.name
- git config user.email

동영상

2603, Git, GitHub 기초, 3강, 사용자 설정

4강

리포지터리

리포지터리 설정
- git remote add origin 리포지터리 주소
리포지터리 삭제
- git remote remove origin
리포지터리 확인
- git remote -v

동영상

2603, Git, GitHub 기초, 4강, 리포지터리 설정

5강

상태 확인 및 장바구니 담기

git 상태확인
- git status
git 장바구니 담기
- git add '파일 이름'
git 장바구니 모두 담기
- git add .
git 장바구니 취소
- git reset

동영상

2603, Git, GitHub 기초, 5강, 상태 확인 및 장바구니 담기

6강

커밋 메세지 남기기

커밋 메세지
- git commit -m "커밋 내용"
- 이왕이면 영어 한국어도 상관 없음
커밋 내용 확인
- git log
커밋 수정
- git commit --amend
  - 수정모드 : a, i
  - 저장 : esc => :wq!

동영상

2603, Git, GitHub 기초, 6강, 커밋 메세지 남기기, 수정하기

7강

리포지터리에 올리기

GIT - 초기 세팅
git에 올리기
- git push origin main

동영상

2603, Git, GitHub 기초, 7강, 리포지터리에 올리기

8강

리포지터리에서 가져오기 - clone

소스코드가 아예 없는 처음 상태에서 가져오는 법
- git clone 리포지터리 주소

동영상

2603, Git, GitHub 기초, 8강, 커밋 보는 법, 리포지터리에서 가져오기 clone

9강

리포지터리에서 가져오기 - pull

이미 소스코드가 있는 상태에서 최신 소스코드만 가져오는 법
- git pull origin main
- 항상 작업하기 전에 먼저 pull을 해야함

동영상

2603, Git, GitHub 기초, 9강, 리포지터리에서 가져오기 pull

번외

배포, 리포지터리 접근 변경 및 삭제 방법

배포 주소

동영상

2603, Git, GitHub 기초, 번외, 리포지터리 접근 변경 및 삭제 방법

1. 로컬 환경에서 폴더 작업 하기
  - index.html
  - style.css
  - script.js
터미널 열고 git bash 선택
2. git init
3. git remote add origin https://github.com/phyno118/PETORY
4. 깃에 한 번 초기화 해주기(올리기) add .,  commit , push

영선님
git clone https://github.com/phyno118/PETORY

4. git brunch 생성
  - git brunch 브런치 이름
  - git checkout 브런치 이름
    - 위 두개를 한 번에 할 수 있는 명령어 -> git checkout -b 브런치이름
  - main은 최종으로 수정된 완성 파일만 올라가야함

깃 명령어 정리

ponyo118 — Wed, 18 Mar 2026 16:41:49 +0900

가장 초기에 해야하는것

git init

브런치 master에서 main으로 변경

git branch -M main
git config --global init.defaultBranch main

사용자 설정(컴퓨터를 포맷하기 전까지는 안해도 됨)

git config --global user.name ""
git config --global user.email ""
--global을 안붙이면 프로젝트마다 사용자 설정을 해야함.

사용자 확인
git config user.name
git config user.email

깃 명령어 정리

clear / Ctrl + L

프로젝트를 만들 때 마다 해야하는 것

프로젝트 깃 연결

초기화

git init

깃 저장소 연결

git remote add origin 깃_주소

깃 저장소 삭제

git remote remove origin

깃 저장소 연결 확인

git remote -v

깃에 올릴 것중 필요 없는 것만

.gitignore

.classpath
.project
.settings
bin
build

현재 상태 확인

git status

소스코드 깃에 담기

git add .

커밋 메세지 설정

git commit -m "~~"

리포지터리에 내 소스코드 올리기

git push origin main

소스코드 받아오는 법

리포지터리 이름으로 된 폴더에 파일 불러오기

git clone 리포지터리주소

폴더이름으로 파일 불러오기

git clone 리포지터리주소 새폴더이름

기존 소스코드가 있는 상태에서 업데이트된 코드만 불러오기

git pull origin main

HTML, CSS, JS 활용 - 27 ~ 29강

ponyo118 — Tue, 17 Mar 2026 16:19:22 +0900

27강 - 스크롤바 overlay

CODEPEN

[html]

[Lorem*20]

[css]

/* 스크롤바 꾸미기 시작 */
:root {
    overflow-y:overlay;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 0, 0, .5);
    border-radius: 10px;
    cursor:pointer;
}

::-webkit-scrollbar {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 0, 0, .1);
}
/* 스크롤바 꾸미기 끝 */

[js]

동영상

2603, HTML, CSS, JS 활용, 스크롤바 overlay

28강 - 텍스트에 외곽선 효과

[html]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<section class="section section-1 relative">
    <div class="absolute inset-0 flex items-center justify-center whitespace-nowrap border-text text-12 select-none">
        Lorem ipsum dolor
        <br>
        amet consectetur
    </div>
    <div class="absolute inset-0 flex items-center justify-center whitespace-nowrap text-7 mt-10 select-none">
        Exercitationem
        <br>
        voluptas nemo
    </div>
</section>

[css]

/* 폰트 */
@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);
}

[js]

동영상

2603, HTML, CSS, JS 활용, 텍스트에 외곽선 효과

29강 - 텍스트 외곽선 마우스 움직임 효과

CODEPEN
- 18강 참고 - mousemove effect

[html]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

<section class="section section-1 relative overflow-hidden">
    <div class="absolute inset-0 flex items-center justify-center whitespace-nowrap border-text text-12 select-none mousemove-effect-1-el" data-mousemove-effect1-hor-res="0.01" data-mousemove-effect1-ver-res="0.01">
        Lorem ipsum dolor
        <br>
        amet consectetur
    </div>
    <div class="absolute inset-0 flex items-center justify-center whitespace-nowrap text-7 mt-10 select-none mousemove-effect-1-el"  data-mousemove-effect1-hor-res="-0.01" data-mousemove-effect1-ver-res="-0.01">
        Exercitationem
        <br>
        voluptas nemo
    </div>
</section>

[css]

[js]

동영상

2603, HTML, CSS, JS 활용, 텍스트 외곽선 마우스 움직임 효과

HTML, CSS, JS 활용 - 24 ~26 강

ponyo118 — Mon, 16 Mar 2026 17:33:35 +0900

24강 - 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

gsap
- https://unpkg.co/gsap@3/dist/gsap.min.js
- https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js
- gsap.registerPlugin(ScrollTrigger);

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<header class="top-bar">
헤더입니다.
</header>


<section class="section section-1">섹션 1</section>
<section class="section section-2">섹션 2</section>
<section class="section section-3">섹션 3</section>
<section class="section section-4 dark">섹션 4</section>
<section class="section section-5">섹션 5</section>
<section class="section section-6 dark">섹션 6</section>
<section class="section section-7">섹션 7</section>
<section class="section section-8 dark">섹션 8</section>
<section class="section section-9">섹션 9</section>
<section class="section section-10 dark">섹션 10</section>

[css]

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  border: 2px solid currentcolor;
}

.top-bar.dark {
  color: white;
}

.section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  font-weight: bold;
}

.section.dark {
  background-color: black;
  color: white;
}

[js]

// scrollTrigger 플로그인 등록
gsap.registerPlugin(ScrollTrigger);

// 각 section.dark 요소마다 ScrollTigger 인스턴스를 생성
$(".section.dark").each(function (index, node) {
  ScrollTrigger.create({
    trigger: node, // 트리거 요소 설정
    start: "top top+=50", // 트리거 요소의 top이 뷰포트 top에서 50px 아래에 닿을 때 시작
    end: "bottom top", // 트리거 요소의 bottom이 뷰포트 top에 닿을 때 종료
    scrub: true, // 스크롤과 애니메이션을 동기화
    onEnter: () => $(".top-bar").addClass("dark"), // 들어올 때 .top-bar에 'dark'클래스 추가
    onLeave: () => $(".top-bar").removeClass("dark"), // 나갈 때 .top-bar에 'dark'클래스 제거
    onEnterBack: () => $(".top-bar").addClass("dark"), // 다시 들어올 때 .top-bar에 'dark'클래스 추가
    onLeaveBack: () => $(".top-bar").removeClass("dark") // 다시 나갈 때 .top-bar에 'dark'클래스 제거
  });
});

동영상

2603, HTML, CSS, JS 활용, 스크롤트리거로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

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

[html]

<header class="top_bar">
헤더입니다.
</header>


<section class="section section-1">섹션 1</section>
<section class="section section-2">섹션 2</section>
<section class="section section-3 dark">섹션 3</section>
<section class="section section-4">섹션 4</section>
<section class="section section-5 dark">섹션 5</section>
<section class="section section-6">섹션 6</section>
<section class="section section-7">섹션 7</section>
<section class="section section-8 dark">섹션 8</section>
<section class="section section-9">섹션 9</section>
<section class="section section-10 dark">섹션 10</section>

[css]

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    color: white; /* 필수 */
    border: 2px solid currentcolor;
    z-index: 100;
    mix-blend-mode: difference;
}

section {
    min-height: 100vh;
    background-color: white; /* 필수 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: bold;
}

section.dark {
    background-color: black;
    color: white;
}

[js]

동영상

2603, HTML, CSS, JS 활용, mix-blend-mode로 탑바 배경색이 섹션의 배경색에 맞게 자동변환

26강 - 커서효과

[html]

[css]

body {
    margin: 0;
}

* {
    cursor: none;
}

.body-content {
    background-color: white;
}

.cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -300px;
    left: -300px;
    border-radius: 50%;
    background-color: white;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100;
    mix-blend-mode: difference;
}

.cursor-shadow {
    position: fixed;
    width: 20px;
    height: 20px;
    top: -300px;
    left: -300px;
    border-radius: 50%;
    background-color: white;
    pointer-events: none;
    transform: translate(-50%, -50%);
    /* transition: top .3s .1s, left .3s .1s; */
    transition: width .1s, height .1s, top .1s, left .1s;
    z-index: 99;
    mix-blend-mode: difference;
}

.need-to-cursor-big .cursor-shadow {
    width: 50px;
    height: 50px;
}

.cursor-big {
    color: red;
    cursor: pointer;
}

[js]

console.clear();

const $cursor = $('.cursor');
const $cursorShadow = $('.cursor-shadow');

$(window).mousemove(function(e) {
    $cursor.css({
        top: e.clientY,
        left: e.clientX
    });

    $cursorShadow.css({
        top: e.clientY,
        left: e.clientX
    });
});

$('.cursor-big').mouseenter(function() {
    $('html').addClass('need-to-cursor-big');
});

$('.cursor-big').mouseleave(function() {
    $('html').removeClass('need-to-cursor-big');
});

동영상

2603, HTML, CSS, JS 활용, 커서효과

HTML, CSS, JS 활용 - 20 ~ 23강

ponyo118 — Fri, 13 Mar 2026 18:08:06 +0900

20강 - 멀티 숫자 카운터, 제이쿼리 each

MDN - 삼항연산자

parse(바꾸다)Int(정수) -> 정수로 바꾸겠다.

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - 3부

https://codepen.io/phyno118/pen/ZYpLxmw

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="box-count box-1">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>
</div>

<div class="box-count box-2">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>
</div>

<div class="box-count box-3">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>
</div>

<div class="box-count box-4">
  <span class="box-count__minus">-</span>
  <span class="box-count__num">10</span>
  <span class="box-count__plus">+</span>
</div>

[css]

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-count {
  border: 10px solid black;
  padding: 20px;
  font-size: 2rem;
  font-weight: bold;
  user-select: none;
}
.box-count__minus,
.box-count__plus {
  cursor: pointer;
}

[js]

console.clear();

// $('.box-count').each(function(index,node)
$(".box-count").each(function (_, node) {
  //엘리먼트 들어갈 때 $표시가 들어가는 건 필수가 아니지만 관례이기에 넣는 것이다.
  const $boxCount = $(node);

  const $btnMinus = $boxCount.find(".box-count__minus");
  const $btnPlus = $boxCount.find(".box-count__plus");
  const $num = $boxCount.find(".box-count__num");

  $btnMinus.click(function () {
    const num = parseInt($num.text());
    // 조건 ? T : F ;
    const newNum = num - 1 >= 0 ? num - 1 : 0;
    $num.text(newNum);
  });

  $btnPlus.click(function () {
  const maxNum = 10;
  const num = parseInt($num.text());
  // 조건 ? T : F ;
  const newNum = num + 1 <= maxNum ? num + 1 : maxNum;
  $num.text(newNum);
  });
});

// $(".box-1__minus").click(function () {
//   const num = parseInt($(".box-1__num").text());
//   // 조건 ? T : F ;
//   const newNum = num - 1 >= 0 ? num - 1 : 0;
//   $(".box-1__num").text(newNum);
// });

// $(".box-1__plus").click(function () {
//   const maxNum = 10;
//   const num = parseInt($(".box-1__num").text());
//   // 조건 ? T : F ;
//   const newNum = num + 1 <= maxNum ? num + 1 : maxNum;
//   $(".box-1__num").text(newNum);
// });

동영상

2603, HTML, CSS, JS 활용, 멀티 숫자 카운터, 제이쿼리 each

21강 - tilt.js 사용법

tilt js

https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js

GIT - tilt js

CODEPEN

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<div class="js-tilt">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQb0DK9CHyu-Pl9HzqXctd9xuWj0mnEKQCBw&s.jpg" alt="">
</div>

[css]

[js]

$('.js-tilt').tilt({
  scale: 1.2,//hover 시 확대 비율
  maxTilt: 15,// 기울기 각도 설정
  speed: 40,// 애니메이션 속도
  grare: false, //반사광
  reset: false // 마우스가 벗어났을 때 제자리로 돌아갈지 여부
})

동영상

2603, HTML, CSS, JS 활용, tilt.js 사용법

22강 - 무한하게 이어지는 marquee

marquee

demo

marquee animation codepen

CODEPEN

6개가 다 맞아떨어져야지 완성이 된다.

1. 글자 길이 + 글자 간격

2. 애니메이션 이동 거리

3. 텍스트 복사

4. 컨테이너 width값

5. 속도, 시간

6. letter-spacing / gap

[html]

<div class="marquee">
  <div class="marquee-track">
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>

    
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
  </div>
</div>

[css]

.marquee {
  width: 500px;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite; /* ← 속도 조절 */
}

.marquee-track span {
  padding-right: 24px; /* 문장 사이 간격 */
  flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

동영상

2603, HTML, CSS, JS 활용, 무한하게 이어지는 marquee

23강 - 다크모드 만드는 방법

css filter

Arrow Function vs 일반 함수

// 일반 함수
$('.btn').click(function() {
  console.log(this);
});
// this = 클릭된 요소

// arrow function
$('.btn').click(() => {
  console.log(this);
});
// this = 바깥 scope

정리
- 간단한 콜백 → arrow function
- 이벤트 / this 필요 → function

CODEPEN

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div><button class="btn-toggle-theme">테마토글</button></div>

<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut ipsam commodi reprehenderit incidunt in facere nisi explicabo necessitatibus, unde voluptatum inventore omnis excepturi minus harum beatae placeat labore eaque. Odio?</div>

<div class="color-primary">
안녕 반가워 :)
</div>

[css]

/* font */
@font-face {
    font-family: 'OngleipParkDahyeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/Ownglyph_ParkDaHyun.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
/* 폰트 적용 */
html > body,
html > body input,
html > body button,
html > body textarea {
  font-family: "OngleipParkDahyeon";
}

/* 테마시작 */

/* 테마 light */
:root {
  --background-color: #fff;
  --text-color: #222;
  --primary-color: #42c2f5;
}

/* 테마 dark */
:root.dark {
  --background-color: #525252;
  --text-color: #fcfcfc;
  --primary-color: #42c2f5;
}

/* 테마 적용 */
:root {
  color: var(--text-color);
  background-color: var(--background-color);
  transition: all .5s;
}

.color-primary {
  color: var(--primary-color);
}

:root.dark .color-primary {
  filter: brightness(150%);
}

[js]

// //버전 1
// $('.btn-toggle-theme').click(function() {
//   let $root = $(':root');
//   if($root.hasClass('dark')) {
//     $root.removeClass('dark');
//   } else {
//     $root.addClass('dark');
//   }
// });

// //버전 2
// $('btn-t0ggle-theme').click(function() {
//   $(':root').toggleClass('dark');
// });

//버전 3
$('.btn-toggle-theme').click(() => $(':root').toggleClass('dark'));

동영상

2603, HTML, CSS, JS 활용, 다크모드, 폰트, arrow function, css 변수

HTML, CSS, JS 활용 - 15 ~ 19강

ponyo118 — Thu, 12 Mar 2026 18:15:02 +0900

15강 - 특정 구간에서 스크롤시, 횡으로 이동하는 효과

[html]

[css]

html, body {
    overflow-x: hidden;
}
/*
body { -ms-overflow-style: none;}
body::-webkit-scrollbar { display:none }
*/

body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: -0.5rem;
    border: 10px solid black;
    box-sizing: border-box;
    background-color: white;
    position: relative;
}

.section-group--horizontal-right {
    display: flex;
    flex-direction: row-reverse;
}

.section-group--horizontal-right > .section,
.section-group--horizontal-left > .section {
    width: 100%;
    flex-shrink: 0;
}

.section-group--horizontal-left {
    display: flex;
}

[js]

// 스크롤 트리거 플러그인 활성화
gsap.registerPlugin(ScrollTrigger);

function SectionGroup__init() {
    $(".section-group--horizontal-right").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: 100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true
            }
        });
    });

    $(".section-group--horizontal-left").each(function (index, node) {
        var $group = $(node);
        var $section = $group.find(" > .section");

        gsap.to($section, {
            xPercent: -100 * ($section.length - 1),
            ease: "none",
            scrollTrigger: {
                trigger: $group,
                start: "top top",
                end: "+=" + ($section.length - 1) + "00%",
                pin: true,
                scrub: true
            }
        });
    });

    $(".section-group--stack-up").each(function (index, node) {
        console.log(node)
        var $group = $(node);
        var $section = $group.find(" > .section:not(:first-child)");

        $section.each(function (index, node) {
            var $sectionOne = $(node);

            gsap.to($sectionOne, {
                ease: "none",
                scrollTrigger: {
                    trigger: $sectionOne,
                    start: "top 100%",
                    end: "bottom 100%",
                    pin: $sectionOne.prev(),
                    pinSpacing: false,
                    scrub: true
                }
            });
        });
    });
}

SectionGroup__init();

동영상

2603, HTML, CSS, JS 활용, 특정 구간에서 스크롤시, 횡으로 이동하는 효과

16강 - scroll-snap-type, scroll-behavior로 fullpage js 효과 구현

CODEPEN

동영상

2603, HTML, CSS, JS 활용, scroll-snap-type, scroll-behavior로 fullpage js 효과 구현

[html]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen</title>
  </head>
  <body>
    <header class="top_bar">
      <ul>
        <li><a href="#section-1">섹션 1</a></li>
        <li><a href="#section-2">섹션 2</a></li>
        <li><a href="#section-3">섹션 3</a></li>
        <li><a href="#section-4">섹션 4</a></li>
        <li><a href="#section-5">섹션 5</a></li>
      </ul>
      </header>
    <main class="section_group">
      <section id="section-1" class="section section-1">섹션1</section>
      <section id="section-2" class="section section-2">섹션2</section>
      <section id="section-3" class="section section-3">
        <h1>섹션 3</h1>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus consequatur, eligendi quos neque sapiente quibusdam! Reiciendis cum nam provident velit dolor quidem debitis nobis similique! Quidem quas facilis animi numquam?
        In aliquam, vel debitis ratione aliquid ipsum totam voluptas nihil officiis. Recusandae accusamus at repellat cupiditate veniam placeat dolores, illum repellendus officiis aliquid sed sit nisi dicta hic fugiat dignissimos.
        Consectetur obcaecati dolores totam laudantium doloremque officiis quod saepe, necessitatibus maxime porro sit nulla, atque cum. Temporibus eius quia quod corporis aut enim, fugit repellendus velit assumenda provident odit fuga?
        Consequuntur, adipisci vero dolor, odit impedit, provident perspiciatis unde minima pariatur totam consectetur sed qui nesciunt. Facilis, aspernatur ipsa impedit magnam harum dolore ducimus odit autem quo, nesciunt, temporibus assumenda!
        Maxime asperiores corporis aperiam unde optio tempore blanditiis vitae ipsam ratione labore accusantium, quas modi quidem iste perferendis exercitationem sapiente, molestias natus placeat voluptas dolorem. Quo eum reiciendis vel assumenda?
        Blanditiis facere quam dignissimos? Iste possimus repudiandae beatae facere adipisci ab. Officia amet repudiandae facilis? Harum odit placeat doloremque, accusantium corrupti magnam dolores perspiciatis ex numquam quis! Odio, animi doloremque!
        Eos repellat quam accusamus cum dignissimos expedita corporis assumenda. Dicta quas aperiam praesentium optio ut, expedita eaque? Eius, rem ea praesentium modi minus, dignissimos unde velit illo perferendis facilis consequatur!
        Dignissimos voluptatum suscipit recusandae ad repellat animi iusto nihil? Perferendis dolore placeat voluptas dolorem veniam ipsam, iste rerum beatae quasi, repellendus totam vel eum ratione necessitatibus, praesentium itaque ab aliquam.
        Cum ab necessitatibus non minus veritatis asperiores quos modi sequi officiis quibusdam amet reprehenderit officia ipsam obcaecati laboriosam delectus, culpa fugiat aut consectetur enim eos placeat! Consequatur placeat dicta ipsa?
        Asperiores aperiam architecto amet, sunt cumque magnam! Similique suscipit amet hic sint excepturi modi optio corrupti! Id corrupti reiciendis eaque natus facilis itaque, voluptatum, vero incidunt recusandae, maiores rem ab.
        Voluptatibus quidem architecto sunt aspernatur, vel tempore cum mollitia? Molestias quo est perspiciatis magni harum, quia aliquam sit eligendi officia culpa doloremque. Sit commodi autem quod impedit vel iure ipsa.
        Quibusdam esse culpa illo similique tenetur temporibus blanditiis provident vitae natus, explicabo, recusandae voluptate omnis molestias quasi animi iusto nemo architecto. Libero minus dicta nam eaque impedit maiores nihil neque?
        Exercitationem dignissimos praesentium possimus quisquam nemo odit deserunt nostrum tenetur nulla eum minus perferendis quo est repellendus rerum laudantium tempore numquam, architecto iure consequuntur maiores accusantium ea vel qui? Eaque.
        Reprehenderit dicta provident repellat quam deserunt nisi suscipit sequi dolor placeat doloremque voluptas iste possimus veritatis, error rerum quod aspernatur? Sunt ullam quo harum, adipisci ad commodi inventore maiores magni?
        Ullam doloribus perferendis suscipit? Quae voluptas ad deleniti nostrum sit aliquam odit delectus possimus repudiandae esse ipsam tempore laborum quibusdam, quod vero obcaecati officiis cumque quam nam reiciendis ratione? Temporibus?
        Velit nobis, sed omnis tempore illum pariatur, sequi reiciendis sapiente eos libero cumque blanditiis numquam reprehenderit! Sint architecto vel vitae, reiciendis ad praesentium, fugit saepe, a deserunt sunt excepturi blanditiis.
        Fugit nisi nulla cumque est amet aperiam facere sed, nobis illo? Nisi dicta sapiente possimus autem tempora et doloremque. Cum saepe facere recusandae obcaecati, dolorem ullam ipsam ipsum autem aut!
        Praesentium maxime obcaecati pariatur aperiam, iure eaque officiis labore odio tenetur eos harum magnam inventore voluptatem qui aliquam cupiditate veniam omnis fuga eligendi ab! Ducimus omnis nobis excepturi rem expedita.
        Assumenda quae soluta quibusdam quia sit ducimus totam. Sapiente tempore harum perspiciatis quo laboriosam eum enim doloribus odio nisi. Sint molestias perspiciatis porro deleniti! Reiciendis pariatur maiores dolorem eaque neque.
        Nesciunt eius deleniti, quidem tenetur reprehenderit culpa modi excepturi nihil aperiam eaque dolores sint at voluptate sunt dignissimos nam. Voluptatibus eaque odit rem itaque dolor exercitationem at, voluptatum assumenda veritatis?
      </section>
      <section id="section-4" class="section section-4">섹션4</section>
      <section id="section-5" class="section section-5">섹션5</section>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

[css]

body {
  margin: 0;
}

.top_bar {
  position: fixed;
  top: 0;
  right: 0;
  border: 3px solid black;
  background-color: pink;
}

.section_group {
  overflow-y: scroll;
  height: 100vh;
  scroll-behavior: smooth;
  scroll-snap-type:y mandatory;
}

.section_group > .section {
  min-height: 100vh;
  border: 10px solid black;
  box-sizing: border-box;
  scroll-snap-align:start;
}

17강

특정 시작에 글자들이 순서대로 하나씩 회전하면서 나타나는 애니메이션

CODEPEN

[html]

<span>↓HOVER↓</span>
<div class="box-1">
  <span>A</span>
  <span>B</span>
  <span> </span>
  <span>C</span>
  <span>D</span>
</div>

[css]

.box-1 {
  font-size: 5rem;
  font-weight: bold;
  display: flex;
  border: 1px solid black;
}

.box-1 > * {
  transform: rotateY(180deg);
  transition: all .3s;
  opacity: 0;
}

.box-1:hover > * {
  transform: rotateY(0);
  opacity: 1;
}

.box-1:hover > :nth-child(1) {
  transition-delay: 0.1s;
}

.box-1:hover > :nth-child(2) {
  transition-delay: 0.2s;
}

.box-1:hover > :nth-child(3) {
  transition-delay: 0.3s;
}

.box-1:hover > :nth-child(4) {
  transition-delay: 0.4s;

}.box-1:hover > :nth-child(5) {
  transition-delay: 0.5s;
}

동영상

2603, HTML, CSS, JS 활용, 특정 시작에 글자들이 순서대로 하나씩 회전하면서 나타나는 애니메이션

18강 - 반응형 스와이퍼

tailwindcss

swiper - scrollbar

codesandbox - scrollbar

CODEPEN

[html]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<section class="section section-1">
    <div class="container mx-auto">
        <div class="swiper-box-1">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                    <div class="swiper-slide">Slide 6</div>
                    <div class="swiper-slide">Slide 7</div>
                    <div class="swiper-slide">Slide 8</div>
                    <div class="swiper-slide">Slide 9</div>
                </div>

                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>

                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
</section>

[css]

.section-1 {
    padding-left: 50px;
    padding-right: 50px;
    overflow: hidden;
}

.swiper-box-1 .swiper-slide {
    height: 500px;
    background-color: green;
}

.swiper-box-1 .swiper {
    overflow: visible;
}

[js]

var swiper = new Swiper(".mySwiper", {
    loop: true,
    spaceBetween: 20,
    scrollbar: {
        el: ".swiper-scrollbar",
        hide: true
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        },
        1280: {
            slidesPerView: 4
        },
        1536: {
            slidesPerView: 5
        }
    }
});

동영상

2603, HTML, CSS, JS 활용, 반응형 스와이퍼

19강 - 스와이퍼, 현재 활성화된 슬라이드의 내용을 별도의 공간에 표시

양쪽 버튼 추가

- html
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

- js
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},

스와이퍼 - 스크롤바

CODEPEN - 1부

CODEPEN - 2부

CODEPEN - another (응용)

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

<div class="swiper-box-1">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <h1>Slide 1</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 1
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <h1>Slide 2</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 2
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <h1>Slide 3</h1>
                <div class="info_box_wrap hidden">
                    <div class="info_box">
                        슬라이드 3
                    </div>
                </div>
            </div>

        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>

        <div class="swiper-scrollbar"></div>

    </div>
</div>

<div class="swiper-box-1__active-slide-info-box-wrap border border-red-500"></div>

[css]

.swiper-box-1 {
    overflow: hidden;
}

.swiper-box-1 > .swiper {
    width: 600px;
    height: 300px;
}

[js]

동영상

2603, HTML, CSS, JS 활용, 스와이퍼, 현재 활성화된 슬라이드의 내용을 별도의 공간에 표시

HTML, CSS, JS 활용 - 11 ~ 14강

ponyo118 — Wed, 11 Mar 2026 17:44:01 +0900

11강 - 로딩화면 구현해야 하는 이유와, AOS, imagesLoaded, imgur, Image Downloader

CODEPEN - 1부

[html]

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div>
    <img src="https://picsum.photos/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/500/2300" alt="">
</div>

[css]

body {
font-size: 5rem;
font-weight: bold;
}

[js]

console.clear();

setTimeout(function() {
AOS.init();
}, 4000);

CODEPEN - 2부

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div>
    <img src="https://picsum.photos/id/217/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/id/201/500/2300" alt="">
</div>

[css]

body {
font-size: 5rem;
font-weight: bold;
}

[js]

console.clear();

$('body').imagesLoaded(function() {
AOS.init();
});

CODEPEN - 3부

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<div class="loading"></div>

<div>
    <img src="https://picsum.photos/id/217/500/2300" alt="">
</div>
<div>
    <div data-aos="fade-up" data-aos-once="true">FADE</div>
    <img src="https://picsum.photos/id/201/500/2300" alt="">
</div>

[css]

body {
    font-size: 3rem;
    font-weight: bold;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading::after {
    content: "로딩중..";
    font-size: 1rem;
    font-weight: normal;
}

[js]

console.clear();

$('body').imagesLoaded(function() {
    // $('.loading').css('display', 'none');
    // $('.loading').hide();
    $('.loading').remove();
    AOS.init();
});

동영상

2603, HTML, CSS, JS 활용, 로딩 화면 구현하기, AOS, imagesLoaded, animate 소개

12강 - mousemove effect (CODEPEN)

[html]

[css]

img {
width: 200px;
}

[js]

동영상

2603, HTML, CSS, JS 활용, mousemove effect

13강 - 앵커로 페이지 이동( CODEPEN )

[html]

<nav style="position: fixed; top: 0; right: 0; background-color: orange;">
<a href="#sec1">섹션1</a>
<a href="#sec2">섹션2</a>
<a href="#sec3">섹션3</a>
</nav>

<section id="sec1" style="height: 1000px; background-color: pink;">섹션1</section>
<section id="sec2" style="height: 1000px; background-color: skyblue;">섹션2</section>
<section id="sec3" style="height: 1000px; background-color: gold;">섹션3</section>

[css]

html {
scroll-behavior: smooth;
}

동영상

2603, HTML, CSS, JS 활용, 앵커로 페이지 이동

14강 - 너비 재는 법

마우스 올리면 따라다니는 아이템 밑줄 애니메이션

너비 재는 법

width()
- content 영역만(padding, border, margin x)
innterWidth()
- content + padding
outerWidth()
- content + padding + border
outerWidth(true)
- content + padding + border + margin

[html]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<header class="top-bar con-min-width">
    <div class="con height-100p flex">
        <nav class="top-bar__menu-box-1">
            <div class="top-bar__menu-box-1__line"></div>
            <ul class="flex height-100p">
                <li><a href="#" class="height-100p flex flex-ai-c"><span>HOME</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>BRAND</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>ARTICLES</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>WRITE</span></a></li>
                <li><a href="#" class="height-100p flex flex-ai-c"><span>FAQ</span></a></li>
            </ul>
        </nav>
    </div>
</header>

[css]

/* 노말라이즈 */
body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 라이브러리 */
.border-red {
    border: 5px solid red;
}

.height-100p {
    height: 100%;
}

.flex {
    display: flex;
}

.flex-ai-c {
    align-items: center;
}

.con {
    margin-left: auto;
    margin-right: auto;
}

/* 커스텀 */
.con-min-width {
    min-width: 1080px;
}

.con {
    width: 1080px;
}

.top-bar {
    background-color: black;
    color: white;
    height: 100px;
}

.top-bar__menu-box-1 {
    position: relative;
}

.top-bar__menu-box-1 > ul > li > a {
    padding: 0 20px;
}

.top-bar__menu-box-1 > ul > li:hover > a {
    background-color: white;
    color: black;
}

.top-bar__menu-box-1 .top-bar__menu-box-1__line {
    position: absolute;
    left: -100px;
    bottom: 0;
    background-color: #afafaf;
    height: 3px;
    width: 80px;
    transition: left .3s, width .3s;
}

[js]

console.clear();

function TopBar__init() {
    $('.top-bar__menu-box-1 > ul > li').mouseenter(function() {
        var $li = $(this);
        var $menuItemLine = $('.top-bar__menu-box-1__line');

        var left = $li.position().left;
        var width = $li.outerWidth();

        // console.log(`left : ${left}, width : ${width}`);

        $menuItemLine.css({
            left: left,
            width: width
        });
    });

    $('.top-bar__menu-box-1 > ul > li').eq(4).mouseenter();
}

TopBar__init();

동영상

2603, HTML, CSS, JS 활용, 구현, 마우스 올리면, 따라다니는 아이템 밑줄 애니메이션

ponyo118 님의 블로그

테일윈드

관련 링크

️ 챕터 1 : 부트스트랩, 테일윈드 비교

1강

동영상

️ 챕터 2 : 테일윈드 JIT

2강

3강

동영상

️ 챕터 3 : 테일윈드 식 코딩방법

4강

동영상

️ 챕터 4 : 이벤트 메뉴 구현

5강

️ 챕터 5 : 반응형 상품리스트 구현

6강

7강

동영상

️ 챕터 6 : 호버효과

8강

9강

10강

11강

번외

동영상

SASS/SCSS

SASS/SCSS

1강

SASS/SCSS 쓰는 이유

SASS/SCSS는 CSS를 대체하기 위한 언어가 아니다.

2강

SASS/SCSS 기본 사용법

3강

SASS/SCSS 변수

4강

@mixin 사용법

5강

@mixin 사용법 - 매개변수와 인자

믹스인 요약

@mixin 이란?

6강

@mixin 사용법 - 매개변수 초기화

7강

8강

@for문

9강

@for문을 이용한 배경이미지 적용

SCSS VSCODE 세팅

VSCODE에서 scss를 사용하기 위한 작업 순서

SCSS(SASS) 기초

1강

BEM CSS 명명법

2강

CSS Logical Properties

3강

CSS nesting(중첩 css) 사용방법

4강

CSS nesting에서 media 쿼리 중첩

Git, GitHub 기초

관련 링크

강사 리포지터리 주소

깃 기본 명령어

1강

자격 증명 관리자에서 로그인 정보 삭제

폴더 생성 후 vscode 열기

vdcode 터미널 단축키

복사 후 붙여넣는 법

리포지터리 생성

동영상

2강

git 폴더 및 브런치 설정

동영상

3강

사용자 설정

동영상

4강

리포지터리

동영상

5강