1. 탭 (Tabs)
사용자가 여러 콘텐츠를 한 번에 보고 전환할 수 있도록 해주는 UI 컴포넌트.
JavaScript와 CSS를 이용해 각 탭을 클릭할 때 다른 콘텐츠를 보여 줌.
2. 모달 (Modal)
사용자가 특정 동작을 할 때 팝업 형태로 정보를 표시하는 UI 요소.
모달 창은 페이지를 잠시 차단하고 중요한 메시지나 확인을 요구할 때 사용됨.
3. 툴팁 (Tooltip)
특정 요소에 마우스를 올리면 작은 설명 창이 나타나는 기능.
사용자가 인터페이스에서 요소에 대해 궁금한 점을 빠르게 확인할 수 있게 도와줌.
4. 네비게이션 바 (Navigation Bar)
웹사이트의 메뉴나 탐색용 링크들을 모아놓은 UI 요소.
보통 페이지 상단이나 좌측에 위치하며, 여러 페이지나 섹션으로 쉽게 이동할 수 있게 해 줌.
5. 드롭다운 메뉴 (Dropdown Menu)
클릭이나 호버로 나타나는 메뉴 항목을 제공하는 UI 요소.
긴 메뉴 항목을 수직으로 나열할 때 유용하고, 화면을 깔끔하게 유지 가능.
6. 슬라이더 (Slider)
사용자가 이미지를 좌우로 이동시키거나 값을 조정할 수 있게 하는 인터페이스 컴포넌트.
사진 갤러리나 가격 조정 등에 많이 사용됨.
7. 캐러셀 (Carousel)
여러 개의 이미지나 콘텐츠를 슬라이딩 형식으로 표시하는 UI 컴포넌트.
주로 자동으로 슬라이드되거나 사용자 클릭으로 다음 콘텐츠를 볼 수 있음.
8. 아코디언 (Accordion)
여러 섹션을 접었다 펼 수 있게 하는 UI 컴포넌트.
많은 정보를 한 페이지에서 간결하게 표시할 때 유용.
9. 폼 (Form)
사용자로부터 데이터를 입력받는 중요한 UI 요소.
필수 항목, 유효성 검사, 제출 버튼 등이 포함됨.
주로 이메일 입력, 로그인 폼, 가입 폼 등을 처리할 때 사용됨.
10. 진행 바 (Progress Bar)
어떤 작업의 진행 상황을 시각적으로 보여주는 컴포넌트.
파일 업로드, 다운로드, 로딩 상태 등을 표시할 때 사용.
11. 팝업 (Popup)
특정 상황에서 자동으로 화면에 나타나는 작은 창이나 알림을 말함.
모달과 유사하지만, 팝업은 보통 페이지 위에 겹쳐서 나타나며, 사용자가 제어할 수 있는 창임.
12. 알림 (Toast Notification)
화면 하단에 잠깐 나타났다 사라지는 작은 알림 메시지.
예를 들어 "저장 완료" 같은 짧은 메시지를 보여줄 때 사용됨.
13. 드래그 앤 드롭 (Drag and Drop)
요소를 클릭하여 끌어서 다른 위치로 옮길 수 있게 하는 기능.
파일 업로드나 목록 재정렬 등에서 사용.
14. 배지 (Badge)
숫자나 아이콘을 표시해 상태나 알림을 나타내는 작은 UI 요소.
보통 카운팅 정보(예: 알림 수)를 표시할 때 사용.
15. 페이지네이션 (Pagination)
여러 페이지로 나누어진 콘텐츠를 쉽게 탐색할 수 있게 해주는 UI 요소.
페이지 번호를 클릭하여 다음이나 이전 페이지로 이동 가능.
16. 스켈레톤 로딩 (Skeleton Loading)
콘텐츠가 로딩되는 동안 로딩 중임을 사용자에게 시각적으로 표시하는 UI 요소.
텍스트나 이미지가 나타날 위치에 회색 또는 흐릿한 형태로 로딩 UI를 표시할 수 있움.
17. 무한 스크롤 (Infinite Scroll)
페이지 하단에 도달하면 자동으로 추가 콘텐츠가 로딩되어 페이지를 넘기지 않고도 계속 스크롤하면서 내용을 볼 수 있게 해주는 기능.
18. 헤더 (Header)
페이지 상단에 위치하는 부분으로, 사이트의 이름, 로고, 검색창, 네비게이션 링크 등이 포함돼. 페이지의 첫 인상을 주는 중요한 부분임.
19. 푸터 (Footer)
페이지 하단에 위치하며, 저작권 정보, 연락처, 개인정보처리방침, 사이트맵 등의 링크를 포함하는 요소임.
20. 그리드 레이아웃 (Grid Layout)
페이지를 여러 개의 열과 행으로 나누어 콘텐츠를 정렬하는 기술.
CSS Grid나 Flexbox를 이용해 구현할 수 있음.
21. 오버레이 (Overlay)
화면을 덮는 반투명한 레이어를 말함.
주로 모달, 이미지 갤러리, 비디오 플레이어 등에 사용됨.
화면의 다른 요소 위에 덧씌워져 배경을 흐리게 만드는 기능이 있음.
22. 필터 (Filter)
콘텐츠나 데이터를 특정 기준에 따라 필터링할 수 있게 해주는 기능.
예를 들어, 쇼핑몰에서 가격대, 브랜드별로 필터링할 때 사용됨.
23. 검색 (Search Bar)
사용자가 원하는 정보를 쉽게 찾을 수 있도록 돕는 검색창.
자동완성, 필터링 등 다양한 기능을 추가할 수 있음.
24. 배경 비디오 (Background Video)
웹페이지의 배경으로 비디오를 넣어서 시각적 효과를 주는 기술.
페이지를 더욱 역동적으로 보이게 할 수 있어.
25. 스크롤 애니메이션 (Scroll Animations)
사용자가 페이지를 스크롤할 때 콘텐츠가 애니메이션 효과와 함께 나타나는 기능.
주로 AOS (Animate on Scroll) 라이브러리를 사용해서 구현할 수 있어.
그외도 많지만, 일단 위 정도만 할 줄 알면 의뢰 받아 작업하는데 큰 지장 없을 듯.
