minstudio

Minstudio - 프론트엔드 개인 개발 노트

웹 리소스 & 레퍼런스

웹 개발에 필요한 에셋과 레퍼런스 도감입니다. 원하는 항목을 빠르게 찾아 복사하세요.

HTML 엔티티 코드

웹 페이지에서 특수 문자를 안전하게 표현하기 위해 자주 사용하는 HTML 엔티티 코드 모음입니다. 클릭하여 바로 복사하세요.

필수 SVG 아이콘

웹 디자인에 필수적으로 사용되는 깔끔한 SVG 아이콘 모음입니다. 외부 라이브러리 없이 순수 SVG 코드를 클릭하여 복사하세요.

CSS 커서 레퍼런스

다양한 CSS 커서(Cursor) 속성들을 직접 마우스오버하여 체험해보고, 필요한 CSS 코드를 클릭하여 복사하세요.

무료 웹 폰트

실무에서 가장 많이 사용되는 상업용 무료 폰트 모음입니다. 웹폰트 import 구문과 font-family 코드를 클릭하여 바로 복사하세요.

이모지 프리셋

웹 개발, 기획서, 디자인 등에 자주 쓰이는 유용한 이모지 모음입니다. 카테고리별로 모아둔 이모지를 원클릭으로 바로 복사하세요.

한자키 특수문자 모음

자음(ㅁ, ㄴ, ㅇ 등)과 한자키로 입력하던 친숙한 전각 특수기호들을 카테고리별로 모아 원클릭으로 편하게 복사하세요.

CSS 애니메이션 모음

웹 UI를 생동감 있게 만들어주는 트렌디한 Keyframe 애니메이션 모음입니다. 미리보기를 확인하고 CSS 코드를 복사하세요.

CSS 그라데이션 프리셋

웹사이트를 화려하게 꾸며주는 아름다운 선형 그라데이션 컬러 팔레트 모음입니다. 클릭 한 번으로 CSS 코드를 복사하세요.

CSS 박스 섀도우 레퍼런스

애플이나 토스 느낌의 부드럽고 고급스러운 다중 그림자(Soft UI) 및 네오모피즘 스타일의 box-shadow 코드를 원클릭으로 복사하세요.

프론트엔드 개발

웹의 화면을 구성하고 사용자와 상호작용하는 프론트엔드 핵심 기술을 체계적으로 학습합니다.

HTML

웹 페이지의 뼈대를 이루는 필수 마크업 구조, 폼 태그, 텍스트 서식, 시맨틱 태그 등 기초를 탄탄하게 다집니다.

HTML5 Web API

브라우저 내장 웹 API(Fetch, Storage, Intersection Observer, Canvas 등)를 활용한 고급 웹 애플리케이션 개발 기법을 학습합니다.

CSS

기초 스타일링부터 Flexbox/Grid 레이아웃, 그리고 화려한 @keyframes 애니메이션 기법까지 마스터합니다.

TailwindCSS

Utility-First CSS의 핵심! 클래스명만으로 빠르고 일관되게 반응형 웹과 화려한 UI를 설계하는 방법을 다룹니다.

JavaScript (ES6+)

초보자를 위한 코어 문법부터 DOM 조작, 이벤트 루프, 비동기(Promise, Async/Await) 등 모던 JS의 모든 것을 배웁니다.

TypeScript

정적 타입 기초, 제네릭, 유틸리티 타입 등 안전하고 견고한 애플리케이션을 작성하기 위한 실무 타입스크립트를 다집니다.

GSAP

기본 트윈부터 타임라인, ScrollTrigger를 활용한 화려한 스크롤 인터랙션까지 웹 애니메이션의 모든 것을 배웁니다.

React

컴포넌트와 상태 관리(Hooks) 기초부터 Zustand, React Query 활용, 나아가 Next.js App Router 입문까지 실무 기술을 마스터합니다.

Next.js 14+

서버 컴포넌트(RSC), 서버 액션, 강력한 데이터 패칭 및 캐싱 전략 등 실무 표준 풀스택 프레임워크를 학습합니다.

Vue 3

초보자도 쉽고 빠르게 배우는 Vue 3! 최신 Composition API와 Pinia를 활용하여 직관적이고 강력한 SPA를 개발합니다.

Nuxt 4+

최신 디렉토리 구조와 Nitro 서버 엔진을 활용하여 직관적이고 강력한 풀스택 웹 애플리케이션을 개발합니다.

SEO

웹사이트가 구글, 네이버 검색에 잘 노출되도록 하는 핵심 메타 태그와 기술적 SEO 최적화 기법을 배웁니다.