스타일링 코드 리팩토링

기록하기

9일에 스타일링 작업한 netflixFAQ의 코드 리뷰 내용을 기록합니다.

netflixFAQ

FaQList를 반응형으로 만들 수 있지 않을까?

왼쪽의 이미지와 같이 FaQList를 반응형으로 만드는 것이 어떤가에 대한 의견이었다. 내가 작업한 결과(오른쪽 이미지)는 좌/우의 여백이 너무 많이 보이기 때문이다.

작업한 이유

위의 컨텐츠들과 흐름을 맞추고 싶었기 때문이다.위의 컨텐츠들은 브라우저의 사이즈가 가변될 때를 생각해서 자연스러운 크기의 변화가 있지 않다고 생각했기 때문이다.(처음엔 이렇게 생각했다.)

놓친 부분

테블릿 또는 브라우저의 크기가 큰 다른 기종은 고려하지 못했다는 점이다. 또한 위의 컨텐츠 들은 텍스트를 화면에 보이는 그대로 보기만 하면 됐지만 FaQ는 사용자가 해당 질문의 답글을 보기 위해 버튼을 클릭하는 인터렉션이 필요한 요소이다. 만약 테블릿 사용자가 작은 크기의 FaQ button을 클릭 할 때 좋지 않은 사용자 경험을 제공할 수 있다.

[코드 수정]

 .FaQList {
  min-width: 33.9rem;
  width: 100%;
}

UX를 위한 FAQListItem의 Button 클릭 영역 확장

netflixFAQ의 Button에 사용자 경험을 위해 FAQListItem 어떤 곳을 클릭하더라도 질문의 답변이 나오도록 한다. Button의 크기를 같게하는 것은 어떨까?

<video>에 반복 재생 기능 추가하기

동영상이 반복재생되는 기능

  • <video> 요소의 loop 속성을 사용해서 비디오가 끊임없이 재생되도록 한다.

<video> 크기 고정 (% 단위 사용)

netflixIntro의 이미지와 비디오의 위치를 잡기위해 css변수와 calc()함수를 사용해주었다.

Divider 설정하기

  1. 구분선을 적용해 주기위해 가상요소(::before)를 사용해주었다.

  • position: absolute를 사용, 음수값을 사용해서 구분선을 왼쪽으로 끌어 당김.

  • 자바스크립트를 이용해줘야 하는지 고민했는데 css의 calc() 함수가 있어서 순수한 css로만 구현이 가능했다.

Section::before {
  left: calc((100vw - 132rem) / 2 * -1);
  화면의 viewport 100vw - container 132rem /   
}

나는 마크업에 div를 사용해서 구분선을 이용했는데 UI에는 문제 없이 적용되고 수학식을 사용하지 않고 간결하게 코드를 작업할 수 있다는 점이 있지만 의미없는 <div>를 사용했기 때문에 시멘틱 마크업은 이루지(?) 못했다.

사용하지 않는 클래스명 정리 그리고 클래스로 요소 제어

netflixFAQ__FAQListItem-6 아이템의 넘버링 클래스명은 사용하지 않는데 없애는 것이 어떨까?

  • 사용하지 않는 클래스명은 정하는 것이 코드의 최적화에 좋다

  • 위와 같은 클래스명을 지우고 dt, dd에 각각 FaQListHead와 FaQListItem 클래스만 주었다.

JavaScript를 고려한 아코디언 메뉴 상태 클래스

아코디언 메뉴에 --open이라는 상태 클래스를 사용하여 js로 제어하는 것은 어떨까? (상태클래스의 중요성)

selection 스타일링

텍스트를 선택했을 때 보여지는 색상 : selection

  • 명도 대비를 명확하게

  • 이미지나 링크 컴포넌트에는 select가 가지 않도록 한다.

  • selection는 일반사용자 뿐만아니라 저시력 사용자에게도 많은 도움이 된다. 저시력 사용자가 명도대비가 확실하지 않은 글자를 드래그 했을 때 보다 나은 사용자 경험을 제공할 수 있다.

scrollbar 스타일링

  • 크로스 브라우징을 고려해서 사용한다.

  • cuser 속성 적용 안된다.

  • 접근성을 위해 10px로 두께를 설정 (마우스를 이용하는 사용자에게 스크롤 바를 cuser로 보다 쉽게 선택할 수 있는 사용자 경험 제공)

우아한 기능저하

우아한 기능저하 내용 보러 바로가기

px을 소수점 단위로 표현하고 싶을 때 rem 단위를 사용하면 가능할까?

예를 들어 4.5rem을 적용했을 때, 어떤 브라우저에서는 5rem으로, 다른 브라우저에서는 4.5rem으로 다 다르게 적용될 수 있다.

px에 소수점 단위를 사용할 수 없을 뿐더러 rem단위를 사용하더라도 브라우저마다 보여지는 값이 다를 수 있다는 것을 염두해 두어야 한다.

flex 속기형을 사용하려고 노력하기

flex-grow 속성보다 flex 속기형을 사용하려고 연습하자!

고민하기

  1. 브라우저의 너비가 350px보다 작아지면 화면의 오른편에 공백이 생겨버리는 이슈

  2. 로고의 뒤에 text가 있을 경우 로고가 선명하게 보이지 않는 이슈

    • 헤더의 배경에 톤 다운 효과를 주어 홈링크가 선명하게 보이게 한다(js사용)

  3. FAQListItem의 Button에 focus-visible 상태일 때 Button의 레이아웃이 무너지는 이슈

    원인은 미리 적용해둔 button:focus-visible의 p:r가 실행됐기 떄문이다.

    Button의 p:a가 우선적으로 적용될 수 있도록 !important사용

    !important는 무분별하게 사용해서 문제이지 꼭 필요한 상황해서는 사용해 줘도 괜찮다.

  4. 넷플릭스 width, max-width값을 왜 해당 방식으로 사용했는지 분석해보기

PreviousNetflixFAQNextfooter

Last updated

Was this helpful?