AI로 코딩하는 초보자를 위한
실전 도구 모음이에요

브라우저 탭, 북마크, 구글 검색 결과에 뜨는 작은 아이콘. SVG로 직접 만들고 실시간으로 수정해봐요.

버튼 클릭 시 화면 위에 뜨는 레이어 다이얼로그. 알림, 확인창, 이미지 라이트박스까지 3가지 유형을 직접 만들어봐요.

모바일에서 ☰ 버튼으로 펼쳐지는 네비게이션. 슬라이드, 드롭다운, X자 애니메이션 3가지 유형 제공.

가로+세로 동시에 잡는 2차원 레이아웃. 카드 그리드, 전체 페이지 구조, 반응형 배치를 인터랙티브 플레이그라운드로 익혀봐요.

화면 우측 하단에 고정 표시되는 카카오톡 상담 버튼. 클릭하면 바로 오픈카톡으로 연결돼요.

카카오톡, 슬랙, 트위터에 링크 공유 시 나오는 미리보기 이미지와 제목을 설정해요.

구글 검색 결과에 뜨는 제목과 설명 텍스트를 직접 설정해요. 클릭률을 높이는 핵심이에요.

애드센스 신청부터 승인까지, 심사 통과를 위해 꼭 갖춰야 할 것들을 체크리스트로 알아봐요.

구글이 내 사이트를 빠르게 인덱싱하도록 돕는 XML 파일. GitHub Pages에서 만드는 법을 알아봐요.

방문자 수, 체류 시간, 유입 경로를 한눈에. GA4 설치부터 기본 지표 읽는 법까지 알아봐요.

애드센스 게재 시 필수인 쿠키 동의 배너. GDPR 대응 가능한 간단한 배너를 직접 만들어봐요.

색상, 폰트, 간격을 변수로 관리하면 전체 디자인을 한 번에 바꿀 수 있어요.

가로 정렬, 세로 정렬, 가운데 맞추기. display:flex 한 줄로 레이아웃 고민을 끝내봐요.

CSS 변수 + 미디어쿼리로 라이트/다크 테마를 구현해요. 토글 버튼으로 수동 전환까지.

onclick, addEventListener, 이벤트 위임까지. 버튼 클릭으로 인터랙션을 만드는 핵심 기초예요.

새로고침해도 사라지지 않는 브라우저 저장소. 다크모드 설정, 메모장, 장바구니를 직접 만들어봐요.

실시간 이메일·비밀번호 체크, 강도 표시, 제출 버튼 활성화까지. 회원가입 폼 완성 레시피예요.

모바일·태블릿·데스크탑 대응. 미디어쿼리, clamp(), auto-fill로 화면 크기에 맞는 레이아웃을 만들어봐요.

헤더 변형, 페이드인 애니메이션, 진행률 바까지. IntersectionObserver로 성능 좋은 스크롤 효과를 만들어요.

JS 없이 CSS만으로 hover, 페이드인, 스피너, 바운스 효과까지. transition과 @keyframes 두 가지로 사이트를 살아있게 만들어요.

외부 API에서 날씨·뉴스 데이터를 가져오는 방법. async/await, 에러 처리, 로딩 상태까지 실제 API로 바로 체험해요.

언더라인·알약·카드 탭 3가지 스타일. 콘텐츠를 깔끔하게 분류하는 탭 컴포넌트를 직접 클릭해서 확인하고 코드를 가져가세요.