크롬 브라우저의 한글 폰트 문제로 크롬에서만 특정 영역의 높이가 다르게 나오는 문제가 있었습니다.
크롬에서만 특정 css 스타일을 적용하는 방법을 찾아보니
css hack 으로 다음과 같은 방법이 있네요.
<html>
<head>
<title></title>
<style>
.test {
background-color: red;
height: 100px;
color: white;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.test {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="test">test</div>
</body>
</html>
test라는 클래스에 기본으로 높이 100px에 배경을 빨간색으로 적용했습니다.
여기에 아래와 같은 스타일을 적용하면
@media screen and (-webkit-min-device-pixel-ratio:0){
.test {
background-color: blue;
}
}
크롬 브라우저에서만 배경색이 파란색으로 표시됩니다.
-webkit-이라는 prefix가 webkit 베이스 브라우저를 구별하는 prefix입니다.
vendor prefix라고 불리우는 이 기능은 브라우저 벤더의 특정 기능을 구분하기 위한 것으로 보면 됩니다.
종류는 아래와 같습니다.
- -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
- -moz- (Firefox)
- -o- (Old, pre-WebKit, versions of Opera)
- -ms- (Internet Explorer and Microsoft Edge)
@media
screen : 미디어 타입이 화면(screen)이라는 의미
-webkit-min-device-pixel-ratio:0 : 단말기의 화소와 실제 화면의 pixel간의 비율이 0 이상이면, -webkit- prefix 로 크롬이나 모바일 브라우저에 적용
'프론트 프로그램 > css - style' 카테고리의 다른 글
| visibility 로 display 처럼 영역을 차지하지 않는 것 처럼 효과 주기 (0) | 2023.07.13 |
|---|---|
| ie11에서 fieldset width 문제 - angular primeng p-filedset (0) | 2021.09.03 |