반응형

    css hidden 썸네일

    투명하게 만들기

     

    CSS의 기능만으로 요소를 화면에서 보이지 않게 할 수 있다. 

    아래의 방법들을 통하여 요소를 투명하게 설정 할 수 있다.

     

    방법1.  opacity 0 설정

    div{opacity : 0;}

    opacity는 불투명도라고 한다. 불투명도 값이 0 이면 요소는 화면에서 보이지 않게 된다. 

    opacity의 단점으로는 요소와 자식요소도 함께 투명해지기 때문에

    요소에만 투명도를 유지하고 싶다면 다른 방법을 사용해야 된다.

    공간을 차지한다.

     

    opacity 캡쳐 / 자식도 투명해진다

     

    방법2. rgba에서 a를 0값으로 설정하기 

    div{color : rgba(0,0,0,0); background: rgba(0,0,0,0);}

    배경색과 글자색에 a에 투명을 주면 해당요소가 보이지 않게 된다

    자식요소에 설정을 따로 하지 않으면 요소의 속성을 상속받기에 설정하면 자식요소는 보이게 된다. 

    opactiy와 다르게 자식은 영향을 받지 않게 설정이 가능하다

     

     

    요소에 RGBA값 설정 자식은 보인다.

     

     

    방법3. display none 설정

    div{display : none;}

    요소의 display 속성을 none 바꾸게 되면 화면에서 보이지 않게 된다. 

    display none의 경우 공간에서 사라지기 때문에 자리를 차지 하지 않는다

    위의 opacity와 마찬가지로 자식요소도 함께 보이지 않게 된다. 

     

    display none 설정 요소가 아예 화면에서는 사라져 있다 관리자 모드에서는 요소가 있는걸 확인

     

    방법4. visibility hidden 설정

    div{visibility : hidden;}

    visibility의 속성을 hidden으로 바꾸게 되면 요소가 화면에서 보이지 않게 된다.

    공간을 차지한다. 자식도 투명해진다.

    자식도 투명해진다. 하지만 영역은 차지 한다.

     

    코드 팬

    css에서 작업한 내용은 코드 팬에서 확인가능하다

    See the Pen 투명 CSS by 윤재현 (@jh91) on CodePen.

    반응형

    '웹언어 > CSS' 카테고리의 다른 글

    [CSS] 그라데이션 설정하기  (7) 2021.06.28
    [CSS] #, . / id와 class  (0) 2021.05.31
    [CSS] @media 쿼리 / 반응형 만들기  (0) 2021.04.01
    [CSS] 선택자 :Hover  (0) 2021.03.25
    [CSS] Parallax Scroll / 패럴렉스 적용방법  (2) 2021.03.24
    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기