CSS를 작성하다 보면 내가 적용시키고 싶은 대상만 올바르게 선택해야 하는데 코딩하다 보면 헷갈리는 경우가 많아 정리를 해보고 싶었다.

타입 선택자

선택한 모든 태그의 대한 스타일을 적용시킨다.

<stlye> 
	a { color: red
    	}
</stlye>

class 선택자

지정한 클래스명으로 스타일을 적용시킨다.
클래스의 경우 id와 다르게 한 번뿐만 아니라 두 번 이상 작성할 수 있기 때문에 모든 클래스에 대한 스타일을 적용시킬 수 있다.

<stlye> 
	.클래스명 { color: red
    	}
</stlye>

id 선택자

id로 스타일을 적용시킨다.

<stlye> 
	#id명 { color: red
    	}
</stlye>

전체 선택자

말그대로 모든 요소에 스타일을 적용시킨다.

<stlye> 
	* { color: red
    	}
</stlye>

속성 선택자

태그에 적용된 속성을 선택해서 스타일을 적용시킨다.

<stlye> 
	* { color: red
    	}
</stlye>

유용한 사이트👍 (CSS 선택자로 게임하기)
https://flukeout.github.io/

단위

오늘 개인 페이지를 리팩토링 했는데 반응이 생각처럼 움직이지 않아서
강의를 보고 나서 나의 코드를 보니 px가 너무 생각없이 쓰고 있더라
그래서 단위를 다시 한번 정리 가야 할 거 같아 정리해보았다.

절대 단위

px

문제의 그 녀석 px다 절대값이라서 변하지가 않는다.

pt

1px = 0.75pt

상대 단위

%

부모를 기준으로 자식의 넓이를 정하는 단위

rem(root em)

root? 그게 뭐야
여기서 root는 최상위를 말하는 건데
요소의 최상위인 html를 뜻한다.
그래서 html의 기본 font-size인 16px를 기준으로한다.

em

부모의 font-size를 기준으로 하는 단위

vh,vw

vh는 Viewport height의 약자
vw는 Viewport width의 약자
Viewport를 기준으로 하는 단위

여기서 Viewport란 ? 실제로 보이는 화면이다
만약 화면이 전체의 높이가 900px이라면
1vh는 9px이 된다.