만들어 놓은 아이콘 클래스

 

 

화면이 커질수록 이미지가 깨져서 속성을 추가하려고 보니 일일이 추가 하기가 막막해서 찾아본 결과

[class^="i-"]{
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

 

속성참고

https://min-ji07.tistory.com/entry/CSS-image-rendering-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%84%A0%EB%AA%85%ED%95%98%EA%B2%8C

 

[CSS] image-rendering / 이미지를 선명하게

지원되는 브라우저 chrome, edge, Firefox, opera, safari, samsung internet, IE 이미지 크기를 조정하여 선명하게 보이도록 함 크기 조정되지 않는 이미지는 적용이 불가능 예시 class{ image-rendering: -moz-c..

min-ji07.tistory.com

이렇게 사용이 가능했다 굿,,!

 

 

개발자도구 확인

 

 

 

 

 

 

 

더 알아보고 싶어서 검색하는데 검색에 안걸림 ..

..검색하는 법 아시는 분 알려주시면 감사하겠습니다

참고

https://www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

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

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

[CSS / flex] order, align-self, flex-wrap, flex-flow, align-content  (0) 2022.05.06
[CSS] image-rendering / 이미지를 선명하게  (0) 2022.04.13
[CSS] input label 꾸미기 / 테두리 구멍내기  (0) 2022.02.25
[CSS] 가상요소 ::before, ::after (+가상요소 줄바꿈)알아보기!  (0) 2022.02.18

지원되는 브라우저

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

티스토리툴바