본문 바로가기

전체 글55

[HTML] HTML Popover API 완벽 가이드: JavaScript 없이 팝오버 만들기 웹 애플리케이션을 개발하다 보면 툴팁(Tooltip), 드롭다운 메뉴(Dropdown Menu), 컨텍스트 메뉴(Context Menu), 알림 패널 등 화면 위에 일시적으로 표시되는 UI가 필요하다.과거에는 이러한 기능을 구현하기 위해 JavaScript 라이브러리나 직접 작성한 스크립트가 필요했다. 하지만 최근 HTML 표준에 추가된 Popover API를 사용하면 훨씬 간단하게 구현할 수 있다.이번 글에서는 HTML Popover가 무엇인지, 사용 방법, 브라우저 지원 현황, 접근성 고려사항, 그리고 한계점과 대안을 살펴본다.HTML Popover란?HTML Popover는 브라우저가 기본적으로 제공하는 팝오버 UI 기능이다.Popover API를 사용하면 JavaScript 없이도 버튼 클릭 시 .. 2026. 6. 18.
[HTML] 웹 UI의 혁신: HTML-in-Canvas API의 등장과 활용법 웹 개발 기술은 언제나 눈부시게 발전해 왔지만, 화려한 3D 그래픽이나 고성능 애니메이션을 구현할 때 늘 마주치는 거대한 장벽이 하나 있었습니다. 바로 ‘캔버스(Canvas)의 시각적 화려함’과 ‘웹 접근성(Accessibility) 및 SEO(검색 엔진 최적화)’ 사이의 타협이었습니다.Three.js나 WebGL, WebGPU를 사용해 태그 안에 멋진 가상 세계를 그려내도, 스크린 리더(화면 낭독기)는 그 안에 어떤 텍스트가 있는지 읽을 수 없었습니다. 검색 엔진 크롤러 역시 마찬가지였죠. 개발자들은 이를 해결하기 위해 캔버스 뒤에 눈에 보이지 않는 ‘스크린 리더용 DOM 구조’를 수동으로 따로 만들어 매칭하는 번거로운 작업을 해야만 했습니다.하지만 최근 Google I/O에서 마침내 이 문제를 근본.. 2026. 6. 15.
HTML5 - 아직 이거 몰라? 일하면서 많다면 많은 코옵(Co-op) 학생들을 만나봤고 인터뷰도 해본 결과 HTML의 기초를 잘 모르는 상태로 React, Angular, 또는 Vue를 시작하는 사람들이 많다는 걸 느꼈습니다. 그래서 오늘은, 개인적인 경험을 바탕으로, 알아두면 좋은 HTML 몇 개를 가져와 봤습니다. 어코디언 (Accordion)어코디언, 혹시 생소하신가요?사이트의 Q&A 페이지에 보면 질문을 클릭하면 아래로 열리면서 답변이 나오는 걸 보신 적 있을까요?이런 요소를 어코디언이라고 합니다.전에는 어코디언을 만들려면 여러 개와 을 사용해서 UI를 만들고 자바스크립트를 버튼에 연결해서 상호작용할 수 있는 함수도 만들어야 했습니다.하지만 이제는 단 2개의 HTML요소로 쉽게 만들 수 있습니다.바로 과 입니다. Detai.. 2024. 7. 4.
클릭 투 플레이 <iframe> 웹 사이트나 블로그를 제작할 때, 페이지에 영상을 삽입해야 하는 경우가 종종 있습니다.일반적으로 유튜브 영상을 포함해 대부분의 영상 삽입에는 태그를 사용하셨을 것입니다. 영상 한두 개 정도는 큰 문제가 없을 수 있지만, 영상이 여러 개일 경우 페이지 성능에 영향을 미칠 수 있습니다.이러면 페이지 로딩 시간이 길어지고, 페이지에 따라서는 반응 속도가 느려져 렉이 걸린 것처럼 보이기도 합니다. 혹시 다른 사이트나 블로그를 보면서 이미지를 클릭했더니 영상으로 바뀌는 것을 본 적이 있으신가요?만약 본 적이 있다면 "왜 이렇게 했지?"라고 궁금해하거나 "오~ 좀 있어 보이네"라고 생각했을 수도 있습니다. 이러한 방식은 페이지 성능을 최적화하고 사용자 경험을 향상하기 위한 방법 중 하나입니다.오늘은 이러한 문제를.. 2024. 6. 30.
[웹 접근성] 버튼과 링크 그리고 접근성 이번 포스트에서는 버튼과 링크, 그리고 접근성에 대해서 이야기해 볼까 합니다. 웹사이트나 웹어플에서 버튼과 링크는 없어서는 안 되는 존재입니다. 버튼 없이는 아무런 상호작용도 못하고, 링크 없이는 어느 곳으로도 갈 수 없습니다. '버튼이 버튼이고, 링크가 링크지 접근성이랑 무슨 상관?'이라고 생각하시나요? 그렇다면 당신은 아직 HTML을 제대로 이해하지 못했습니다. 웹접근성에서 자주 언급되는 중요사항 중 하나가 시맨틱 HTML을 사용하는 것입니다. 그럼 이제 버튼이랑 링크를 제대로 파헤쳐볼까요? 좋은 버튼 만드는 방법 좋은 버튼을 만들려면 먼저 버튼의 사용 용도를 알아야 합니다. 버튼은 무언가를 할 때(액션) 사용하는 요소입니다. 그러면 어떤 버튼이 좋은 버튼일까요? 일단 좋은 버튼은 그 목적과 결과가 .. 2023. 10. 23.
[웹 접근성] 웹 접근성을 위한 올바른 이미지 활용법 요새는 이미지 없는 사이트를 찾아보기 힘들 정도로 이미지는 텍스트 다음으로 많이 사용됩니다. 이렇게 이미지를 많이 사용하는 이유 중 하나를 꼽으라면 편리함 이겠죠. 장문의 글 없이도 많은 양의 정보를 전달할 수 있다는 편리함. 그런데 이미지에도 웹 접근성이 적용된다는 거 알고 있나요? 이미지에는 대체 텍스트라는 정보를 추가할 수 있는데요, 이 대체 텍스트를 어떻게 작성하는지가 핵심입니다. 이미지의 대체 텍스트는 HTML 이미지 요소에 ‘alt’ 속성을 사용합니다. alt 속성은 스크린 리더와 같은 보조 프로그램 사용자도 이미지의 정보를 접할 수 있도록 도와주는 역할을 합니다. 대체 텍스트를 작성할 때는 최대한 정확하고 간결하게 작성하는 게 중요합니다. 대체 텍스트의 길이는 주로 120~125자 이내로 하.. 2023. 6. 22.
[웹 접근성] 웹 접근성을 위한 랜드마크 사용 방법 6가지 웹 접근성은 개개인의 능력에 관계없이 모든 사람이 디지털 세상에 접근하고 탐색할 수 있도록 하는 데 핵심적인 역할을 합니다. 웹 접근성을 향상하는 중요한 요소 중 하나는 랜드마크를 효과적으로 사용하는 것 이죠. 이 글에서는 랜드마크를 효과적으로 사용할 수 있는 7가지 방법을 살펴보려고 합니다. 이 방법들을 알아두면 웹 디자이너와 개발자들이 포괄적인 온라인 경험을 만들 수 있는 능력을 얻는데 도움이 될 것입니다. 랜드마크의 목적 이해하기: 랜드마크를 효과적으로 사용하기 위해서는 그 목적을 먼저 이해하는 것이 중요합니다. 랜드마크는 웹 페이지의 구조를 안내하는 탐색 지점으로서 역할합니다. 랜드마크는 스크린 리더와 상호작용 하며, 랜드마크로 만들어진 웹 페이지의 구조적인 정보들이 스크린 리더를 통해 사용자에게.. 2023. 5. 25.
[HTML] 첫발 내딛기 <4. input 유형의 모든것> 1000의 얼굴을 가진 . 어디까지 사용해 봤니? 어느 정도 HTML에 익숙해져서 웹사이트를 만들어 보았다면 분명 을 사용해 봤을 것이다. 은 생각 외로 자주 사용되는 요소다. 우리가 흔하게 볼 수 있는 로그인 페이지에서, 날짜를 선택할 때, 여러 옵션을 선택할, 등등 사용되는 요소가 이다. 그럼 은 대체 어디까지 사용 가능할까? 지금부터 하나하나씩 의 다양한 유형들을 알아보자. 텍스트 유형 요소의 기본 유형은 텍스트이다. 하지만 텍스트도 다 같은 텍스트는 아니다. 일반 텍스트도 있고, 이메일도 있고, 비번도 있고. 텍스트 유형들은 다음과 같이 사용할 수 있다. 일반 텍스트 유형은 말 그대로 텍스트를 입력할 때 사용하는 유형이다. 이메일 유형은 이메일 주소를 입력할 때 사용하는 유형이다. 이 유형은 이메.. 2023. 2. 26.
[CSS] 이런것도 가능했냐? CSS로 Button 보통 Button 이렇게 display를 바꿔주면 페이지에 Button 이렇게 white-space를 바꿔주면 텍스트가 에디터처럼 바뀐다 이제 에디터처럼 페이지에서 CSS코드를 직접 작성할 수 있게 해줘야 한다. 이건 CSS가 아니라 HTML에서 contenteditable 속성으로 해결할 수 있다. 이 속성에 true 값만 주면 끝이다. Button 이렇게 에디터(?)가 만들어졌다. 2023. 2. 15.
반응형

티스토리툴바