position: absolute 속성과 값을 이용하여 요소를 정가운데 오도록 할때 반드시 같이 써야하는 속성으로
transform: translate(-50%, -50%)을 소개한 적이 있다.
위의 값을 적용하려는게 이미지,폰트일때 웹킷(크롬,웨일 등)계열 브라우저에서 이미지나 텍스트가 깨지거나 흐려지는 이슈사항이 있다는 것을 확인했다.
그럴때 아래와 같이 처리해준다.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px));
}
transform: translate(-50%, -50%) 이 아닌 calc() 함수를 쓰는 것이다.
transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px))
* 다만 깨지는 요소가 높이(height)값이 잡혀있을 경우 홀수로 지정을 해줘야한다.
추가로,
calc() 함수가 적용되지 않는 IE같은 브라우저까지 감안해야하는 경우 아래와 같이 처리해준다.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px));
}
기존 transform: translate(-50%, -50%)은 그대로 사용하되
벤더프리픽스 '-webkit-' 을 사용하여 웹킷 브라우저계열에만 해당 부분이 적용될 수 있도록 한다.
*근데 transform: translate(-50%,-50%)을 적용했을때 깨지는 요소에 width,height 값이 홀수로 들어가있으면 안깨진다.
정확한 것을 알 수 없는 이슈사항.
반응형
'퍼블리셔 Note > CSS' 카테고리의 다른 글
[SCSS] 변수(선언,유효범위,재할당) (0) | 2022.05.27 |
---|---|
[CSS(animation)] 애니메이션 버튼 퍼지는 효과 구현 (0) | 2022.03.31 |
[CSS] position으로 가운데 정렬하기 (0) | 2022.03.28 |
[CSS] 가로,세로 말 줄임표(...) 처리 (0) | 2022.01.14 |
[SASS(SCSS)]VS CODE에서 Sass(Scss)환경 세팅하기. (0) | 2021.10.05 |