R 스토리

[Storybook] Storybook for HTML: 순수 HTML 환경 지원

스토리북의 존재를 안건 꽤 됐는데, 회사 업무 환경이 리액트가 아니어서 생각 못하고 있다가, 미래(?)를 위해 강의를 보게 됐다.그러다가 리액트 뿐만 아니라 순수 html 환경에서도 쓸 수 있는걸 알게됐다.회사 프로젝트가 커져서 기능있는 스타일 가이드가 너무 필요했는데 잘됐다 🤩이번에 깊게 공부해서 바로 실무에 적용해 보려고 한다.작업환경: Windows Node.js 20 이상 필수 Storybook 지원 환경ReactVue / Vue 3AngularSvelteHTML (프레임워크 없는 환경) ← 내가 원하는 것!Web Components기타 커스텀 환경 순수 HTML 프로젝트에 스토리북 설정 방법 1. 새 폴더 만들기 및 이동mkdir my-html-storybookcd my-h..

[이슈노트] 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' 함수는 '..