🔥 문제 상황스와이프 동작을 통해 snackbar를 없애는 Pointer 이벤트 로직을 구현했다. 데스크탑에서는 정상적으로 스와이프가 되었지만, 모바일에서는 snackbar가 화면 밖으로 이동하지 못하는 현상이 있었다.데스크탑모바일 ✅ 문제 해결모바일 브라우저는 터치 이벤트를 감지하면 스크롤 동작, 줌 등 기본 동작을 우선 처리하려고 해서 직접 구현한 스와이프 터치 반응이 제한될 수 있다고 한다. touch-action: none 속성을 추가하여 브라우저의 기본 터치 동작을 차단하고 직접 구현한 터치 동작을 우선적으로 처리하도록 변경했다. touch-action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action auto: 브라우저가 터치 ..
HTML & CSS
📌 transform-origin 속성은?transform의 기준점을 설정하는 속성이다. 기준점을 변경하면 회전, 확대/축소 등의 변환 효과가 어디를 기준으로 발생할지 결정할 수 있다.기본값은 요소의 중앙(50% 50%)이다. 이미지 출처https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin See the Pen Untitled by presentKey (@reduaaws-the-styleful) on CodePen.
📝 태그의 의미 브라우저는 서버가 응답한 HTML 파일을 바이트(2진수) 형태로 응답받는데, 브라우저에게 어떤 인코딩 방식을 사용할 지 알려주는 태그이다. html 문서를 지정된 인코딩 방식(UTF-8)을 기준으로 문자열 변환 UTF-8 인코딩 방식은 대부분의 문자를 표현하기에 적합하여 많이 사용되고, 다른 인코딩 방식(euc-kr 등)을 사용하면 일부 문자가 깨져보일 수 있다. 📝 인코딩 이란? 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것이다. ASCII 코드 예를 들면 문자 십진법 이진법 A 65 1000001 Z 92 1011010 a 97 1100001 z 122 1111010 문자열 세트(표)에 따라 'A' 문자를 컴퓨터가 이해할 수 있는 '1000001' 변환하고, 다시 사용자에..
🚩 object-position https://developer.mozilla.org/en-US/docs/Web/CSS/object-position 대체 요소(img, iframe, video, embed)의 content를 정렬합니다. 기본값은 50%, 50%으로 가운데 정렬입니다. HTML 삽입 미리보기할 수 없는 소스
🚩 기존 애니카드 디자인 기존 애니카드는 width: 100%, height: 152px 고정되어 있어서 부자연스러운 이미지를 가지고 있었습니다. 기존 애니카드 🚩 변경된 애니카드 디자인 위 문제를 해결하기 위해 element의 종횡비를 유지하는 방향으로 디자인이 변경되었습니다. 🚩 종횡비 유지 1: padding-bottom 활용 HTML 이미지 element 이미지를 감싸는 element ... // 생략 CSS .image-container padding-bottom: 70%는 부모 width의 70% 비율을 height로 가집니다. padding-bottom: 100%는 부모 width의 100% 비율을 height로 가지기 때문에 정사각형이 됩니다. .image padding에 밀려있는 이미지를..
