스타일링 코드 리팩토링
기록하기
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;
}
Last updated
Was this helpful?