Text 숨기기

저희 FE 분들과(지금 멘토로 접속해 있으신 분들이 저희 FE 분들입니다.) 토론하던 중 반론과 사례가 나와 글을 수정했습니다.ㅎㅎ

일단 transform이 빠른 것은 맞지만 실무에서는 text-indent와 left를 사용하는 곳도 많습니다. 여러분이 들어갈 회사에서 사용하고 있는 코드이니 알아두시는 것이 좋을 것 같아요.

일례로 다음 모바일에서는 text-indent를 사용하고 있고요.

그리고 다른 방법도 있어서 이 방법도 함께 언급을 해드립니다.

추가로 요거 정리가 되었는데, 양이 많아서 나중에 재현님이 강의에서 정리해주실겁니다. 일반 텍스트를 날리는 것과 접근성을 고려한 것들을 구분해서 설명해주실거에요!

네이버의경우


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

다음의 경우


.screen_out {
	overflow: hidden;
	position: absolute;
	width: 0;
	height: 0;
	line-heigth: 0;
	text-indent: -9999px;
}


.ir_wa {
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: -1;
}