1px 이미지는 무슨 용도 일까요

네이버 같은곳을 보면

로고를 배경으로 넣고 네이버 라고 텍스트를 적고 아래와 같이 숨김처리 했더라구요.

.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;

alt 값을 사용안하고 실제 텍스트를 넣어서 시각장애인들이 이용가능하게 설정해둔 것 같더라구요.


이미지가 blank.gif 인걸로봐서 투명이미지에 top:-1 에 테두리를 2준걸로 봐서 작은 도트가 투명하게 1픽셀 찍힐것 같은데 여백을 위하거나 링크의 텍스트를 숨기기 위함일 것 같네요. (개인적인 생각입니다) ㅎㅎ

뭔가 아무 역할도 하지 않는것 같은 이상한 CSS 규칙이 있다면 99% IE hack입니다.
테스트해보니 IE10 이하에서 해당 규칙이 없다면 원래 의도인 "글 부분 전체 클릭시 해당 글로 이동" 대신 닉네임 부분이나 날짜 부분은 클릭 가능 영역에서 제외되어 버립니다.

 

IE 자체가 지원 중단된 지금은 별 쓸모없는 규칙이지만, 아무래도 스케치북 스킨이 오래 전부터 개발되어오다보니 레거시 코드가 많이 남아있을겁니다.