CSS 기본속성에 대해 알아보자

  • html

<ol>
    <li id="special">First</li>
    <li>Second</li>
  </ol>
  <button>Button 1</button>
  <button>Button 2</button>
  <div class="red"><button></button></div>
  <div class="blue"></div>
  <a href="naver.com">Naver</a>
  <a href="google.com">Google</a>
  <a>Empty</a>
  • CSS

* {
  color: green;
} /*universal css*/

li {
  color: blue;
} /* li만 blue*/

#special {
  color: pink;
} 
/* # : id가 special인 것*/
li#special {
  color: pink;
} 
/* # : li중 id가 special인 것*/

.red {
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 20px;
  border:2px dashed red;
  background: yellow;
} /* . : 클래스가 red인 것 */

button:hover {
  color :red;
  background: beige;
  
} /* 마우스를 올렸을때 색깔*/
/*[]는 선택자이다*/
[href]{
  color:green
}/* href속성있는 애들은 green*/
a[href]{
  color:purple;
} /* href속성이 있는 a태그애들만*/

a[href^="naver"]{
  color:red;
} /* href속성이 naver로 시작하는  애들만*/
  • Output

CSS

댓글 쓰기