📖 오늘의 수업

• ir 테크닉에 대해서 학습함.
• css sprite를 사용해 봄
• select 박스를 커스텀하는 과제.
• bootstrap과 tailwind를 사용해 봄.

💭 오늘의 생각

1. ir 테크닉, 그러니까 스크린 리더나 브라우저를 위해 제공하는 텍스트를 숨김 처리하는 방법을 배웠다. background 속성으로 img를 첨부했을 때 alt를 사용할 수 없으니까 대체 텍스트를 입력하고 text-indent로 숨김처리 하는 방법, 중요한 img일때는 해당 이미지가 off되어도 대체 텍스트를 보여주기 위해 width와 height 모두 100%지만 z-index를 -1로 해서 이미지 뒤에 존재하게끔 만드는 방법등이 있다.
   clip을 사용하는 방법도 있었는데, 직접 실습해보면서 clip을 사용하려면 무조건 position이 지정되야 함을 새롭게 알게됐다. 해당 방법으로 텍스트를 숨김 처리하는 사이트에서 클래스 이름을 blind로 사용하는데, 나 또한 숨김의 의미로서 직관적이라는 생각에 해당 클래스 이름을 사용했다. 그런데 해외 디벨롭 아티클에서 이 클래스명이 시각장애인에게 굉장히 aggressive하다는 것을 알게됐다. 게다가 ir은 단순히 스크린 리더 사용자뿐만 아니라 브라우저에게도 정보를 제공하기 위한 부분도 있으니까 더욱 blind보다는 text-hide와 같은 네이밍이 적절하다고 느꼈다.

2. 웹 사이트들을 돌아다니면서, background img를 눌러보면 약속이라도 한 듯이 다들 하나의 이미지에 여러 아이콘들과 버튼이 들어가있는 것을 볼 수 있었다. 예전부터 궁금했는데 오늘 드디어 그 부분에 대해서 알게됐다...!! 여러 이미지들을 백그라운드로 불러오면 코드도 늘어나고 크기도 커지니까 하나의 이미지로 조합해서 로딩 부담을 줄이는 것이다. css sprite generator를 이용해서 아주 간편하게 만들 수 있었고, 이전에 로그인 모달창 작업에서 백그라운드로 넣어준 각각의 이미지들을 하나의 이미지로 교체해서 background-position으로 위치만 바꿔주면 코드를 줄이면서 효율적으로 이미지를 사용할 수 있게 됐다. 한 사이트는 텍스트들만 하나의 이미지로 모아놨는데, 폰트가 그 부분에서만 사용되기 때문에 이미지로 만들어서 네비게이션에 넣어놓은 것이라고..오호라!
   하지만 항상 이렇게 이미지를 하나로 스프라잍해서 사용하는 것은 아니라고 한다. 이미지가 바뀔 가능성이 있는 부분은 이렇게 하는 것보다 개별의 이미지로 관리하는 것이 더 효율적이기 때문이다.

3. retina 디스플레이를 대응하기 위한 과정도 진행해봤는데, 원래 사용하던 아이콘들을 2배 크기로 추출하고 다시 스프라잍해서 사용할 때! 이미지의 크기가 커져있으니까 처음 사용한 이미지의 크기로 줄여주면 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)에 맞게 렌더링 된 이미지가 논리픽셀(css에서 표현하는 화소의 기본 단위)과 차이가 없게 된다. 따라서 레티나 디플에서도 선명하게 아이콘을 사용할 수 있게됐다.

4. bootstrap을 사용해서 클래스명만 가져와서 버튼도 슉 메뉴도 쓕 만들었다. 빠르게 웹 페이지를 제작할 때 부트스트랩+ 워드프레스 DIVI, pods 플러그인이 최강 조합이라고 하셨다. 또, 바퀴를 새로 만들지 말라!고 하셨는데, 부트스트랩에 있는 data-picker가 그 예시인 것 같다. 기능도 좋고 디자인적으로도 훌륭하니 새로 만들지 말고 요걸 사용하자.
   내일은 tailwind를 이용해서 마크업으로만 이력서를 작성하는 쁘디 컴퍼티션이 있을 예정이라 tailwind를 쑥 훑어봤는데 부트스트랩이랑 비슷한 듯 다르다. 어쨌든 둘 다 레고처럼 필요한 부분만 조립해서 사용하면 쓱싹 완성할 수 있는 스피디함이 최고 장점인 듯.