> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/styling/css-main/netflixintro/20201209.md).

# 구분선 스타일링 방법

## 고민하기

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

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

## 시도해보기&#x20;

### ::after 가상 요소 시용

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

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

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

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

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

### &#x20;구분선을 위한 \<div> 태그 추가    &#x20;

{% hint style="warning" %}
이 방법은 원하는 모양 대로 구현은 가능하지만 스타일링을 위해 의미없는 마크업을 추가했기 때문에 시멘틱 마크업이라고 할 수 없다. → 권장 하지 않는다. &#x20;
{% endhint %}

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

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

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

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

## 새로운 방법&#x20;

### calc() 함수 사용

```css
.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;
  }
}
```

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

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

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

![컨테이너에 적용된 margin ](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS84lZGxBZIc86W3gWg%2F-MS8C7h4ddCJmzlbkvHS%2Fimage.png?alt=media\&token=e6e4118f-2d68-4fdb-9078-dd34ca19e22c)

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

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

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

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