로고는 클릭을 통해 넘어가는 곳이니 a href="#"를 추가해줍니다. #은 제자리링크 즉 a href로 페이지 이동하지 않는 태그입니다.

span class에 blind를 넣는 이유

blind 태그는 시각장애인을 위한 태그입니다.
시각장애인은 screen reader라는 프로그램을 통해 접속하는데요.

보지 못하는 분들을 위해 청각으로 로고라는 글씨를 읽어줍니다.
이 로고는 이미지여서 읽을 수가 없기 때문에 img src태그를 안 쓰는 상황에서는
span 태그를 통해 .blind(blind class)를 안보이게 작업합니다.

.blind css에는 display:none 혹은 visibility:hidden을 쓰는데요.

각각 설명해드리겠습니다.

display:none

화면에 있는 공간에 있는 내용을 아예 없애는 것을 뜻합니다.
이걸 하면 screen reader 기기도 이 클래스를 무시해 버립니다. 그래서 읽지 않습니다.
사용을 권하지 않는 css입니다.

그래서 다른 꼼수를 씁니다.

position:abslute; clip:rect(0, 0, 0, 0); width:1px; height:1px; margin:-1px; overflow:hidden;

이 꼼수를 씁니다. 얘는 공간도 거의 차지하지 않기 때문에 이렇게 사용합니다.
여기서는 네이버가 위와 같은 코드를 사용하기 때문에 위와 같이 사용하도록 하겠습니다.

visibility:hidden

화면에 있는 내용에 공간은 남겨 놓고 투명하게 만들어주는 걸 뜻합니다.

클래스 (.)

아이디는 #을 쓰고 클래스는 .을 씁니다.
아이디는 #을 한번 쓸 수 밖에 없지만 class의 특징은 여러번 사용할 수 있습니다.