NetflixIntro

기록하기

netflixIntro

1. 작업 중 브라우저 전체 화면에서 원인을 알 수 없는 margin-right 공간이 생겼다. 내가 잘못 한 건 줄 알고 원인을 찾으려 시간을 꽤 소비했는데 화면을 새로 고침하니까 없어졌다. 가끔 이런 오류가 발생할 수 있으니 먼저 새로 고침 해보기!

2. netflixIntro에는 따로 div으로 Container를 만들어주지 않았기 때문에 netflixIntro에 Container 컴포넌트 적용

   • 현재의 작업이 컴포넌트를 사용하는 작업이다.

3. netflixIntro__figure의 <img>에 class="resetImg" 적용

4. figure에 기본으로 적용되어 있던 margin값 제거

5. img가 video를 덮는 디자인을 구현하기 위해 z-index를 사용하려 했으나 z-index는 position 속성(static 외 다른 요소)을 적용하지 않으면 적용이 힘들었다. 그래서 position: relative; 속성 적용했다. absolute는 부유해 버리는 특징 때문에 레이아웃이 무너져 버린다.

6. netflixIntro__downloadContent에 position: absolute;을 적용한 다음 margin-bottom 값으로 img위에서 위치를 조정하려고 했으나 img가 형제 요소이기 때문에 컨텐츠가 img 올라가지 않았다. 결국 bottom값으로 위치를 잡았다.

7. netflixIntro에 <br />가 적용된 요소에 role="text"적용

   • netflixIntro__downloadContent의 <p>요소에는 적용안함. 왜냐하면 내가 봤을 때는 "기묘한 이야기, 저장중"이라는 문장이 이어지는 문장이 아니라고 생각했기 때문이다.

8. role="group"

   • 그리고 role="group"은 트리 구조를 구현하거나, 드롭다운 메뉴를 만들 때 사용한다.

   • treeitem 역할 또는 menuitem 역할을 가진 요소를 묶을 때 사용한다.

   • 트리구조를 웹에서 구현할 때, 그룹이 필요한 경우 role="group"을 사용할 수 있다.

9. downloadIcon의 수직 위치를 가운데 정렬하기 위해서 <img>에 margin-top: auto; margin-bottom: auto; 적용

10. netflixIntro의 컨텐츠가 header의 컨텐츠를 덮어버리는 현상을 해결하기 위해 header에 z-index: 10000; 적용

1번 관련 이미지

10번 관련 이미지

고민하기

1. netflixIntro__downloadContent에서 text의 위치를 잡을 때

   • text-align: left; 부모요소가 downloadContent이다 보니 text-align: left; 했을 떄 박스의 왼쪽 끝으로 위치해버린다.

   • position: absolute; 앞서 position 속성을 많이 사용했기 때문에 브라우저의 성능 면으로 봤을 때 좋지 않겠지만 마크업을 수정하지 않고 진행한다는 장점이 있다. 하지만 데스크탑 버전을 생각했을 때 또다시 위치를 고려해야 한다는 단점이 너무 크다

   • 🎯 선택! display: flex; flex를 사용해 위치를 잡기 위해서는 text를 묶어줄 컨테이너가 필요하다. text를 div으로 랩핑한다. 단점은 마크업에 <div>요소가 이미 너무 많고 마크업을 수정하지 않는 쪽으로 진행하고 싶다. 하지만 데스크탑 버전까지 고려했을 때 위치를 조정하거나 수정하는 부분에서는 최선의 방법이다.

     🌿 이미 p태그가 text를 묶는 컨테이너 역할을 하고 있다. 또 다른 컨테이너를 <div>을 사용해 묶는다면 이미 p태그가 같은 역할하므로 의미 없는 <div>태그가 되어 버린다.

     결론, netflixIntro__downloadContent에서 text의 위치를 잡을 때는 flex 또는 grid를 사용하는 것이 최선이라고 생각하며 이를 사용하기 위해 text를 묶어줄 컨테이너를 사용할 필요는 없다.