CSS 선택자

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

 

selector{
  property: value;
}

기본적인 선택자 구성

 

* {           
  color: green;
}

전체 태그 글자색 변경

 

li {
  color: blue;
}

<li></li>태그의 글자색 변경

 

li#special {
  color: pink;
}

<li></li>태그 중 id가 special인 태그의 글자색 변경

 

.red {
  width: 100px;
  height: 100px;
  background: yellow;
}

class가 red인 태그의 속성 변경

 

button:hover {
  color: red;
  background: beige;
}

<button></button> 태그에 마우스를 올렸을 때 속성 변경

 

a[href="naver.com"]{
  color: purple;
}
//<a></a> 태그 중 href가 naver.com인 태그의 속성 변경


a[href$=".com"]{
  color: purple;
}
//<a></a> 태그 중 href가 .com으로 끝나는 태그의 속성 변경

a[href^="naver"]{
  color: purple;
}
//<a></a> 태그 중 href가 naver으로 시작하는 태그의 속성 변경

 

div 관련 태그

/*
  padding: 컨텐츠 안에 들어가는 spacing 
  margin: 컨텐츠 밖에 들어가는 spacing
*/

.red {
  width: 100px;
  height: 100px;
  padding: 2px;
  /*
  padding: 20px 20px 20px 20px;
  시계방향으로 패딩 넣기
  padding: 20px 0px;
  위 아래 양 옆 패딩 넣기
  */

  margin: 20px;
  border-width: 2px;
  border-style: solid;
  border-color: pink;
  /*
  border: 2px dashed red;
  border 한꺼번에 설정하기
  */
 
  background: yellow;
}

 

CSS 태그 더 살펴 보기↓

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS reference - CSS: Cascading Style Sheets | MDN

 

CSS 게임↓

https://flukeout.github.io/ 8단계까지 완료

 

관련 포스팅 링크

https://pridiot.tistory.com/11

[CSS] CSS의 정의와 선택자(Selector)