구분선 스타일링 방법

고민하기

1. netflixIntro에 구분선을 어떻게 적용해야 할까?

   아래의 이미지는 <article>에 Divider컴포넌트를 적용한 모습이다. 아쉽게도 <article>의 사이즈에 맞춰 구분선이 그려진다. 이는 netflixIntro의 <section>에 적용해도 비슷한 현상이 나타난다. 해당 요소에 Container 컴포넌트를 적용했기 때문에 양 옆의 마진 공간이 그대로 보인다.

시도해보기

::after 가상 요소 시용

<article>에 ::after을 사용해 볼까?

article::after {
   content: '';
   /* border-bottom: solid 4px var(--colorDarkGray); */
   background: aqua;
   width: 100%;
   height: 5px;
}

위의 요소를 적용했으나 이미 netflixIntro에 적용된 컨터이너의 마진 여백 때문에 소용이 없었다.

<img src="./assets/20201209_TIL_attached_file2.jpg" width="300"> 

심지어 더 문제점은 데스크탑 버전으로 봤을 때 레이아웃이 무너져버린다.

구분선을 위한 <div> 태그 추가

이 방법은 원하는 모양 대로 구현은 가능하지만 스타일링을 위해 의미없는 마크업을 추가했기 때문에 시멘틱 마크업이라고 할 수 없다. → 권장 하지 않는다.

구분선을 구현하기 위해서 <article> 사이에 <div> 요소를 생성 했다.

Container 컴포넌트에 적용되어 있는 마진 공간 때문에 구분선도 사이즈가 그에 맞춰진다. 그래서 netflixIntro의 <section> 요소에 적용되어 있던 Container Container--column 컴포넌트를 빼고 각 <article>에 적용했다.

위의 방법대로 했더니 원하는 대로 결과가 잘 나온다. 조금 고민이 되는 부분은 구분선 <div>태그를 <article>의 형제 요소로 마크업 해줘야 할지 아니면 <article>을 묶어주는 부모요소로 마크업 해야 할지 고민이다.

<section class="netflixIntro Divider">
  <article class="netflixIntro__watchOnTV Container Container--column">
  </article>
  <div class="Divider"></div> <!-- 구분선을 위한 마크업 -->
</section>

새로운 방법

calc() 함수 사용

.Section::before {
  content: '';
  border-bottom: 4px solid get-color(darkgray);
  position: absolute;
  top: 0;
  left: -16px;
  right: -16px;

  @include media('>=lg') {
    left: calc((100vw - 92vw) / 2 * -1);
    width: 100vw;
  }
  
  @include media('>=x-lg') {
    left: calc((100vw - 75rem) / 2 * -1);
    width: 100vw;
  }
}

처음 구분선 스타일링을 고민 할 때, 마진 음수 값을 넣어서 구현을 해야했다고 생각했다. 위에서 사용한 것 처럼 쉽지 않았다.

그럼 어떻게 해야할까? calc()함수를 사용해서 해결해보자!

width: 100vw로 설정하고 마진의 공간을 계산해서 왼쪽으로 당겨오는 방식을 사용했다.

컨테이너에 적용된 margin

left: 
calc((100vw - 컨테이너 너비 값)
/ 2 /* 한 쪽 마진의 값을 구하기 위해 */
* -1) /* 그리고 음수 값 적용을 위해 */

참고로 각 미디어 쿼리 중단점 마다 컨테이너의 최대 너비가 다르기 때문에 구분선 스타일링도 그에 맞춰 적용했다.

.Section {
  @include media('>=lg') {
    max-width: 92vw;
    @include mx(auto);
  }

  @include media('>=x-lg') {
    max-width: rem(1200);
  }
}