• 회원가입
  • 로그인
  • 구글아이디로 로그인

[talk] 웹개발자라면 구현할 줄 알아야 하는 웹기술 용어들

116  

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) 라이브러리를 사용해서 구현할 수 있어.

 

그외도 많지만, 일단 위 정도만 할 줄 알면 의뢰 받아 작업하는데 큰 지장 없을 듯.


분류 제목
ani 여동생이 생겼다 [웹드라마] 새글
ucc 민주당 이재명 대표 명연설
talk 김길리 금메달 아시안게임 여자 쇼트트랙 1500m
talk DeepSeek (딥시크) 중국 AI 사용 시 주의사항
sports 토리노 쇼트트랙 여자 1500m 결승 금, 은, 동 싹쓸이!
girl 아기 병아리 천소윤 치어리더 님
girl 천소윤 치어리더 님 쪼그려 앉아 삐끼삐끼 댄스
girl 응원에 진심인 천소윤 치어리더 님
girl 저팔계 춤 댄스 추는 장유진 치어리더 님
girl 팬들 물총에 흠뻑 젖은 장유진 치어리더 님
1/159
목록
찾아주셔서 감사합니다. Since 2012