03. css문법 _ 표기법 및 선택자

css는 선택자, 속성, 값으로 구성됩니다.

선택자는 어떤 태그에 css를 입혀줄건지 선언하는 겁니다.
속성은 선택한 태그에서 어떠한 부분을 바꿀것인지,
값은 그 속성에 대해 어떻게 바꿔줄 건지 정해줍니다.
값을 적은 후에는 꼭 뒤에 ;를 붙여 각 속성을 분리해 줍니다.

선택자 selector

선택자에는 태그, id, class가 있습니다.
태그는 말그대로 태그명을 써주면 됩니다.
id선택자의 경우, #을 붙이고 id를 써주면 됩니다.
#idSelector 이렇게 됩니다.
class는 . 뒤에 class명을 써주므로 .classSelector가 됩니다.
예시로 확인합시다.

<h1>나는 태그선택자에요</h1>
<p id="idSelector">나는 id선택자에요</p>
<span class="classSelector">나는 class 선택자에요</span>
 

CSS

<style>
   h1 {color:tomato;font-size:15px;}
   #idSelector {color:skyblue;font-weight:bold;}
   .classSelector {color:purple;font-size:11px;}
</style>
 

나는 태그선택자에요

나는 id선택자에요

나는 class 선택자에요

만약 다른 선택자들이 같은 속성값을 가지게 되는 경우,
각각 하나씩 써줘도 상관없지만
그룹지어 값을 지정해주면 더 편리하고 용량도 줄어듭니다.
각각의 선택자들을 콤마로 구분해 주고 공통 속성값을 줍니다.

<strong>나는 태그선택자에요</strong>
<p id="idSelector">나는 id선택자에요</p>
<span class="classSelector">나는 class 선택자에요</span>
 

CSS

<style>
   h2, #idSelector2, .classSelector2 {color:tomato;font-size:15px;font-weight:bold;}
</style>
 

나는 태그선택자에요

나는 id선택자에요

나는 class 선택자에요

자손선택자

많은 태그들 중에 특정 id나 class를 주는 경우를 제외하고 태그만으로 선택 할 경우, 여러가지 선택방식이 쓰입니다.
그 중 가장 자주 쓰이는 것이 자손선택자입니다. 내 위에 조상을 명시하고 한 칸 뛰고 자손선택자를 입력합니다.
한마디로 '나 ●씨 가문에 ●●입니다' 하는 느낌입니다.
사용법과 예시를 봅시다.

<div class="parent">
   <p>나는 자손선택을 받았지</p>
</div>
<p>난 선택 못받았어</p>
 

CSS

<style>
   div.parent p {color:tomato;font-size:18px;font-weight:bold;}
</style>
 

나는 자손선택을 받았지

난 선택 못받았어

자식선택자

자식은 내 바로 밑에 달린 자식태그만 선택하기 때문에 자손태그와는 차별점이 있어야 하겠죠.
자식을 선택할때는 >를 사용합니다.
부모 > 자식 이렇게 쓰입니다.

<div class="parent2">
   <p>나는 자식이라 상속을 받아</p>
   <div>
	  <p>난 자손이라 상속을 못받아</p>
   </div>
</div>
 

CSS

<style>
   div.parent2 > p {color:tomato;font-size:18px;font-weight:bold;}
</style>
 

나는 자식이라 상속을 받아

난 자손이라 상속을 못받아

* 개인적인 공부를 정리하는 블로그입니다.