R 스토리
[이슈노트] iOS 이슈 모음 #10 (video 자동 재생, line 이슈)
ios에서 비디오 자동재생이 화면에서 그려지는게 아니라 새창(?)에서 돌아간다.확인해보니 iOS의 Safari에서 요소가 자동재생될 때 전체화면으로 전환되는 문제는 Apple의 정책 때문이라고 한다.기본적으로 iOS Safari에서는 사용자가 직접 재생하지 않는 한, 비디오가 자동으로 전체 화면이 되는 경우가 있다. 해결 방법 👉 1. playsinline 속성 추가 iOS Safari에서 가 자동 전체화면이 되는 것을 방지하려면 playsinline 속성을 추가해야 한다. 2. muted 속성 확인 iOS에서는 자동 재생하려면 muted 속성이 반드시 필요하다. 이미 설정되어 있으므로 이 부분은 유지해야 한다다. 3. preload 속성 설정 비디오가 미리 로드되도록 preload="a..
[이슈노트] iOS 이슈 모음 #9 (15 이하에서 mask 이슈)
iPhone X (iOS 15)에서 발생한 X 버튼 표시 이슈 해결 빌드: iOS 3.2.6(764)디바이스: iPhone X (iOS 15) 최근 iPhone X(15)에서 X 버튼이 검은 사각형으로 표시되는 문제가 발생했다. 원래는 버튼 영역에 X 모양의 아이콘이 나와야 하지만, 해당 영역이 까맣게 변해 있었다. 이 X 버튼은 button 태그에 svg를 마스크로 활용하여 구현한 것이었는데, iOS 15에서는 -webkit-mask 속성을 추가로 사용해야 한다는 것을 확인했다. (아래 이미지 참고) 해결 방법문제를 해결하기 위해 기존에 사용하던 SCSS mixin에 -webkit-mask 속성을 추가했다. @mixin svgfill($c:nu..
[CSS] :is(), :where() 알아보기
CSS의 ':is()' 와 ':where()' 의사 클래스는 CSS Selectors Level 4의 새로운 함수로,복잡한 선택자를 간단하게 하고 코드의 가독성을 높이는 데 유용하다.이 두 의사 클래스는 유사하지만, 선택자 특이성 처리 방식에서 중요한 차이가 있다. 1. :is()목적: :is() 의사 클래스는 괄호 안의 선택자 중 하나라도 일치하는 요소를 선택한다.특이성: 괄호 안에서 가장 높은 특이성을 가진 선택자의 특이성을 상속받는다. 즉, 선택자 중 하나라도 높은 특이성을 가지면, 전체 :is()의 특이성도 높아진다. /* 여러 선택자를 하나오 그룹화 */:is(h1, h2, h3) { color: red; font-weight: bold;} 위 예제에서는 h1, h2, h3 요소에 동..
[자바스크립트] scrollIntoView()
'scrollIntoview()' 메서드는 웹페이지에서 특정 요소가 화면에 보이도록 자동으로 스크롤하는 메서드이다.예를 들어, 버튼을 클릭했을 때 페이지의 특정 부분으로 스크롤하고 싶을 때 사용한다. 예제) Scroll to Element Hello, I'm the target element! #코드 설명HTML'button' : 클릭하면 스크롤을 실행하는 버튼'div#targetElement' : 스크롤해서 화면에 보이게 하고 싶은 요소CSS'body'의 'height'를 2000px로 설정하여 페이지를 길게 만든다.'#targetElement'의 'margin-top'을 1500px로 설정하여 페이지 아래쪽에 위치시킨다JavaScript'scrollToElement' 함수는 '..
[이슈노트] iOS 이슈 모음 #8 (14 이하에서 gap 이슈)
최근 iOS 14 이하 버전에서 Gap이 적용되지 않는 문제가 발생했다. 😥 이미 모든 작업은 완료된 상태였고, iOS 14.6에서는 문제가 없다고 판단하여 이슈를 놓쳤다. 다행히, 다른 환경에서는 문제가 없었기 때문에 대규모 수정보다는 부분적인 수정을 선택했다. 이를 위해 @supports를 활용하여 iOS에만 해당되는 CSS를 작성하기로 결정했다. 예를 들어, -webkit-touch-callout은 iOS에서만 적용되며, translate: none은 macOS와 iOS의 Safari 14.1 이후부터 적용된다. 따라서 이 두 가지를 결합하여 다음과 같은 @supports 규칙을 만들 수 있다. @supports (-webkit-touch-callout: none) and (not (translat..