🐨CoalaCoding

Docs▾

JavaScript React HTML & CSS Backend AI & LLM Dev Tools Creative

🐨CoalaCoding

디지털 크리에이터를 위한 한국어 기술 문서

문서

JavaScript
React
HTML & CSS
Backend
AI & LLM
Dev Tools
Creative

커뮤니티

게시판
예제 모음

기타

관리자

정책

소개
개인정보처리방침
이용약관
연락처

© 2026 CoalaCoding. All rights reserved.

검색 결과

"예제" 결과: 50건

문서
반복 업무의 흐름 설계하기
반복 업무의 입력, 처리, 검증 흐름을 설계하는 교안이다.
/docs/ai/prompt/prompt-18
문서
AI가 사용할 도구 정하기
AI 작업에 필요한 도구와 권한을 구분하는 교안이다.
/docs/ai/prompt/prompt-19
문서
AI의 권한과 보안 통제하기
AI의 읽기, 쓰기, 삭제, 외부 전송 권한을 통제하는 교안이다.
/docs/ai/prompt/prompt-22
문서
AI 업무 하네스 만들기
지시, 자료, 절차, 검증, 기록을 묶은 AI 업무 하네스를 만드는 교안이다.
/docs/ai/prompt/prompt-25
문서
피그마 컴포넌트 프로퍼티
/docs/creative/figma/component-property
문서
벤치마킹 보고서 만들기
벤치마킹이 왜 필요한지(환경 분석·차별화)를 알고, 배포된 양식으로 웹사이트 한 곳을 6개 항목으로 살펴 보고서 1건을 만든다.
/docs/creative/uxui/benchmarking-report-v2
문서
디자인 방향성 정의하기
벤치마킹에서 찾은 차별화를 콘셉트 한 문장과 톤&매너로 옮겨, 만들 사이트의 디자인 방향성 시트 1건을 만든다.
/docs/creative/uxui/design-direction
문서
정보구조도 설계하기
사이트에 담을 내용을 카드소팅으로 묶고 메뉴 이름을 붙여, 홈 아래 대메뉴·하위 메뉴를 계층으로 그린 정보구조도 1건을 만든다.
/docs/creative/uxui/information-architecture
문서
와이어프레임·스토리보드 만들기
Google Stitch로 홈 화면을 생성해 Figma로 가져와 와이어프레임으로 정리하고, 화면 설계서(스토리보드) 1건을 만든다.
/docs/creative/uxui/wireframe-storyboard
문서
디자인 마감하고 웹으로 구현하기
와이어프레임에 톤&매너를 입혀 디자인을 마감하고, Stitch·Gemini로 반응형 웹 홈 화면 1개를 만든다.
/docs/creative/uxui/design-build
문서
배색표 만들기
색이론에 맞춰 5색 팔레트를 만들고 6:3:1 비율로 로켓 일러스트를 채색한다.
/docs/creative/Illustrator/color-palette-rocket
문서
달력 만들기
정보의 계층을 시각적 디자인 요소(크기·색·공간·굵기·위치)로 표현한 월간 달력을 일러스트레이터로 만든다.
/docs/creative/Illustrator/hierarchy-calendar
문서
디자인 예제파일
예제파일링크모음
/docs/creative/Illustrator/example
문서
영상의 이해
/docs/creative/premiere/0-시작
문서
3-자막만들기
/docs/creative/premiere/3-자막만들기
문서
codesandbox
/docs/devtools/misc/codesandbox
문서
7. 트랜지션과-애니메이션
/docs/html-css/css/트랜지션과-애니메이션
문서
6. 레이아웃
/docs/html-css/css/레이아웃
문서
4. 박스모델
/docs/html-css/css/박스모델
문서
5. 배경
/docs/html-css/css/배경
문서
반응형-폰트크기
/docs/html-css/css/반응형-폰트크기
문서
2. 문자
/docs/html-css/css/문자
문서
hover효과
/docs/html-css/css/hover
문서
calc
/docs/html-css/css/calc
문서
clamp(),min(),max()
/docs/html-css/css/clamp
문서
svg
/docs/html-css/css/svg
문서
containerQuery
/docs/html-css/css/containerquery
문서
8. 마스크
/docs/html-css/css/mask
문서
클립패스
/docs/html-css/css/clippath
문서
var
/docs/html-css/css/var
문서
인터페이스설계
와이어프레임 아이콘, Flow 제작, 오토레이아웃, 반응형 디자인(PC/태블릿/모바일) 레이아웃 설계를 알아봅니다
/docs/html-css/ui/인터페이스설계
문서
기능심화
카드UI, 텍스트 다루기, 도넛차트, 갤러리, 아이콘 만들기 등 피그마의 심화 기능을 예제를 통해 알아봅니다
/docs/html-css/ui/기능심화
문서
인터페이스예제
피그마의 캔버스, 레이어, 좌측패널, 상단툴바, 우측패널 등 인터페이스 구성과 기본 사용법을 예제를 통해 알아봅니다
/docs/html-css/ui/인터페이스예제
문서
adaption
/docs/html-css/ui/adaption
문서
gsap
/docs/html-css/animation/gsap-3
문서
tabSlide
/docs/html-css/ui/tabslide
문서
ajax
/docs/html-css/ui/ajax
문서
scrollEffect
/docs/html-css/ui/scrolleffect
문서
slide
/docs/html-css/ui/slide
문서
스킬바 UI
스크롤 위치에 따라 막대형, 원형 스킬바를 애니메이션하는 방법을 학습한다.
/docs/html-css/animation/skillbar
문서
activeMenu
/docs/html-css/ui/activemenu
문서
swiper
/docs/html-css/ui/swiper
문서
menu
/docs/html-css/ui/menu
문서
10. 웹접근성
WCAG 2.2 의 인식·운용·이해 원칙 — 대체 텍스트, 색상 대비, 키보드 접근성, `inert`, `<dialog>` aria-modal 등 모던 패턴 포함.
/docs/html-css/html/웹접근성
문서
6. 미디어요소
`div`/`span`, 시맨틱 구조 태그, `audio`/`video`, `iframe`, `details`·popover 등 모던 미디어·디스클로저 요소를 정리한다.
/docs/html-css/html/미디어요소
문서
8. 폼요소
`form`/`input`/`textarea`/`select`/`label` 폼 기본부터 모바일을 위한 `inputmode`·`enterkeyhint`·`datalist`·`autocomplete` 까지.
/docs/html-css/html/폼요소
문서
7. 테이블요소
`table`/`tr`/`td` 기본 구조, `thead`/`tbody`/`tfoot` 구조화, `colgroup`, 셀병합(`rowspan`·`colspan`), 표 접근성을 다룬다.
/docs/html-css/html/테이블요소
문서
5. 링크요소
`figure`/`figcaption`, 이미지맵(`map`/`area`), 네임앵커 등 이미지·앵커 기반 링크 요소를 예제와 함께 다룬다.
/docs/html-css/html/링크요소
문서
4. 문단과텍스트요소
HTML5 기본 골격, 제목·문단·강조·하이퍼링크·이미지·목록 등 본문을 이루는 핵심 텍스트 태그와 모던 반응형 이미지를 정리한다.
/docs/html-css/html/문단과텍스트요소
문서
1. aboutweb
웹의 동작 원리(클라이언트·서버·HTTP), 도메인과 DNS, URL 구조, HTML·CSS·JS 의 역할 분담을 소개한다.
/docs/html-css/html/aboutweb