전체 글

[Figma] 이미지 Export 설정 항목 설명

🔧 왼쪽 설정창 (세부 Export 옵션) Ignore overlapping layers겹치는 레이어 무시체크 시: 겹쳐진 레이어 중 가려진 부분은 렌더링에서 제외됨용도: 불필요한 픽셀 연산을 줄이고 최적화된 출력 이미지 생성 Include bounding box바운딩 박스 포함체크 시: 레이어의 바운딩 박스를 기준으로 Export예: 실제 요소보다 드롭 섀도우 등으로 영역이 넓어진 경우, 그 영역까지 포함 Color profile: sRGB (standard)이미지에 색상 프로파일 포함 여부sRGB는 웹표준 색상 공간으로, 일반적인 PNG나 JPG에 적합인쇄용은 CMYK, 웹/모바일은 sRGB 권장 Image resampling: Detailed이미지 크기 변경 시 품질 보정 방식Detailed: 고..

[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 요소에 동..