조각모음 조각모음

HTML input type number 우측 화살표 제거하기 input tag 를 type number를 사용했을 때 해당 태그에 포커스를 주면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성된다. 제거하고 싶다면 아래 코드를 작성하면 된다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type='number'] { -moz-appearance: textfield; }

class와 id 선택자를 중심으로 살펴보는 효율적인 렌더링을 위한 CSS 활용 참고: https://csswizardry.com/2011/09/writing-efficient-css-selectors/ 선택자에 따라 CSS 의 성능 차이가 궁금해서 찾아봤다. 정리 1. 되도록이면 class를 사용하자 선택자에 따른 reflow 속도가 가장 빠른 건 id이지만 class와 별반 차이가 없다. 심지어 윈도우 환경에서 파이어폭스 6 브라우져에서는 class가 더 빨랐다. 또 id는 class보다 우선순위 점수가 월등히 높아서 id와 class를 혼용해서 사용 시 사이드 이펙트가 발생할 여지가 있다. id는 js에서만 이용하고 스타일에서는 class만 사용하자. 2. 되도록 적은 수의 선택자를 사용하자 #te..

html button 요소에 type을 지정하는 이유 참고: https://nykim.work/96 내용 eslint를 세팅하다가 button 요소에 type을 넣으라는 경고문을 봤다. button은 type을 지정하지 않으면 기본적으로 submit 버튼이 되기 때문이다. 즉, form 태그 내에서 예상치 못한 submit 이벤트를 발생시킬 수 있고 시멘틱 마크업 측면에서도 button 에 type을 지정해주는 것이 바람직하다.

iOS에서 기본 적용된 input shadow 제거하기 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance 내용 작업 중 위와 같이 원인 모를 shadow가 생겨 골치 아팠는데 구글링을 해보니 iOS에 기본적으로 적용된 스타일이라고 한다. appearance 라는 값을 없애주면 된다. 구현 input { appearance: none; -webkit-appearance: none; -moz-appearance: none; }

HTML/CSS 네이밍 시 container와 wrapper의 차이 참고 : https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper 모달 컴포넌트를 만들다가 문득 container와 wrapper의 차이가 궁금해졌다. 퍼블리싱할 때 별 생각 없이 혼용해서 사용하던 단어였는데 규칙이나 관례가 있는지 찾아봤는데 stackoverflow의 한 답변이 가장 잘 정리되어 공유한다. 결론 둘다 레이아웃을 위한 div지만 container는 주로 여러 개의 요소를 감싸는 div이고, wrapper는 단일 요소의 레이아웃을 위한 div를 말한다. 예를 들면 아래와 같다. ... ... ... ... ...

애니메이션 최적화 (Reflow, Repainting) 참고 Jank(쟁크) 현상 일반적으로 모니터의 주사율은 1초당 60개(60FPS 60프레임) 화면을 보여준다. 이에 맞춰 브라우져도 1초에 60개를 보여주려 한다 이때 브라우져가 60개를 못보여주고 1초에 20개, 30개 정도만 보여준다면 애니메이션은 버벅거리게 되는데, 이 현상을 Jank(쟁크) 현상이라고 한다. 그럼 어떤 상황에서 브라우져는 1초에 60개를 못 그릴까? 브라우져 렌더링 과정 브라우저가 화면을 렌더링하는 과정은 아래와 같다. HTML + CSS + JS 다운로드 -> DOM + CSSOM 변환 -> Render Tree 생성 -> Layout -> Paint -> CompositeDOM은 HTML 요소를 tree 구조로 만든 것이..

HTML checkbox 디자인 커스텀하기 문제상황 디자인 시안을 받았는데 기본 체크박스가 아닌 다른 모양의 체크박스였다. 해결 기본 체크박스는 숨김 처리하고 label을 이용해 스타일을 만든다. 텍스트의 위치 조정을 위해 별도의 wrapper를 만들고 position relative를 설정해준다음, text 요소의 position 은 absolute로 잡아 조정한다. 예시 코드 텍스트 생각할 점 이거보다 좀더 좋은 방법이 있을까..? 체크박스나 라디오 박스는 실무에서 자주 사용할 테니 저장해놔야겠다. 사이트에서 자주 볼 수 있는 요소들은 미리 만들어 놓는 게 좋겠다.

calc() 안에서 scss 변수 사용하기 참고 문제 상황 SCSS 작업 중 공통된 수치들을 SCSS 변수로 처리하여 작업을 하고 있었는데 calc() 에서 작동하질 않았다. 해결 매우 간단하다. 변수에 #{}을 둘러준다. // bad .problem { width: calc(100% - $example); } // good .problem { width: calc(100% - #{$example}); }