[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 17일차 기록 및 복습

1. CSS 실무 테크닉

1-1. 아이스브레이킹

- 유니티 개임 개발자 6개월 과정 듣고 취업

- 퇴사 후 웹개발 부트캠프 5개 듣기 (2년반)

- 배울게 많아요, 길게 보세요. 급하게 생각하지 마세요.

- 혜진 강사님의 뼈떄리는 말씀

비교를 통해서 얻을 수 있는 것은 두 가지

비 - 비참해지거나,

교 - 교만해지거나

 밖에 없다고 했다.

- 길게 봐야한다.

- 다른 사람이랑 비교하지 말라.

- 취업 이야기:  카카오 자회사 검색 개발팀

- 네트워크가 정말 중요하다. (중요한 정보가 나온다. 88명을 소중히 여겨라)

- 모두가 취직을 할 것이고 중요한 정보를 공유하고 질문할 수 있다.

- 관심 회사의 자리가 있는지?

- 그 회사의 팀 분위기는 어떤가요?

- 개발자는 실력 그리고 소프트스킬이 매우 중요하다.

 

1-2. Input checkbox 커스텀

-  실무에서는 input 요소나 select 박스를 브라우저 스타일과 다르게 표현하곤 한다.

- input 요소를 숨기고 label 요소로 꾸며준다.

- width, height 가 0px 로 설정되어 있으면 DOM 구조를 읽는 스크린 리더가 인식을 못한다.

- input 을 안보이게 하기 위해서 overflow:hidden; width:1px; height:1px; clip-path: inset(50%); 을 사용한다.
  overflox:hidden 은 어떻게든 안보이게 하려는 방탄코드

- 가상 요소는 기본적으로 inline 속성을 가지고 있어서, width, height 값이 안먹는다.

- 포지션 속성을 주면 display: block 이 생긴다.

- 체크박스는 클릭 후에도 포싱이 남아 있다. 포커싱을 체크 후에 또는 탭을 했을 때만 활성화하게 포커싱을 없애게 하려면 focus-visible 을 해준다.

 

1-3. select box 커스텀

- Codepen select box (JS code 에 웹 접근성을 고려한 속성이 모두 들어가 있으니 참고)

- FES7 피그마에 디자인 시안이 있음

See the Pen Untitled by KANGHYEJIN (@stronger-deer) on CodePen.

 

1-4. IR (image replace) 기법들

- 접근성을 위해 이미지를 대체하는 기법 (ir_pm, 스크린 리더는 인식하는 텍스트를 안보이게 숨기기)

- 카카오가 사용하는 방법들 

- 다음 카카오는 접근성 관련된 클래스가 많다. 네이버는 하나 밖에 없음 (.blind)

- 스크린 리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우
  (SEO 점수 올리기 위한 h1 태그 같은 것)

- 중요한 이미지 대체 텍스트로 이미지 off 시에도 텍스트를 보여주고자 할 떄 (.ir_wa)

- 텍스를 이미지(이미지 폰트)로 해서 보여주는 이유 (텍스트 설치, 디자이너 입장에서 디자인 font 적용을 위해)

- 폰트 용량이 크기 때문에 컴퓨팅 리소스가 많아진다. (성능 문제)

- CSS clip 속성은 position: absolute; 속성과 꼭 함께 써줘야한다.

- rect( <top> <right> <bottom> <left> )

- IE 호환을 위해서 rect 같은 옛날 요소들을 사용한다.

- 바로 없어지지 않는 것은 기존에 만들었던 디자인이 깨진다.

- clip 과 clip path 차이 (쉼표와 )

- 쿠팡이 사용하는 방법

- 코딩 컨벤션

- 접근성 쪽에서 손에 꼽는 전문가의 글

- 하코사 (하드코딩하는 사람들)의 운영자, 멀더끙

- (해외사이트) 에어비엔비의 IR 기법들

 

1-5. 로그인 실습 과제

- 또는 버튼들만 만들기

- 8/8(화) 코드리뷰

- 모든 상황들이 다 들어가도록 모달 하나만 만들면 된다.

- 얼마나 시안(디자인)처럼 만드느냐

- 스크린샷 찍어서 올려둘 것 (퍼펙트 픽셀)

 

1-6. CSS Sprite 기법

- 장점 : 로딩해야하는 이미지가 많으면 많을수록 브라우저 성능에 문제가 생긴다. 이 기법은 이미지 로드 부담을 줄인다.

- 단점 : 이미지를 안쓰게 되더라도 좌표값 때문에 지우지 못하고 새로운 이미지를 빈공간에 채워 넣는다.

              용량이 가면 갈수록 무거워 진다. 이미지가 깨지면 관련 요소 이미지 전체가 깨진다.

- 실무에서 정석으로 Sprite 이미지를 제작하기 위해서는 포토샵, 피그마, 스케치를 사용한다.

- Image sprite generator (toptal)

Toptal Image Sprite Generator

1-7. 레티나 디스플레이 대응법

- 애플 LCD (브랜드 명) 레티나 디스플레이. 300 PPI (Picel per inch) 넘을 경우. 

- Retina display 에서 이미지가 흐려보이는 현상

- 원인: 논리픽셀과 물리 픽셀의 차이가 발생해서 브라우저는 CSS 에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 된다.

- 고해상도의 레티나 디스플레이에 작은 이미지를 그리면서 이미지 깨져 보인다.

- 해결방법: 원본 사이즈의 가로 세로 2배 되는 이미지를 준비한다.

- CSS Sprite Generator 사용시에 Margin 도 2배가 되게 해야한다.

- 이미지 크기를 압축시켜준다. (background-size)

- 아직은 2배 정도 키우면 된다. (브랜드, 기종, 화소가 다 다른 걸 어떻게 대응하나)

- 비전 프로는 64배 고해상도 이다.

- CSS Sprite Generator 를 통해서 마진까지 고려해서 만들어진 이미지를 background-size 로 사이즈를 명시하고, 해당 사이트에서 알려주는 아이콘의 좌표를 넣고 활용한다. 그러면 설정한 width/height 값에 맞게 좌표의 아이콘이 들어가게 된다.

- 순서 (1) : 원하는 width 와 height 를 정하고 작은 아이콘의 CSS Sprite 이미지를 넣고 toptal 에서 생성해준 좌표로 정상 작동을 확인한다.

- 순서 (2) : 배수 아이콘의 CSS Sprite 이미지를 넣고 width/height 그대로, 좌표 그대로 두고 background-size 를 이전 작은 아이콘의 CSS Sprite 이미지 사이즈로 축소 시킨다. (이때 CSS Sprite Generate 에서 마진도 배수로 맞춰줘야한다.)