[TIL] CSS 기능 정리 1탄

지난 일주일간 배운 CSS와 HTML을 한 번 공유해볼까 합니다. 혹시 수정이 필요한 것이 있다면 알려주시기바랍니다!

1. 화면에서 사라지게 만들기

• aria-hidden="true"를 사용하면 시각적으로는 보이지만 스크린 리더기는 이를 인식하지 못합니다.

• 반대로 스크린 리더기는 읽을 수 있지만 시각적으로 보이지 않게 하려면 밑의 코드처럼 구현해야합니다.

• 작은 점으로 만들되 스크린 리더기는 읽을수있도록 1px을 줍니다. overflow:hidden을 통해 이 작은점도 시각적으로 보이지않게 하면 스크린 리더기에도 읽히고 시각적으로도 보이지 않게 됩니다.

• clip-path에 모두 0을 주며 정중앙을 가리켜 보이지 않게 됩니다. 하지만 구형 브라우저에서는 사용이 안 될수도 있으니 clip도 함께 사용해줍니다 (브라우저 호환성 이슈)

• a11y는 accessibility라는 뜻입니다.

.a11y-hidden {
    width: 1px;
    height: 1px;
    margin: -1px; 
    clip-path: polygon(0 0, 0 0, 0 0);
    clip-path: inset(50%); 
    clip: rect(0, 0, 0, 0); 
    clip: rect(0 0 0 0);
    overflow: hidden;
}

2. skip-navigation
   스크린 리더기 사용자/ 키보드만 사용하는 사람들을 위해 만든 기능입니다. 키보드로만 접근이 가능하며 엔터를 누르는 것만으로도 로그인 또는 메인 화면으로 바로 이동이 가능합니다.

• header에 키보드로 접근했을때만 나타나고 그 이외에는 화면상에 보이지않도록 구현해야합니다.

• 위와 유사하게 clip-path와 overflow를 사용해 평소에는 가려주다가 focus를 받으면 position을 fixed에서 static으로 바꾸어주며 해당 기능을 보여줍니다.

• z-index는 밑에 깔린 요소를 위로 끌어올릴때 사용할 수 있습니다.

• left와 right 모두 0을 주거나 width:100%;를 주게 되면 양쪽으로 늘려 화면 전체 너비를 가지게 됩니다.

• outline offset 은 마이너스값을 주며 보기 편한 상태로 만들어줬습니다.

.skip-navigation{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    background-color: black;
    text-align: center;
    z-index: 10;
}
.skip-navigation a{
    width: 1px;
    height: 1px;
    margin: -1px; 
    clip-path: polygon(0 0, 0 0, 0 0); 
    clip-path: inset(50%); 
    clip: rect(0, 0, 0, 0); 
    clip: rect(0 0 0 0); 
    overflow: hidden;
    padding: 15px;
    color: #fff;
    font-size: 0.875rem;
}
.skip-navigation a:focus{
    position: static;
    width: auto;
    height: auto;
    clip: initial;
    clip-path: initial;
    margin: initial;
    display: inline-block;
    outline-offset: -10px;
}

3. 초기화시켜주기

• 종종 원하는대로 스타일링되지 않는 경우가 있습니다. 아마 초기화의 문제일수도 있으니 초기화를 해주는 것이 좋습니다.

.member-service {
    list-style: none;
    margin:0;
    padding-left: 0;
 }

4. 각 요소 뒤에 ':' 넣기

.member-service li:nth-child(n+2)::before {
    content: ":";
}

5. 줄바꿈하기

.sub-menu {
    position: absolute;
    list-style: none;
    white-space: nowrap; 
}

6. 지원하지 않는 색상/이미지/글씨체 등이 존재할때는 callback 요소 같이주기

• #ccc가 callback 색상입니다.

.term{
    background: #ccc linear-gradient(#ccc, #eee);
}

• DOM트리에 들어가는 시간이 선택자가 높을수록 느려지기때문에 선택자 요소선택점수를 너무 높이지 않는것이 좋습니다.

7. 마크업 순서가 늦은 애들을 위로 올리기

• 부모 요소에 position:relative를 주고 자식 요소에 absolute를 주면서 마크업 순서가 뒤에 배치되었더라도 위로 올릴 수 있습니다.

.board .more{
    position: absolute;
    top: -8px;
    right: -9px;
    padding: 8px;
}

8. 글자 범위가 넘어가면 보이지않게 해주기

• 버튼 내부에 접근성을 위하여 text를 넣어줘도 시각적으로 보이지않게 하고 싶다면(또는 이미지를 text대신 넣어주고 싶다면) 해당 코드처럼 구현하면 됩니다.

.event-button-group{
    height: 18px;
    position: absolute;
    top:0;
    right:0;
    overflow: hidden;
}

9. 이미지 스프라이트

• 이미지 스프라이트란 여러 이미지를 한 파일에 넣고 background-position을 이용해 사용하는 것 입니다. 이를 통해 계속 이미지를 다운받지않아 성능이 향상될 수 있습니다.

.event-button-group button{
    width: 19px;
    height: 0;
    padding: 18px 0 0 0;
    border:0;
    background-image: url(./images/back_forward.png);
    background-repeat: no-repeat;
}
.event-button-next{
    background-position: -35px 0;
}