스타일링 코드 리팩토링

기록하기

6일에 스타일링 작업한 netflixIntro의 피드백 위주로 기록합니다.

common

반응형 이미지 설정을 위한 공용 속성을 추가했다.
- 처음에는 resetImg에 추가하려 했으나 해당 클래스는 이미지를 초기화 하는 역할을 하는 것이기 때문이다. 내가 추가하려는 속성은 반응형에서의 이미지를 설정하는데 필요한 속성이기 때문에 따로 클래스를 추가했다.
```
.rwdImg {
  width: 100%;
  height: auto;
}
```

netflixIntro

netflixIntro__downloadContent의 <p>요소에 role="text"속성 추가 하기
- 처음에 속성을 적용했다가 뺀 이유는 한 문장으로 이어지는 흐름이 아니라고 생각했기 때문이다. (스크린 리더기가 정확하게 어떻게 읽어줄 지는 모르겠지만) <br /> 요소가 포함되어 있기 때문에 문장이 끊어져서 읽어 주는 것은 분명하다. 심지어 나중에 자동으로 읽어주는 것이 아니라 사용자가 어떤 인터랙션을 해야 아래의 "저장 중..."을 읽어주게 된다.
  "기묘한 이야기 저장 중"이라는 문장을 잘 모면 한 문맥에서 이어지는 내용이기 때문에 사용자의 편의를 위해 속성을 추가해주는 것이 좋을 것 같다는 결론을 내림!
netflixIntro__downLoadAndWatch의 이미지에 girlImage라는 클래스가 설정되어 있었다. 해당 클래스를 지정해준 이유는 이미지의 위치를 조정하려는 목적이었으나 스타일링을 진행 해본 결과 필요없는 클래스 명이라 삭제해 주었다.
netflixIntro의 p 선택자에 :not() 함수 사용해보기
- 공부한 내용을 사용해보기 위해 :not()함수를 사용했다. 내가 하려는 목적은 나머지 netflixIntro의 <p> 중에서 <div class="netflixIntro__downloadContent"> 안에 있는 <p>만 제외하고 싶었다.
  하지만 아래의 방법이 내가 원하는 방식으로 적용되지 않은 이유는 netflixIntro__downloadContent라는 클래스는 <p>에 설정된 것이 아니기 때문이다.
  .netflixIntro p { font-size: 2rem; } .netflixIntro p:not(.netflixIntro__downloadContent) { font-size: 1rem; }
  위와 같은 형태로 한다면 netflixIntro__downloadContent에는 font-size: 2rem;이 적용되고 나머지 p요소에는 font-size: 1rem;이 적용된다. 왜? 뒤에 나오는 CSS의 속성의 우선순위가 더 높기 때문이다.
  위의 코드는 현재 넷플릭스에서 사용하기엔 최선의 방법은 아니다. 해당 요소에 직접적으로 스타일을 적용할 수 있는 구조이기 때문에 해당 요소를 직접 선택하여 스타일을 주는 방식을 사용하는 것이 좋겠다.
컴포넌트 이해하기
- 상태 클래스를 컴포넌트로 사용하기 <article>의 클래스로 각 부분을 제어하며 스타일링을 적용했는데 이는 재사용을 고려하지 않은 스타일링이다. 예를 들어 새로운 <article>이 추가 된다면 또 다시 그 <article>의 클래스로 스타일을 다시 적용해야 한다.
재사용을 고려하지 않은 예시
```
.netflixIntro__watchOnTV,
.netflixIntro__watchOnDevice {
  flex-direction: row;
}

.netflixIntro__downLoadAndWatch--reverse {
  flex-direction: row-reverse;
}
```
재사용을 고려한 예시
```
.netflixIntro {
  flex-direction: row;
}

.netflixIntro--reverse {
  flex-direction: row-reverse;
}
```
컴포넌트를 만드는 스타일링을 매번 수업 시간에 따라하기만 했지 직접 해본 경험은 처음이라 아직 상태 클래스나 컴포넌트를 완전히 이해하지 못한 것 같다.(사실 머리로 이해했기 때문에 다 알고 있는 줄 알았다 ㅎㅎ) 오늘도 하나를 더 배웠고 몸에 익혔다는 마음으로 다음 작업에서는 잘 적용해보자.
netflixIntro__description의 단락을 가운데 정렬하기 단락을 가운데 정렬하기 위해 아래의 요소를 적용했다. 사실 왜 해당 속성을 적용했는지 설명하라고 하면 이유는 없다. 가운데 정렬이 안되니까 막 갖다 붙이다가 해결된 것이다. 즉, 내가 쓴 코드를 설명을 하지 못한다. 그냥 썼으니까. 이런 일이 일어나지 않도록 원인을 정확하게 알고 꼭 필요한 속성을 사용할 수 있도록 노력하자!
```
.netflixIntro__description {
  display: inline-block;
}
```
아래의 코드를 통해 단락을 가운데 정렬해주었다.
```
.netflixIntro__description p {
  margin: 3rem auto 0;
}
```
inline이 아니라면 block요소에서는 height: auto의 의미가 없다.왜냐하면 block요소는 가로세로비율에 맞춰서 이미지가 커지는 것이 아니라 요소 안의 컨텐츠의 크기만큼 커지고 작아지기 때문이다.(아무것도 없다면 높이는 0이다.)
나중에 마크업을 수정하는 바람에 생긴 문제

<div>로 단락요소를 랩핑하기 전에 h4에 margin-top 공간을 주었다. 마크업을 수정하고 나서 그 부분을 미처 생각하지 못하고 넘어갔더니 h4에 적용된 margin-top 공간이 <div>를 넘어가는 형태가 되어 버렸다. 마크업을 나중에 수정하다 보니 생기는 문제다. 이런 상황이 DDD방법의 단점이다.

  <div class="netflixIntro__description">
    <h4 role="text">즐겨 보는 콘텐츠를 저장해 <br /> 오프라인으로 시청하세요.</h4>
    <p>간편하게 저장하고 빈틈없이 즐겨보세요.</p>
  </div>

  .netflixIntro h4 {
    margin-top: 6rem;
    margin-bottom: 0;
  }

PreviousNetflixIntro Next구분선 스타일링 방법

Last updated 3 years ago