🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

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

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. topBtn
  • 2. rollingBanner
  • 3. menu
  • 4. stickyMenu
  • 5. accordion
  • 6. swiper
  • 7. activeMenu
  • 9. slide
  • 10. tab
  • 11. scrollEffect
  • 12. ajax
  • 13. tabSlide
  • 15. adaption
  • 18. 게슈탈트이론
  • 19. 색채심리학
  • 20. 황금비율
  • 21. 컬러모드
  • 22. 디자인실무용어
  • 23. 이미지파일의특징
  • 24. 폰트와사이즈
  • 25. 레이아웃기초
  • 26. 10가지법칙
  • 27. 아이트래킹
  • 28. 색상을성공적으로고르는방법
  • 29. 타이포그래피10가지팁
  • 30. 스타일가이드만들기
  • 31. 모바일디자인버튼
  • 32. 조형요소
  • 33. 6가지비주얼체계규칙
  • 34. 아이콘디자인이론
  • 35. 해상도와그리드시스템
  • 36. 피그마란
  • 37. 작업환경세팅
  • 38. 인터페이스예제
  • 39. 기능심화
  • 40. 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트

UI 컴포넌트

제목설명
1. topBtn
2. rollingBanner
3. menu
4. stickyMenu
5. accordion
6. swiper
7. activeMenu
9. slide
10. tab
11. scrollEffect
12. ajax
13. tabSlide
15. adaption
18. 게슈탈트이론디자인의 기본 원리인 게슈탈트 이론의 4가지 원칙을 알아봅니다
19. 색채심리학색채가 인간의 감정과 감각에 미치는 영향을 알아봅니다
20. 황금비율디자인에서 황금비율을 적용하는 다양한 방법을 알아봅니다
21. 컬러모드RGB, CMYK, HSB 등 색상모드의 원리와 차이점을 알아봅니다
22. 디자인실무용어디자인 현장에서 자주 사용하는 실무 용어를 알아봅니다
23. 이미지파일의특징이미지 파일의 확장자별 특징과 비트맵/벡터 방식의 차이를 알아봅니다
24. 폰트와사이즈웹 타이포그래피의 가독성, 계층구조, 여백 등 핵심 원칙을 알아봅니다
25. 레이아웃기초웹사이트 레이아웃의 종류와 잘 디자인하는 방법을 알아봅니다
26. 10가지법칙멋진 웹사이트 레이아웃을 디자인하는 10가지 법칙과 실용 가이드
27. 아이트래킹아이트래킹의 개념과 F패턴, Z패턴을 활용한 웹디자��� 방법을 알아봅니다
28. 색상을성공적으로고르는방법색채 이론, 색상환, 색채 배합, 색상 의미, 컬러 프로파일을 이해하고 디자인에 어울리는 팔레트를 선택하는 방법을 알아봅니다
29. 타이포그래피10가지팁웹디자인에서 텍스트의 가독성과 사용성을 향상시키는 타이포그래피 10가지 규칙을 알아봅니다
30. 스타일가이드만들기디자인 스타일 가이드의 구성요소와 제작 방법을 알아봅니다
31. 모바일디자인버튼모바일 UI에서 버튼의 구조, 유형, 시각적 계층구조, 상태, 크기, 위치 등 버튼 디자인의 핵심 원칙을 알아봅니다
32. 조형요소디자인의 기본 조형요소인 점, 선, 면의 특징과 시각적 느낌을 알아봅니다
33. 6가지비주얼체계규칙색상, 크기, 서체, 여백, 배열, 명암 대조를 활용하여 비주얼 체계(Visual Hierarchy)를 구축하는 6가지 규칙을 알아봅니다
34. 아이콘디자인이론일관성 있는 아이콘 세트를 만들기 위한 7가지 규칙과 아이콘 제작 가이드를 알아봅니다
35. 해상도와그리드시스템디스플레이 해상도, 래스터화, 배율 디자인, 그리드 시스템, 반응형 그리드, 간격 시스템을 알아봅니다
36. 피그마란클라우드 기반 디자인 툴 피그마의 개요, 프로토타입 툴 비교, 요금제, 공식 매뉴얼 링크를 알아봅니다
37. 작업환경세팅피그마 프로그램 설치, 미러링 설정, 개인 문서 생성, 프로젝트 만들기 등 작업환경을 세팅하는 방법을 알아봅니다
38. 인터페이스예제피그마의 캔버스, 레이어, 좌측패널, 상단툴바, 우측패널 등 인터페이스 구성과 기본 사용법을 예제를 통해 알아봅니다
39. 기능심화카드UI, 텍스트 다루기, 도넛차트, 갤러리, 아이콘 만들기 등 피그마의 심화 기능을 예제를 통해 알아봅니다
40. 인터페이스설계와이어프레임 아이콘, Flow 제작, 오토레이아웃, 반응형 디자인(PC/태블릿/모바일) 레이아웃 설계를 알아봅니다