input 요소의 focus 여부에 따른 스타일 속성을 정의하던 중 input 안의 placeholder가 미세하게 튀는 현상이 나타났다. input의 border 속성이 레이아웃에 영향을 주는 reflow를 유발하기 때문이었다.
- reflow가 일어나는 속성: border
- repaint만 일어나는 속성: border-radius, border-style, outline
📍 outline의 특징:
- 요소의 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다.
- border와 달리 상하좌우 모든 테두리에 적용된다. (border-top 등 한쪽 부분에만 적용할 수 있는 것과 대비됨)
- IE7 이하에서 지원되지 않는다.
📍 해결책:
outline으로 제어가 가능한 경우라면 reflow를 일으키는 border 대신 outline으로 css 속성을 제어하는 게 하나의 해결책이 될 수 있다.
그렇지 않은 상황이라면 기본 상태에 border를 미리 잡아두고 border의 색상을 transparent로 한 후, 필요한 상태가 되었을 때 border-color 속성을 재정의한다.
📚 참고자료
CSS, border와 outline의 차이
#CSS, border와 outline의 차이 스타일시트로 박스에 테두리를 만드는 방법은 여러 가지가 있습니다. 기...
blog.naver.com
Repaint만 일어나는 속성, 아예 Repaint도 일어나지 않는 속성
브라우저에서 웹 사이트를 꾸미는 것에 있어서 우리는 각자 다양한 방식으로 많은 스타일 속성들을 사용하여 꾸미게 됩니다. 그런 상황에서도 브라우저 렌더링을 최소화 할 수 있고 Reflow를 아
frontdev.tistory.com
'배워서 남 주자' 카테고리의 다른 글
| react-router-dom의 <Link>로 이미 가지고 있는 데이터 넘겨주기 (0) | 2023.08.22 |
|---|---|
| 서버에 보낼 request body에 내장자료구조 Map을 사용하면 어떻게 될까? (0) | 2023.08.15 |
| mdn 문서 번역에 기여하기 (0) | 2023.07.26 |
| 모노레포(Monorepo)란? (0) | 2023.07.22 |
| Ant Design DatePicker localization 한글화 이슈 (0) | 2023.07.21 |