지원되는 브라우저

chrome1.0+, edge, opera7.0+, safari1.0+, samsung internet

 

모바일에서 a태그 클릭시 하이라이트 효과

꾹 눌렀을 때 또는 터치했을 때 영역 색상을 변경할 수 있다

 

-webkit-tap-highlight-color 문법

 

-webkit-tap-highlight-color : unset; 

-webkit-tap-highlight-color : 색상; 

 

 

예시

-webkit-tap-highlight-color : unset; (기본)

 

 

터치 및 꾹 눌렀을 때

 

 

색상변경 후 터치 및 꾹 눌렀을 때

-webkit-tap-highlight-color : rgba(252, 213, 216. .8); 

 

 

css 제거

-webkit-tap-highlight-color : transparent;

 

안드로이드 일 경우

outline: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

속성을 추가해줘야 함

 

a 태그 외 div에서는 css 적용안됨

저작자표시 비영리 변경금지

'개발 > html & CSS' 카테고리의 다른 글

meta tag  (0) 2022.01.26
코드펜(Codepen) 소스코드 티스토리 올리기  (0) 2022.01.14
html 기본속성 draggable 사용 & 드래그 앤 드롭  (0) 2022.01.07
[CSS] clip 알아보기!  (0) 2021.12.10

지원되는 브라우저

chrome1.0+, firefox1.0+, internet explorer8.0+, opera7.0+, safari1.0+

 

어디서부터 특정해서 보여줄 지 나타냄

 

clip 문법

 

clip: auto;

 

auto - 요소의 모든 부분

shape - 특정부분

initial - 기본 값

inherit - 부모 요소의 값 상속

unset - 초기화

 

position 속성 값이 absolute, fixed 일 때 적용 가능

rect(top, right, bottom, left)

 

top이 0일 때 맨 위에서부터 보여줌

bottom이 0일 때 맨 아래에서부터 보여줌

left이 0일 때 왼쪽부터 보여줌

right가 0일 때 안보이지만 이미지 크기만큼 줄 경우 다 보여줌

 

예시 

이미지 크기 320*240 라고 할 때

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>clip 알아보기</title>
</head>
<style>
    .test{
        position: absolute;
        width: 320px; height: 240px;
        border: 1px solid black;
        
        clip: rect(0px, 320px, 240px, 0px);
    }
    .test img{
        width: 100%; height: 100%;
    }
</style>
<body>
    <div class="test">
        <img src="대충이미지.jpg" />
    </div>
</body>
</html>

요렇게 왼쪽에서 오른쪽으로 340, 밑에서 위로 240을 줌

위와 왼쪽은 0부터 시작

 

 

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 100px, 240px, 0px);
}

rect right 를 100px 만큼 주게되면

요렇게 100만큼 보인다

 

 

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 100px, 240px, 50px);
}

오른쪽에서 100px 만큼 보이게

왼쪽에서 50px 부터 시작

 

 

.test {
    position: absolute;
    width: 320px;
    height: 240px;
    border: 1px solid black;
    
    clip: rect(0px, 320px, 200px, 0px);
}

위에서 아래로 200px 만큼 보여주기

 

참고로

요즘은 잘 사용되지 않고 clip-path 로 대체

 

이유는

overflow: visible 작동x, 

직사각형 형태로만 적용가능,

position: absolute, fixed 적용되어야 사용가능

때문~

 

 

저작자표시 비영리 변경금지

'개발 > html & CSS' 카테고리의 다른 글

meta tag  (0) 2022.01.26
코드펜(Codepen) 소스코드 티스토리 올리기  (0) 2022.01.14
html 기본속성 draggable 사용 & 드래그 앤 드롭  (0) 2022.01.07
[CSS] -webkit-tap-highlight-color 알아보기!  (0) 2021.12.22

+ Recent posts

티스토리툴바