[패스트캠퍼스] React 강의 3주차

이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲

이번엔 CSS 속성에 관한 글을 작성하려고 한다!

 

나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다.

flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다!

 

처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다.

개발은.. 하면 할수록 느는(?) 과정인 것 같다.

 

그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다.

개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다.

 

예를들어 이런 코드가 있다.

p:not(.classy) { color: red; }
body :not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

 

여기서 출력은 어떻게 될까?

 

ABC:not(XYZ) 선택자는 부정 선택자로 선택자 XYZ가 아닌 ABC 요소를 선택하게 된다.

따라서 .classy가 아닌 p 요소를 선택할 것이므로 첫번째 문장이 빨간색이 될 것이고

p 요소가 아닌 body 내 태그를 선택하는 것이므로 세번째 문장의 <span>태그 부분이 초록색이 될 것이다.

 

결과를 보자.

유추했던 결과가 나왔다. 

이 선택자는 내가 스타일링을 하면서 어떤 부분에만 다르게 줄 때? 사용하면 유용할 것 같다고 생각이 들었다.

::after나 ::before 가상 선택자만 있는 줄 알았는데 이 개념은 처음 알아서 알아놔두면 좋을 것 같다.

 

그리고 내가 생각했을 때 가장 중요한 건 선택자 우선순위이다.

우선순위란 같은 요소가 여러 선언의 대상이 되었을 때 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.

제일 처음 배웠을 땐 선택자 우선순위가 뭔지 잘 몰라서 속성을 부여할 때 애를 먹은 적이 많다.

쉽게 말해서 선택자에 점수를 부여하고 그 점수가 높은 것이 우선적으로 선택된다는 의미이다.

 

이렇게 동시에 선언하게 되었을 때 Hello world의 색은 빨간색으로 나올 것이다.

이유는 !important의 점수가 가장 높기 때문이다.

!important를 오남용해서 안된다고 알고 있어서 중요할 때만 사용해주면 될 것 같다.

아마 점수가 높아서 후에 적용시켜야 할 부분이 안되기 때문에.. 많이 사용하면 디버깅 하기도 힘들어 질 것 같다.

사담이지만 css 속성 중에 z-index 점수를 무분별하게 사용했을 때 디버깅이 힘들어지는 것처럼 이것도 마찬가지라고 생각이 든다.

항상 근거를 가지고 논리적으로 사용하는게 중요할 것 같다.

이번 내일배움카드를 통해 배울 수 있는 강의에서는 선택자 우선순위 부분이 개념을 다시 알고 제일 많이 도움되었던 것 같다.