Footer

질문하기

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

위의 이미지는 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))));
    }
  }

위의 이미지는 디자인 시안에 맞춰 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에서만 사용하는 LinkList를 또 다시 만드는 것이 좋을까요?

기록하기

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

문제 및 원인

여기서 문제는 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의 제목 변경

문제 및 해결

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

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

Previouslogin NextComponent

Last updated 4 years ago