본문 바로가기
반응형

분류 전체보기132

이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리 웹페이지를 해석해서 보여주는 브라우저(Browser)의 동작방식 중에는 '이벤트 버블링(Event Bubbling)'이라는 현상이 존재합니다. 왠지 용어가 일반적이지 않고 뭔가 전문가 포스 같은 느낌이 나서 괜히 어렵게 느껴지는 것도 같습니다. 일반적인 사용 케이스에서 살펴보자면, 버튼을 누른 것도 아니고 배경화면을 클릭한 것 뿐인데도 모달창이 닫히게 되는, 뭐 그런 현상들이 바로 이벤트 버블링 현상이 만들어내는 경우입니다. 이번 포스팅에서는 이러한 '이벤트 버블링'과 관련하여 "전문적"이 아닌 "현상적"인 이해를 경험 해보기로 합니다. 이벤트 버블링(Event Bubbling) 일단 테스트를 위한 코드를 간단하게 작성해보도록 합니다. div 태그로 박스를 세 개 만들었습니다. 이벤트 버블링 아래 이미지.. 2023. 1. 3.
반응형 이미지 교체 기능, <img>를 <picture>로 감싸보자 얼마 전 포스팅에서, HTML 문서에 삽입한 이미지를 반응형으로 만드는 아주 간단한 팁을 살펴보았습니다. [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 [실무꿀팁] 이미지를 HTML 문서에 반응형으로 넣기 1초컷 아주 간단하게 이미지 반응형으로 넣기 매년 연말 연시가 되면, 고객분들로부터 신년인사 팝업 게재 요청이 들어옵니다. 매년 반복되는 시즈널한 루틴업무죠. 인사말씀 분량이 많은 경우 팝업 kincoding.com 그런데 이처럼 1개의 이미지를 반응형으로 동작하게 하는 것이 아니라, 가로세로 비율이 다른 여러 개의 이미지를 그때 그때 반응형으로 맞처서 아예 교체를 해주려면 어떻게 해야 할까요? 이번 포스팅에서는 바로 이 점을 살펴보도록 해보겠습니다. 반응형 이미지를 교체하려면 태그를 사.. 2023. 1. 2.
[폰트] TTF vs. OTF 차이가 뭘까? 어떤 걸 사용하지? TTF 폰트 OTF 폰트 차이가 뭘까? 어떤 걸 사용하지? 얼마 전, 신년 인사 팝업을 디자인 하기 위해, 신년인사 분위기에 어울리는 폰트(Font)가 필요해졌습니다. 폰트는 유상으로 판매하는 유료폰트가 있고, 무상으로 배포하는 무료폰트가 존재합니다. 디자인으로 첨예한 이슈가 아니라면 대부분의 사용자라면 저작권 이슈로부터 자유로운 무료 폰트를 많이 사용하고자 할 것입니다. 그런 의미에서 은 기본적으로 많은 사람들이 사용하는 무료폰트를 배포하고 있습니다. 저도 이미 네이버 글꼴을 사용하고 있으나, 추가로 사용할만한 글꼴을 찾기 위해 네이버 폰트에 접속을 한 후, '마루 부리'라는 이름의 폰트를 사용하기로 했습니다. 글꼴을 내려 받기 위해 [마루 부리 글꼴 전체 내려받기] 버튼을 클릭하면, maruburi... 2023. 1. 1.
Alert창 버튼 클릭으로 띄우기(ft. modal, 모달, 팝업) 웹 사이트를 운영하다보면, 방문객들에게 이런 저런 안내가 필요해집니다. 아주 아주 예전에는 '팝업창'이라는 형식으로 사실상 브라우저 창을 작은 크기로 새로 띄우는 방식을 이용하곤 했었지만(← 요즘 시대에서는 공부할 필요 없는 내용) 최근 웹환경에서는 브라우저 창을 새로 띄우는 팝업은 보안취약 등의 이유로 거의 사용하지 않습니다. 요즘은 보통 Modal 이라고 부릅니다. Javascript로 Alert 띄우기 자바스크립트로 띄우는 브라우저에 기본 내장되어 있는 Alert은 모양이 별로 예쁘지 않습니다. 그래서 주로 개발자들이 테스트를 위해서 주로 사용하고, 웹사이트 방문객들에게 보여질 내용은 보통 그렇게 띄우지 않습니다. 크롬 개발자모드(F12) → Console 창에 다음과 같이 타이핑하고 Enter를 .. 2022. 12. 31.
반응형

티스토리툴바