Footer
Footer 부분의 작업 과정을 기록합니다.
기록하기
Footer 헤드라인 (HTML)


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:00-308-321-0058">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:00-308-321-0058">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:00-308-321-0058">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을 사용해서 밑줄을 적용하는 것이 더 좋다.
Last updated
Was this helpful?