Footer

Footer 부분의 작업 과정을 기록합니다.

기록하기

Footer 헤드라인 (HTML)

브라우저가 960px 미만일 때, main page의 Footer의 head line

브라우저가 960px 이상일 때, main page의 Footer의 head line

HTML Markup 수정

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

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

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

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

Footer 헤드라인 (STYLING)

Linebreak toggle 스타일

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

방법 1

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

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

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

방법 2

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

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

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

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

InfoList의 <a> 요소 스타일링

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

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

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

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

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

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

<a>요소에서의 접근성은 :hover시 색상이 변하는 것 보다는 text-decoration을 사용해서 밑줄을 적용하는 것이 더 좋다.