HTML
-
제대로 알고 쓰자! - Tooltip과 Popover1. 학습하기 2024. 11. 17. 10:00
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다.Tooltip과 Popover 컴포넌트는 마치 Toast와 Snackbar의 관계와 같다. Popover는 Tooltip의 확장 형태로 더 많은 정보와 추가 콘텐츠를 포함할 수 있는 UI 요소로,많은 UI 라이브러리나 디자인 시스템에서 둘을 구분하지 않고 하나의 컴포넌트로 표현하기도 한다.다만 둘을 엄밀히 구분할 때 사용..
-
제대로 알고 쓰자! - Dialog와 Pop-up1. 학습하기 2024. 10. 2. 16:00
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다. 두 번째 포스팅 주제는 화면 속의 화면, Dialog와 Pop-up 창에 대해 이야기 해 보자. 다음과 같은 구성으로 진행된다.Dialog? Modal?새로운 창, Pop-upDialog vs Pop-up1. Dialog? Modal?현재 열려있는 페이지에 포함된 창으로 페이지 위에 깔린 '레이어'를 말한다.다이얼로그는..
-
제대로 알고 쓰자! - Toast와 Snack bar (& Dialog, Alert)1. 학습하기 2024. 9. 24. 23:30
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다. 첫 번째 포스팅 대상은 정보 전달의 목적으로 정말 자주 사용되는 Toast와 Snack bar.그리고 같은 목적(정보 전달)을 가진 컴포넌트 Dialog와 시스템의 Alert에 대해서도 간단하게 다뤄보려고 한다.사용자에게 간단한 정보를 전달하기 위한 여러 컴포넌트들을 종합적으로 분석해보자. 다음과 같은 구성으로 진행된다..