[TIL]부트캠프 11/12

👨‍💻TIL

w3c validator

https://validator.w3.org/
익숙해지기 전까지 마크업 & CSS를 작성하고 나면 항상 여기서 체크하는 습관을 들이자. 오류가 나오지 않는 순간 기본이 되었다는 뜻!!

Section header

반드시 제목(h1~h6 요소)을 포함시켜 요소를 식별해야 한다.
(웹 접근성 측면에서)

가상요소

별 의미가 없는 이미지를 넣을때는, 가상요소로 넣는게 좋다.

content 는 ' ' 설정
position 속성은 absolute 설정 //부모요소에 relative 설정
display 속성은 block 으로 설정
width와 height 지정!
background 이미지 url 설정

리팩토링

CSS작성 하다보면, 여러 클래스가 뒤섞여서 중복되는 코드가 많이 나올수 밖에 없다. 중복되는 코드를 계속 작성하지 말고 꼭 묶어서 정리하자.

웹 접근성을 고려한 숨김처리

display:none과, visibility:hidden, font-size:0, line-height:0, width:0; height:0과 같이 화면상 영역을 지니지 않게 하는 속성들은, 스크린 리딩 시 화면에 없는 영역으로 판단해 스킵한다. 따라서 blind 처리 시 위 요소 중 단 한 개라도 들어가서는 안된다.

💁‍♂️숨김 처리 코드

.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://fresh-mint.tistory.com

😅 2주차 막바지

벌써 2주차 막바지다.... 처음과 비교하면 알게된것도 정말 많고, 실제로도 얻어가는게 많은것 같다. 자바스크립트도 슬슬 열심히 준비 해야할 것 같다. 끝날때까지 열심히 하자 :)