> 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` 속성 덮어쓰는?! 방법이 무엇인가요?
위의 이미지는 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))));
}
}
```
위의 이미지는 디자인 시안에 맞춰 `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의 \
요소 클래스 제거
#### 문제 및 원인
login page에서의 footer headLine은 브라우저의 너비가 960px 이상일 때도 줄바꿈이 유지되어 있습니다.
여기서 문제는 main page는 960px 이상일 때, 한줄로 바뀌는 스타일링을 할 때, `` 에 960px 이상이면 `display: none` 이 되도록 속성을 적용했기 때문입니다.
```markup
질문이 있으신가요?
문의 전화: 00-308-321-0058
```
#### display: none 속성이 적용되어 있어도 해당 스타일을 덮어쓸 수 있을 거라 생각했지만 적용되지 않았습니다.
#### 해결
HTML Markup 수정했습니다. 기존 main page에 있던 ``
요소의 클래스 이름을 제거해고 `
`를 유지하는 방법을 사용했습니다.
```markup
질문이 있으신가요?
문의 전화: 00-308-321-0058
```
### address의 제목 변경
문제 및 해결
login page의 address의 제목 역할을 하던 **"Netflix 대한민국"** 없습니다. 그래서 접근성을 위해 감춤처리되어 있던 연락 정보를 제목으로 설정했습니다.
```markup
연락 정보
```
```markup
Netflix 대한민국
연락 정보
```