> 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/login/footer.md).

# Footer

## 질문하기

1. `grid-template-columns` 속성 덮어쓰는?! 방법이 무엇인가요?

![login page의 footer linkList](/files/-MPqjVsXIF_iqbRgHnsf)

위의 이미지는 Info 컴포넌트의 스타일이 적용된 login page의 linkList입니다.  디자인 시안과 다른 모습입니다. 

```css
.Info {
  .InfoList {
    @include grid($cols: 2);

    @include media('>=md') {
      @include grid-append($cols: 3);
    }

    @include media('>=lg') {
      @include grid-append($cols: repeat(4, minmax(auto, rem(280px))));
    }
  }
```

![디자인 시안에서의 login page의 footer linkList](/files/-MPqjtU1fExgHQZ2Qyga)

위의 이미지는 디자인 시안에 맞춰 `columns`의 크기를 조정한 login page의 linkList 모습니다. 

```css
  .Info 
    .InfoList
      +grid($cols: repeat(2, minmax(0, rem(149px))))

      +media('>=md')
        +grid-append($cols: repeat(4, minmax(0, rem(150px))))
```

**문제** 

login page를 이전(main page의 LinkList)과 다르게 columns의 크기를 조정하고 싶은데 속성이 덮어쓰기가 되지 않습니다. 즉, 컴포넌트를 재사용하기 쉽지 않습니다.

**질문**

이와 같은 경우 컴포넌트를 재사용 할 수 있도록 수정하는 것이 좋을까요? 아니면 login page에서만 사용하는 LinkList를 또 다시 만드는 것이 좋을까요? 

## 기록하기

### headLine의 \<br> 요소 클래스 제거

![login page의 Footer의 head line (브라우저 너비에 관계 없이 줄바꿈 유지)](/files/-MPOWX9S8UfG-a7Xj9S1)

#### 문제 및 원인&#x20;

login page에서의 footer headLine은 브라우저의 너비가 960px 이상일 때도 줄바꿈이 유지되어 있습니다. &#x20;

여기서 문제는 main page는 960px 이상일 때, 한줄로 바뀌는 스타일링을 할 때,  `<br class="footerLinebreak" />` 에 960px 이상이면 `display: none` 이 되도록 속성을 적용했기 때문입니다.&#x20;

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

#### display: none 속성이 적용되어 있어도 해당 스타일을 덮어쓸 수 있을 거라 생각했지만 적용되지 않았습니다.&#x20;

#### 해결&#x20;

HTML Markup 수정했습니다. 기존 main page에 있던 `<br class="footerLinebreak" />`

요소의 클래스 이름을 제거해고 `<br />`를 유지하는 방법을 사용했습니다.&#x20;

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

### address의 제목 변경&#x20;

![main page의 footer adress](/files/-MPqmaQvJuVgF8FlNm81)

문제 및 해결&#x20;

login page의 address의 제목 역할을 하던 **"Netflix 대한민국"** 없습니다. 그래서 접근성을 위해 감춤처리되어 있던 연락 정보를 제목으로 설정했습니다.&#x20;

```markup
<h2 class="addressInfoHead a11yHidden">연락 정보</h2>
```

```markup
<h2 class="addressInfoHead">Netflix 대한민국 
    <span class="a11yHidden">연락 정보</span>
</h2>
```


---

# 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/login/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.