Footer

질문하기

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

login page의 footer linkList

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

.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

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

  .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 (브라우저 너비에 관계 없이 줄바꿈 유지)

문제 및 원인

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

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

<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 속성이 적용되어 있어도 해당 스타일을 덮어쓸 수 있을 거라 생각했지만 적용되지 않았습니다.

해결

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

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

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

address의 제목 변경

main page의 footer adress

문제 및 해결

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

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

Last updated

Was this helpful?