잡다한 개발 블로그

이슈 발생 Safari에서 의 autoplay 속성을 사용하여 무음으로 자동 재생시에, 영상 종료 후 볼륨 버튼을 누르면 영상이 재생이 되는 이슈가 있었다. 테스트 재생 완료후에 video.muted값이 변경되면 재생 된다. 볼륨 버튼을 눌러 변경하는 경우와 video.muted 값을 변경하는 경우 둘 다 동일했다. 해결 autoplay 속성을 제거하고 JS로 강제 재생하는 것으로 해결하였다. 아래에 테스트한 코드와 재현 영상을 첨부한다. See the Pen Safari autoplay issue by arori (@arori) on CodePen.

문제 상황 Safari(Mac, iOS)에서 vertical-align: top이 적용된 block 엘리먼트 안에 엘리먼트와 다른 엘리먼트가 있으면 다른 엘리먼트가 하단으로 떨어져서 정렬이 깨지는 현상이 발생했다. See the Pen Safari(iOS, Mac) vertical-align broken by arori (@arori) on CodePen. 위 코드를 Safari에서 실행시키면 아래와 같이 노출된다. 실험 공식 문서에 따르면 vertical-align 은 inline 요소와 table-cell 요소에만 적용되며, 상속 되지 않는 속성이다. 그러면 위 코드를 기준으로보면 inline-block인 wrapper에 vertical-align을 줘도 내부 요소의(텍스트 노드와 엘리먼트) 정렬은 ..

문제 상황 overflow-x:scroll인 요소의 자식 요소의 오른쪽 마진이 적용되지 않아 스크롤이 안 생기거나, 더 짧게 생기는 현상이 발생한다. See the Pen Margin right not working inside Overflow-x:scroll Element by arori (@arori) on CodePen. 원인 공식 문서에 따르면 블록 레벨 요소에서 direction이 ltr이고, 자식이 margin, border, padding, width를 포함하여 부모를 넘는다면 margin-right가 무시된다. 문제 상황처럼 꼭 overflow-x: scroll이 아니더라도 발생할 수 있다. 10.3.3 normal flow에서 block-level, non-replaced 요소 다른 프로..

문제 상황 overflow-x, overflow-y를 이용하여 x 와 y에 각각 속성을 주었을 때, visible을 사용했음에도 x 혹은 y에 스크롤이 생기는 현상이 발생한다. 원인 visible과 visible이 아닌 다른 속성(hidden, auto, scroll)을 함께 사용할 경우에 visible인 쪽이 auto가 된다. 해당 내용은 W3C의 공식 스펙에도 기재되어있다. The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visib..

See the Pen getBoundingClientRect().width와 offsetWidth의 차이 by arori (@arori) on CodePen.

원문: All You Need To Know About CSS-in-JS All You Need To Know About CSS-in-JS - By Please checkout a related story below... hackernoon.com 요약: 컴포넌트로 생각하기— 더이상 스타일시트의 묶음을 유지보수 할 필요가 없습니다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화합니다(모듈성). 스타일을 적용한 리액트 컴포넌트 예제 CSS-in-JS, Styled Components, Radium, Aphrodite와 같은 용어를 들어본 적이 있을겁니다. 당신은 "이런 게 왜 있지? 나는 CSS-in-CSS(.css파일에 작성한 CSS)에 완벽하게 만족하는데!"라며 이러지도 ..

원문: Front-end Developer Handbook 2019 - 0.1. Recap of Front-end Development in 2018 Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice! A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering. frontendmasters.com React는 작년에 라이프 사이클 메소드(Lifecycle Method), 컨텍스트 API(Context API..

원문: Combining the Powers of SEM and BIO for Improving CSS Combining the Powers of SEM and BIO for Improving CSS | CSS-Tricks CSS is easy, some might argue, but that "easiness" can cause messy code. This is especially true through power of preprocessors like Sass or Less where, css-tricks.com CSS가 쉽다고 일부 사람들은 주장하겠지만, 오히려 그 “쉬움”이 코드를 지저분하게 할 수 있습니다. 특히 Sass나 Less와 같은 전처리기의 힘을 빌리면 지저분해지기 쉽습니다. 조심하지..

원문: Modern CSS Explained For Dinosaurs Modern CSS Explained For Dinosaurs CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer. It’s certainly easy… medium.com CSS는 이상하게도 웹 개발자가 배우기 가장 쉬우면서 가장 어려운 언어 중 하나로 여겨집니다. 확실히 시작은 쉽습니다. 특정한 엘리먼트에 적용할 스타일 프로퍼티와 값을 정의하면... 거의 끝입니다! 하지만, 더 큰 프로젝트의 경우에는 의미있는 CSS로 구성하는 것이 어렵고 복잡합니다. 한 페이지의 어떤 엘리먼트를 스타..

원문: Media Query & Asset Downloading Results 조금 전, 미디어 쿼리를 포함할 때 이미지가 다운로드 되는 방법에 대한 책에 대해 조사 중이라고 말했었습니다. 조사를 돕기 위해 JavaScript가 이미지 요청 여부를 결정할 수 있는 자동화된 테스트를 작성했고, 테스트 검토를 위해 Browserscope에서 결과를 수집할 수 있었습니다. 최초 발견한 내용을 포스팅했었지만, 이제는 더 자세히 말할 수 있을 만큼 충분한 데이터를 가지고 있다고 생각합니다. 먼저, 모든 공로는 Cloud Four에 있는 멋진 팀에게 돌아가야합니다. 대부분의 테스트는 그들이 자신의 업무를 테스트하기 위해 만들었습니다. 저는 단지 테스트를 자동화하기위해 자바스크립트를 추가했습니다. 결과를 봅시다! 테..