CSS - 의미, 정의, selector

웹사이트 스타일링은 크게 3가지로 나눌 수 있음.

1. Authoe style - 개발자가 웹사이트를 만들 때 사용하는 CSS파일
2. User style - 웹사이트를 이용하는 유저가 취향에 맞게 사용하는 것 ex) 다크모드, 폰트 사이즈 등
3. Browser - 브라우저 상에서 기본적으로 지정된 스타일링

• 스타일링 우선순위 : Author style > User style > Browser
• 예외적으로 이 모든 우선순위를 제치고 최우선시 되는 !important가 있지만 최대한 사용하지 않는게 좋음(html에서 박스구조가 잘못되었거나 할때 주로 사용함)

- selector

Universal : *
type : Tag
ID : #id
Class : .class
state : :
Attribute : []

1. Universal : 모든 태그를 선택
2. Type : 지정한 모든 태그를 선택
3. ID : ID로 지정된 태그를 선택
4. Class : 지정된 class를 가진 태그를 선택
5. state : 태그가 어떠한 상태에 놓였을 때 스타일링 되는 것 ex) button : hover
6. attribute : 어떠한 속성값을 가진 태그를 선택해서 스타일링 ex) a[href]
   • 속성값의 내용으로도 나눠서 스타일링이 가능하다
     a[href="naver.com"] - naver.com이 들어있는 a 태그만 스타일링
     a[href^="naver"] - ^를 붙여주면 naver로 시작되는 a태그만 스타일링
     a[href$=".com"] - $를 붙여주면 .com으로 끝나는 a태그만 스타일링

더 구체적으로 명시된 스타일링이 우선시 된다!
universal에서 스타일링 된 것 보다 type에서 지정된 스타일링이 우선시!

(padding vs margin)

padding : 컨텐츠 내부에 들어가는 spacing
margin : 컨텐츠 외부에 들어가는 spacing

하나의 코드로 여러 방향으로 padding이나 margin을 스타일링 하고 싶을때 시계방향으로 적어주면 가능하다.
ex) padding : top right bottom left

• 위, 아래 or 오른쪽, 왼쪽을 묶어서도 가능
  ex) margin : 20px 0px ➡️ 위 아래에만 20px씩 마진이 들어감!

---

CSS의 가능한 속성값 ➡️ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Selector 연습용 게임 ➡️ https://flukeout.github.io/