[css]웹 접근성을 고려한 hidden 처리

숑이·2022년 1월 25일
0

기존에 사용하던 hidden css

.hidden{
    overflow: hidden;
    position:absolute;
    left:-999px;
    right:-999px;
    width:0;
    height:0;
    font-size:0; 
    line-height:0;
}

웹 접근성을 고려한 hidden css

.hidden{
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

출처 : https://github.com/h5bp/main.css/issues/12

0개의 댓글