> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/footer.md).

# Footer

## 기록하기

### Footer 헤드라인 (HTML)

![브라우저가 960px 미만일 때, main page의 Footer의 head line](/files/-MPOWX9S8UfG-a7Xj9S1)

![브라우저가 960px 이상일 때, main page의 Footer의 head line](/files/-MPoSTiXVD-m-ot3K35D)

#### HTML Markup 수정  

위의 사진은 footer의 헤드라인이다. CSS로 작업 했을 땐 공통으로 font 스타일을 적용하기 위해 question과 phoneNumber을 \<div>로 묶어 스타일링 했다. 하지만 이번에 작업할 때는 의미없는 \<div> 요소를 사용하지 않기위해 고민을 하다 각 요소에 클래스를 주고 CSS 복수 선택자를 이용해 스타일링 주는 것으로 방법을 바꿨다.&#x20;

```markup
<footer class="netflixFooter Section">
    <p class="question">질문이 있으신가요?</p>
    <span class="phoneNumber"><b> 문의 전화</b>: 
        <a class="resetLink" href="tel:00-308-321-0058">00-308-321-0058</a>
    </span>
</footer>    
```

```css
.netflixFooter {
  .questions,
  .phoneNumber {
    @include font-and-line-height(20px, bold, 1.4);
    color: getColor(gray);
  }
}
```

위와 같은 작업은 Sass의 중첩 기능을 사용해서 더 확실하게 어느 부분의 요소인지를 명확하게 알 수 있어서 좋았다.&#x20;

### Footer 헤드라인 (STYLING)

#### Linebreak toggle 스타일

상단의 헤드라인 사진을 보면 960px을 기준으로 글의 줄바꿈이 달라진다. 이와같은 스타일링을 하는 두 가지 방법이 있다.&#x20;

**방법 1**

요소를 `<p>` 또는 `<span>` 등의 block element로 각각의 콘텐츠로 묶고 960px이 되었을 때, 두 요소 모두 `display: inline-block`이 되도록 설정한다.&#x20;

```markup
<p class="question">질문이 있으신가요?</p>
    <span class="phoneNumber"><b>문의 전화</b>: 
        <a class="resetLink" href="tel:00-308-321-0058">00-308-321-0058</a>
    </span>
```

```css
@media (min-width: 40em)
.question, .phoneNumber {
    display: inline-block;
```

**방법 2**

`<br />`요소에 class 이름를 설정하여 줄바꿈이 해제될 때는 `display: none`을 적용하여 화면에 보이지 않도록 한다.&#x20;

```markup
<p class="question">질문이 있으신가요?<br class="footerLinebreak" />
    <span class="phoneNumber"><b>문의 전화</b>: 
        <a class="resetLink" href="tel:00-308-321-0058">00-308-321-0058</a>
    </span>
</p>
```

```css
.question, .phoneNumber {
    display: inline-block;

.footerLinebreak {
    @media (min-width: 40em){
    display: none;
}
```

### InfoList의 \<a> 요소 스타일링

![](/files/-MPOcJALs9baVH0cdym2)

`.InfoList`는 `<a>`요소이다. 하지만 이 부분 스타일링을 할 때 padding 값을 다른 `<a>`요소 처럼 글자 크기에 따라 바뀌는 `em`단위를 사용하지 않고 고정값으로 적용했다.&#x20;

**기억하기, `<a>`요소를 스타일링할 때 padding!! em!!**

### Link요소 UX를 고려한 스타일링

```css
.netflixFooter {
  a:hover {
    color: #ffffff;
  }
}
```

​이전에는 `Footer`에서 `<a>`요소가 클릭 가능한 컨텐츠임을 사용자가 알게 하기 위해 `:hover` 상태일 때 `text-decoration`을 적용했다.&#x20;

이번에는 좀 더 개선해서 `:hover` 상태일 때, `color`에 변화를 주어 더 확실하게 알아 볼 수 있도록 했다. 심지어 netflix의 검은색 배경과 대비되어 더욱더 선명하게 보인다.&#x20;

{% hint style="warning" %}
\<a>요소에서의 접근성은 :hover시 색상이 변하는 것 보다는  text-decoration을 사용해서 밑줄을 적용하는 것이 더 좋다.&#x20;
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/footer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.