전체 글

[이슈노트] 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..

[git hub] 브랜치 관리

git 브랜치 관리를 생각하면 머리가 지끈하다. 그래서 GPT에게 물어봤다.. Git에서는 여러 종류의 브랜치가 있을 수 있습니다. 이들은 주로 개발 및 협업 목적에 따라 구분됩니다. 가장 일반적인 종류는 다음과 같습니다 Main Branch (주 브랜치): master: 과거에는 Git의 기본 주 브랜치였지만, 현재는 대부분의 프로젝트에서 main으로 이름을 변경하여 사용합니다. main: 최근에는 main으로 브랜치 이름을 사용하는 추세가 높아지고 있습니다. 이는 다양한 이유로, 주로 인종적이거나 문화적인 이유로 인해 master 용어가 변경되었습니다. Feature Branches (기능 브랜치): 새로운 기능을 개발하는 데 사용되는 브랜치입니다. 각 기능은 개별적인 브랜치에서 작업되며, 완료 후에..