[패스트캠퍼스] 프론트엔드 강의 2주 차 후기

-
  내 코딩 스타일리고 할 건 없지만, 될 수 있으면 HTML을 깨끗하게 쓰고 싶은 타입이라 학원 수업 때부터 인라인 스타일은 되도록 사용하진 않았다. 꾸밈은 모두 css에서 하려고 했고 동작은 자바스크립트에서 하려고 했다. (이렇게 나열하고 보니 당연한 거 아닌가 싶지만...) 하지만, 막상 코딩을 하면 그때그때의 상황에 따라 코드가 뒤죽박죽이 되기 때문에 흔히들 말하는 스파게티 코드가 되어버리기 쉽다. 그래서 나는 영역(?)을 최대한 나눠서 작업하려고 했고 HTML 안에서 테일윈드를 쓰더라도 레이아웃을 나누는 플렉스 정도만 쓰려고 했다. 

  왜 이렇게 서론이 길어졌냐면, CSS 파트의 선택자 우선순위랑 강의를 듣고 있자니.... 정말 저거 계산하고 있을 시간에 필요 없는 코드를 지워버리는 게 더 효율적이지 않을까 싶기도 하고;;;;  애초에 #ID는 정말 중요하다고 생각되는 #header #footer 등등의 큰 틀을 나눌 때 정도만 쓰이기 때문에 문제가 되지 않는다고 생각하지만, 인라인스타일은 그 자체가 선택자 우선순위 점수체계를 무너뜨리는 외래종 같다는 생각이 들었다. HTML 코드의 양이 적을 때는 바로바로 눈에 들어오겠지만 HTML의 양이 많을 경우에 자세히 들여다보지 않으면 발견하기 힘든 인라인스타일을 잊어버린 채 CSS에서 헤맬 가능성이 농후해 보이기 때문이다. 그 상황을 상상해 보니 내가 다 암담했기에... 아예 쓰지 않는 게 좋지 않을까 싶었는데... 해당 수업 내용 말미에 강사님도 인라인스타일은 되도록 쓰지 말라고 당부하셨다;;; 

개인적으론 우선순위의 본질을 제대로 적용시켰다고 생각하는 건 !important이다. 
처음 이 우선순위를 알게 됐을 땐 '이게 왜 필요한 걸까? 그때그때 그냥 제대로 입력하면 되지 않을까?' 했었지만

아래와 같은 어쩔 수 없는 상황에서 color를 바꾸고자 할 때 아주 요긴하게 사용했다. 
'바꾸고자 하는 컬러가 아무리 해도 바뀌지 않을 때'
'강사님 말씀처럼 분명 어딘가에서 높은 점수로 지정되어 있거나? 상속돼 있는 것 같은데 아무리 코드를 뜯어봐도 찾지 못할 때'

!important 하나로 이렇게 글이 길어질 줄은 몰랐지만 선택자 우선순위 강의는 지난날의 나를 다시 되돌아보는 계기를 만들어주었다.

ps. 슬라이드 라이브러리 중 하나인 swiper로 슬라이드를 커스텀할 때 색상을 종종 바꾸곤 하는데 그때 나는 !important를 적용한다.

swiper 라이브러리 기본 색상

!important를 적용해야만  swiper  슬라이드 기본 색상이 바뀐다...

 

----------------------------
선택자 우선순위

1. !important - 99999999999999점
2. <style="color: orange;"> 인라인선언 - 1000점
3. ID 선택자(#) - 100점
4. Class 선택자 - 10점
5. 태그 선택자(div 등) - 1점
6. 전체 선택자(*) - 0점

body - 상속 X (점수 계산하지 않는다)

- :hover 가상클래스 10점
- ::before 가상 요소(태그같은 개념이기에) 1점
- :not(.box) :not은 계산하지 않기 때문에 .box 만 계산해서 10점

 

ps. 선언순서가 달라지더라도 점수에 의한 우선순위는 달라지지 않지만, 같은 점수끼리는 선언순서가 달라지면 우선순위가 달라진다.
-> 가장 아래에 입력한 내용이 보인다.(가장 나중에 해석되기 때문에)

----------------------------

-
  2주차 수업인 CSS 파트는 뭐랄까.. 온라인 강의의 최대 장점을 느끼게 해 준 과정인 것 같다. 특히 학원수업 시절에 무조건적으로 외웠던 border-raidus의 원리를 알게 된 게 인상적이었다. 학원 강의는 대면강의라서 실습과 동시에 수업이 진행되기 때문에 현장 반응이 무척 중요하다. 다 안다 싶으면 해당 부분은 빠르게 진도를 뽑고, 하나 둘 모르는 수강생들이 나오면 거기서 딜레이가 된다. 그래서 전반적으로 학원은 핵심적인 부분을 중심으로 수업을 하는 쪽이었다면, 국비지원교육인 내일 배움의 온라인 강의는 예를 들어 강사님 수업이 50분이라 한다면 실습 부분을 수강생들 개인의 몫으로 남겨둠으로써 그 50분은 변수없이 커리큘럼대로 꽉꽉 채워진다. (단순 수업시간 대비 수업내용의 양질로 비교했을 때) 

  물론 피드백이 자유롭지 않기 때문에 하나 둘, 뒤쳐지는 수강생들을 멱살 잡고 끌어가기엔 부족할 수도 있겠지만... 내일 배움에서는 그런 부분을 운영매니저님과 실습코치님이 채워주시는 거 같다. 아직까지 직접 질문을 해본 적은 없지만 슬랙이라는 공간을 통해 내가 질문하기도 전에 질문해 주시는 진도가 빠르신 다른 수강생 분들의 질의응답 내용을 보면서 수업을 따라가고 있다. 이것 역시 슬랙의 장점인 걸까? ㅎㅎ

 

[패스트캠퍼스] 프론트엔드 강의 1주 차 후기

 

[패스트캠퍼스] 프론트엔드 강의 3주 차 후기