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

Frontend

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...