[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 10회차 미션

 

 

 

 

9일차에는

다양한 셀렉터와 적용 우선순위, 상속과 캐스캐이딩에 대해 배웠습니다.

 

 

셀렉터(선택자) : 특정 html 요소를 선택해서 스타일을 적용할 수 있도록 합니다.

 

*클래스 선택자

가장 많이 사용합니다. 여러 가지 셀렉터를 한 번에 지정하는 것도 가능합니다. 

 

*태그 선택자

문서 전체의 태그 속성을 바꿀 때 유용하다. 너무 많이 사용하면 유지보수성이 떨어집니다. 

 

*id 선택자

앞에 #을 붙여서 사용하고 중복해서 사용은 불가능합니다. 

 

id 선택자는 가장 구체적이기 때문에 지정해주면 다른 셀렉터의 값은 적용되지 않습니다. 

이것을 ‘선택자 우선 수위’라고 부릅니다. 

id 선택자 > 클래스 선택자 > 태그 선택자 순으로 우선 순위가 더 높습니다.

 

 

*가상 선택자

요소의 일정부분만 혹은 특정한 상황일때문 선택 가능합니다.

예를 들면 어떤 요소에 마우스가 올라가져있거나 키보드로 선택되어있을 때 (배경에 무슨 색을 주어라~) 이런 식으로 선택자를 사용할 수 있습니다. 첫번째 요소만 (first-child) 혹은 짝수나 홀수만 혹은 모든 컨테이너 중에서 마지막 요소(last-of-type)만 선택하는 것도 가능합니다.

 

*가상요소

존재하지 않는 요소를 존재하는 것처럼 설정해서 문서 특정 부분을 선택할 때 사용합니다.

 

구체성 점수를 계산하는 방법도 알려주셨는데 꽤 까다로워서 알아서 계산해주는 사이트가 있으니 그걸 이용하면 좋을 것 같습니다.

 

*캐스캐이딩 

프로그래밍에서 변수에 여러 값을 대입하면 문제가 발생하는데, 스타일시트에는 여러 선택자를 사용해도 문제가 발생하지 않습니다. 이것을 캐스캐이딩이라고 부릅니다. 

 

 

 

이제 어느 정도 html과 css의 기본적인 설명은 끝나서 후에 실습강의를 진행할 예정이라 실습시에 필요한 

도구를 설치하는 방법을 배웠습니다.  VS code, 크롬 익스텐션, 파이어폭스 등을 설치해주었습니다. 

18강부터는 에디터를 사용해서 실제 실습을 진행할 예정이라고 합니다.

비주얼 스듀디오 코드에서 문서구조를 자동으로 만들어 놓고 그 안의 코드들을 하나씩 설명해주셨습니다.

최상단에 있는 독타입 선언
(어떤 버전으로 문서가 작성되었는지 브라우저에게 알려주는 선언문이라고 합니다.)

html 요소와 그 안의 lang 속성(내가 작성하는 문서가 어떤 언어로 작성되어 있는지 나타내 줌 ex. 영어나 한글)

head 요소
브라우저에 표시되는 내용은 아니지만 문서의 기본설정이나 스타일시트파일에 연결해주는 등 여러 역할을 합니다. 필수적인 요소입니다. 그 안에는 문자집합 및 인코딩 관련 요소, 반응형 웹사이트를 만들 때 선언해야하는 요소, 인터넷 익스플로러 브라우저에서의 렌더링과 관련있는 요소 , 문서의 제목을 나타내주는 타이틀 요소 등이 들어갑니다.

css파일을 만들어서 문서와 연결하는 내용은 다음에 다루도록 하겠습니다.

 

 

 

 

 

 
오늘은 집에서 당근케이크를 만들어 먹었습니다.

 
강의소개 https://bit.ly/33a7nvc