로 묶어 스타일링 했다. 하지만 이번에 작업할 때는 의미없는 \

요소를 사용하지 않기위해 고민을 하다 각 요소에 클래스를 주고 CSS 복수 선택자를 이용해 스타일링 주는 것으로 방법을 바꿨다. ```markup ``` ```css .netflixFooter { .questions, .phoneNumber { @include font-and-line-height(20px, bold, 1.4); color: getColor(gray); } } ``` 위와 같은 작업은 Sass의 중첩 기능을 사용해서 더 확실하게 어느 부분의 요소인지를 명확하게 알 수 있어서 좋았다. ### Footer 헤드라인 (STYLING) #### Linebreak toggle 스타일 상단의 헤드라인 사진을 보면 960px을 기준으로 글의 줄바꿈이 달라진다. 이와같은 스타일링을 하는 두 가지 방법이 있다. **방법 1** 요소를 `

` 또는 `` 등의 block element로 각각의 콘텐츠로 묶고 960px이 되었을 때, 두 요소 모두 `display: inline-block`이 되도록 설정한다. ```markup

질문이 있으신가요?

문의 전화: 00-308-321-0058 ``` ```css @media (min-width: 40em) .question, .phoneNumber { display: inline-block; ``` **방법 2** `
`요소에 class 이름를 설정하여 줄바꿈이 해제될 때는 `display: none`을 적용하여 화면에 보이지 않도록 한다. ```markup

질문이 있으신가요?
문의 전화: 00-308-321-0058

``` ```css .question, .phoneNumber { display: inline-block; .footerLinebreak { @media (min-width: 40em){ display: none; } ``` ### InfoList의 \ 요소 스타일링 ![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MPO_2nxxe0GO7umDReo%2F-MPOcJALs9baVH0cdym2%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%208.18.41.png?alt=media\&token=98ad7f4f-823f-4b5f-a3cc-3326a35878de) `.InfoList`는 ``요소이다. 하지만 이 부분 스타일링을 할 때 padding 값을 다른 ``요소 처럼 글자 크기에 따라 바뀌는 `em`단위를 사용하지 않고 고정값으로 적용했다. **기억하기, ``요소를 스타일링할 때 padding!! em!!** ### Link요소 UX를 고려한 스타일링 ```css .netflixFooter { a:hover { color: #ffffff; } } ``` 이전에는 `Footer`에서 ``요소가 클릭 가능한 컨텐츠임을 사용자가 알게 하기 위해 `:hover` 상태일 때 `text-decoration`을 적용했다. 이번에는 좀 더 개선해서 `:hover` 상태일 때, `color`에 변화를 주어 더 확실하게 알아 볼 수 있도록 했다. 심지어 netflix의 검은색 배경과 대비되어 더욱더 선명하게 보인다. {% hint style="warning" %} \요소에서의 접근성은 :hover시 색상이 변하는 것 보다는 text-decoration을 사용해서 밑줄을 적용하는 것이 더 좋다. {% endhint %}