CSS {기본문법, 주석, 선언방식, 선택자 }

• 링크 방식 만 거의 사용하고, 나머지 방식은 정말 급할 때만 사용한다.
• 정말 급할 때라는 말은 예를 들어 시연을 하러 갔는데, 갑자기 css 일부가 동작하지 않는 상황일 때 같은 상황을 말한다. 즉, 일반적인 상황에서는 모두 링크 방식을 활용하게 된다.
• 그 이유는 자바에서 함수와 변수를 사용하는 것과 같은 이치다. 만약 링크 형식을 사용하지 않았다면 페이지마다 css 를 고쳐주어야 하는 아주 힘겨운 일이 되었을 것이다. 

• 선택자에는 다양한 종류들이 있다. 
• 다양한 선택자들을 잘 알고 활용해야 한다. 

• 선택자는 크게 기본 선택자, 복합 선택자, 가상클래스 선택자, 가상 요소 선택자, 속성 선택자로 나뉜다. 
• 기본 선택자는 우리가 가장 많이 사용하는 선택자들이다. 

• 일치 선택자와 형제 선택자만 조금 더 이해하고 가면 좋겠다. (나머지는 매우 직관적이니)
• 일치 선택자는 여러 기본 선택자의 조건을 만족하는 요소를 선택하는 것이다. 

• 예를 들어 위와 같은 html 이 있다고 생각해보자, 일치 선택자를 활용하여 li 태그 중에서 class 와 id 가 red 인 요소들만 색을 적용하고 싶다면 다음과 같이 css를 작성해줄 수 있다. 

• css 가 정상적으로 적용되는 것을 볼 수 있다. 
• 이번에는 형제 선택자를 알아보자. 

• + 형제 선택자를 사용하면 바로 옆에 있는 형제만 선택되어 css 가 적용되는 것을 알 수 있다

• ~ 형제 선택자를 사용하면 이어지는 모든 형제들을 선택하여 css가 적용되는 것을 알 수 있다 

 

• > 와 " " 공백으로 자식, 하위 선택을 할 수 있습니다. 
• 예시를 볼까요?

•  div 의 자식 ul 요소만 css가 적용된 것을 볼 수 있습니다. 
• 여기서 말하는 '자식'이라는 말은 직계자식을 의미하는 말입니다.
• 예시를 통해서 살펴보겠습니다.

• html이 위와 같을 때 출력되는 화면에서 css가 적용되는 것은 div 바로 아래 하위로 ul 요소를 자식으로 갖는 요소들 뿐인 것을 알 수 있습니다. 

• 이번에는 하위 선택자를 살펴보겠습니다. 
• 하위 선택자는 " " 공백으로 사용할 수 있습니다. 

• div 요소 바로 직계로 ul 이 있지 않아도 div 하위에 ul 이 있으면 css가 적용되는 것을 볼 수 있습니다. 

• 상태 선택자를 통해 요소의 상태에 따라 다양한 효과를 적용해줄 수 있다. 

 

• child 방식으로 구조 선택자를 사용했다. 
  child 방식은 부모 자식 관계가 있을 때 자식에게 사용하는 선택자이다. 

• nth-of-type 은 해당하는 몇 번째의 태그에 내가 원하는 속성을 지정해줄  수 있다. 
• nto-of-child 와 마찬가지로 first와 last of type 도 사용할 수 있다. 

• 대괄호를 사용하여 속성으로 선택할 수 있다. 

• h1 태그를 inline-block 으로 설정하여 css 를 적용하였는데, h1 태그 안에 span 태그를 사용하여 css 를 적용하여도 됩니다.