GNB(Global Navigation Bar) 웹사이트 전체에 공통적으로 적용되는 내비게이션바. 보통 웹사이트 최상단에 위치하고 있어 메인 메뉴라고도 불림.
LNB(Local Navigation Bar) GNB를 클릭하거나 호버했을 때 노출되는 하위 메뉴. 서브 메뉴라고도 불림.
SNB(Side Navigation Bar) 보통 메인 메뉴와 서브 메뉴를 제외한 기타 메뉴를 SNB라고 함. 보통 왼쪽이나 오른쪽에 위치하며 사이드 메뉴라고도 불림.
Hero Image 웹페이지 상단에 위치한 큰 배너
Pop-up, Modal 팝업은 현재 페이지 위에 새로운 브라우저 창을 띄우는 것으로 주 용도는 광고, 알림, 새로운 정보 갱신 등이 있음. 모달은 현재 페이지에서 상위 레이어를 띄우는 것으로 이 창을 종료하지 않는 이상 원래 창 화면을 작동할 수 없음. 따라서 팝업은 두 개의 브라우저 창이고 모달은 하나의 브라우저와 레이어 창임 . 현재 팝업은 많이 없어지는 추세이며 팝업보다는 모달을 주로 사용함.
Snack bar 사용자가 수행한 액션에 대해 알려주기 위해 일시적으로 화면에 나타남. 별도의 액션을 제공하는 것이 가능한 점이 Toast와 차이점.
Toggle 스위치를 키고 끄듯이 사용하 여 주로 선택지가 2개일 때 사용
Tooltip 사용자가 특정 요소에 마우스를 호버하면 정보 텍스트를 표시
Accordion 내용을 펼쳤다가 접을 수 있는 컴포넌트로 아이템 리스트를 펼치고 숨기는 기능
Breadcrumb 브레드 크럼은 직역하면 "빵가루"라는 뜻으로 헨젤과 그레텔에서 지나온 길에 빵가루를 뿌려 표시하는 것처럼 유저가 웹사이트 내에서 현재 위치한 페이지가 어디인지 알려주는 네비게이션 텍스트임. 주로 페이지 상단 좌측에 위치.
출처 : https://www.inflearn.com/blogs/3780?gad_source=1&gclid=Cj0KCQjw4MSzBhC8ARIsAPFOuyVAjboCMK6qanjJy6-htVZTvQo3fvZ_-1vx41Ijfv-FKRfoAf0vmPIaAkTbEALw_wcB, https://www.ascentkorea.com/what-is-gnb/, https://m.blog.naver.com/kosoodream/220780613800, https://imweb.me/blog?idx=173, https://brunch.co.kr/@tigrisdesign/3, https://yozm.wishket.com/magazine/detail/1272/, https://brunch.co.kr/@writer-beyou/6, http://61.107.76.13/Li/04_02.html, https://yozm.wishket.com/magazine/detail/1302/