html & css3 Anti-aliasing 맥 os 를 사용하면 적용된 폰트가 무엇이든 이쁘게 보인다. 심지어 굴림, 돋움 같은 기본 폰트도 자동으로 안티 앨리어싱이 되어서 부드럽게 표현된다. 안티 앨리어싱이란 계단 현상 방지 기술 인데, 쉽게 말해 픽셀의 각진 부분을 스무스하게 바꾸어 주는 기술이다. 위 이미지의 오른쪽이 안티앨리어싱을 적용한 모습이다. 맥 os 를 사용하면 자동으로 안티앨리어싱을 적용해서 표현해주지만 windows 는 그렇지가 않다. 윈도우에서 돋움, 굴림 폰트를 사용해보면 매우 작게 혹은 매우 크게 확대하면 각져보인다. 돋움, 굴림 폰트 뿐만 아니라 대부분의 폰트가 저런 현상을 보인다. 이 현상을 해결하려면 글자를 살짝만 돌려주면 된다. transform: rotate(0.04deg); 2023. 10. 23. 화면 reflow 가 일어나는 경우 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을 Reflow라고 한다. Reflow가 일어나는 대표적인 경우는 다음과 같다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지션 폰트 변경, 텍스트 내용 변경 이미지 크기 변경 offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청 페이지 초기 렌더링 윈도우 리사이징 이외에도 화면의 구조가 변경되었다면 Reflow가 발생한다고 이해하면 된다. 2022. 11. 22. @keyframes 를 써서 고양이 시선을 빼앗아 보자 처음과 끝 상태만 있는 transition 말고 복잡한 애니메이션을 구현해야 한다면 @keyframes 를 써보자. //index.html 고양이 조심 //index.scss .btn-wrap { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; .btn { background-color: yellowgreen; width: 200px; height: 100px; border: 1px solid yellowgreen; border-radius: 5px; color: white; font-size: 30px; &:hover { animation-name: shake; animation-durati.. 2022. 3. 3. 이전 1 다음
