Opacity
이 속성은 요소의 투명성을 설정하기 위한 것이다. 불투명도를 0으로 설정하면 요소가 시각적으로 숨겨진다. 요소는 여전히 해당 위치를 차지하며 웹 페이지의 레이아웃에 영향을 준다. 사용자 상호 작용에도 응답한다.
불투명 할 때와 투명할 때 똑같이 동작한다.
이 속성에 애니메이션을 적용하여 멋진 효과를 내는 데 사용할 수 있다.
(opacity 예시)
.hide{
opacity:0;
}
이렇게 빈 공간에 안보이다가 나타난다.
Visibility
이것을 hidden으로 설정하면 요소가 숨겨진다. opacity와 마찬가지로 숨겨진 요소는 여전히 웹 페이지의 레이아웃에 영향을 준다.
유일한 차이점은 이번엔, 사용자에게 숨겨져 있을 때 사용자 상호 작용을 캡처하지 않는다(?)
또한, 요소가 화면 판독기에도 숨겨진다.
이 속성은 초기상태와 최종상태가 다르면 애니메이션을 적용할 수도 있다. 이를 통해 visibility 상태 간 전환이 갑작스럽지 않고 매끄럽게 이루어질 수 있다.
(visibility 예제)
.hide {
visibility: hidden;
}
mouseover이벤트 했을 때,
클릭 했을 때,
이 속성이 visible로 설정된 경우, hidden설정을 한 요소의 하위 항목을 계속 볼 수 있다. 숨겨진 요소 위로 마우스를 가져 가면 커서가 포인터로 바뀌지 않는다. 또한, 요소를 클릭하면 클릭이 등록되지 않는다.
Display
display none 으로 설정하면 박스 모델이 전혀 생성되지 않는다. 이 속성을 사용하면 요소를 숨길 때 남은 빈 공간이 없고 직접적인 사용자 상호 작용이 불가능하다. 또한, 화면 판독기는 요소의 내용도 읽지 않는다. 마치 요소가 존재하지 않는 것과 같다.
요소의 모든 자식들도 숨겨진다. 이 속성은 애니메이션으로 표시할 수 없으므로 다양한 상태 간의 전환이 항상 갑작스럽게 진행된다.
.hide {
display: none;
}
hover!상자를 클릭하면
이 이후 hover에 마우스 댈 때마다 mouseover이벤트가 발생해 중간8에서 1씩 올라간다.
Position
상호작용하려는 요소가 있지만 웹 페이지의 레이아웃에 영향을 미치지 않기를 원한다고 가정하자. 현재까지는 이 상황을 제대로 처리할 수 있는 속성이 없다.
유일한 방법은 요소를 뷰포트 밖으로 옮기는 것이다. 이런 식으로 레이아웃에 영향을 미치지 않으며 여전히 실행 가능하다.
click하면 position이 absolute였다가 static으로 변하고 (class.style.position="static")
mouseover하면 count++, class.innerHTML = count 하는 함수를 만들도록 한다.
결과는 display과 같다.
여기서 주요 아이디어는 요소가 더 이상 화면에 표시되지 않을 정도로 음의 상단 및 왼쪽 값을 높게 설정하는 것이다.
이 기술의 한 가지 장점이자 잠재적인 단점은 화면 판독기로 절대 위치 요소의 내용을 읽을 수 있다는 것이다. 사용자가 요소를 볼 수 없도록 뷰포트 밖으로 요소만 이동했기 때문이다.
사용자가 이 요소에 초점을 맞출 때, 예기치 않은 점프가 발생하므로 초점을 받을 수 있는 요소를 숨기려면 이 방법을 사용하지 않아야 한다. 이 방법은 사용자 지정 확인란이나 라디오 버튼을 만드는 데 자주 사용된다.
Clip-path
내가 모르던 방식인데,
요소를 잘라내는 방법이다.
clip 속성도 있었지만 clip-path을 더 잘 사용하는 추세이다.
이 속성은 아직 IE 또는 Edge에서 완전히 지원되지 않는다. 외부 svg파일을 사용하는 경우 지원이 훨씬 제한된다.
.hide{
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)
}
}결과는 display와 같다.
첫 번째 요소위로 마우스를 가져가면 두 번째 요소가 클립 경로를 통해 숨겨져 있어도 두 번째 요소에 영향을 줄 수 있다. 요소를 클릭하면 숨겨진 클래스가 제거되어 모든 요소가 표시된다. 이 텍스트는 스크린 리더에서 읽을 수 있으며 많은 워드 프레스 사이트에서 스크린 리더 텍스트로 사용되는 솔루션이다.
요소가 더 이상 보이지 않더라도 주위의 요소는 마치 원래 직사각형 크기 인 것처럼 동작한다. 호버 또는 클릭과 같은 상호 작용은 잘린 영역 외부에서도 가능하지 않다. 이는 사용자가 숨겨진 요소와 직접 상호작용할 수 없음을 의미한다. 또한 이 속성은 다양한 방법으로 애니메이션을 적용하여 새로운 효과를 만들 수 있다.
