CSS필수 가상클래스

💡마우스 오버 효과
(마우스 오버 이펙트(hover) & 트랜지션(transition))

📌마우스 오버 이펙트

 a{
 color: #000;
 transition: 0.5s;
 }
 
 a:hover{
 color: dodgerblue;
 text-decoration: underline;
 }

• hover이펙트를 주고 싶다면 tag 이름 뒤에 :hover를 적는다.
• transition: n초동안 애니메이션 효과를 주라는 뜻이다.(주로 0.5s를 사용)
  -transition속성은 :hover가 아닌 곳에 넣어야 마우스를 올리고 뺄 때 모두 적용된다.
• a tag는 body tag의 color를 따르지 않으므로 따로 지정해주어야한다.
• text-decoration: none; 해서 밑줄 없앨 수 있음
• jQuery 사용시 주의사항: ""안이 비어있으면 제이쿼리가 작동하지 않는다. 안에 쓸 내용이 정해지지 않았다면 #none을 적어두자.

<a href = “#none”></a>

📌hover 사용 버튼 생성 예시

▶️html

<a href = "http://www.naver.com">네이버</a>

▶️css

a{ 
	color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    width: 120px;
    display: inline-block;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    transition: 0.5s;
 }
  a:hover{
  	background-color: #000;
    color: #fff;
 }

💡순서를 만드는 가상클래스

📌목적: class name을 일일이 사용하지 않고 원하는 요소를 선택하고 싶을 때 사용한다.(간결한html, 짧은css를 위해)
e.g.) nth-child, nth-of-type

▶️html

<div classs = “box”>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

▶️css

.box{
	border: 5px solid #000;
    text-align: center;
}

.box div{
	border: 5px solid #000;
    margin: 10px;
    width: 200px;
    height: 200px;
    display: inline-block;
}
.box div:nth-child(2){
	color: red;
}

• text-align: center;을 부모요소에 넣어줘야 가운데로 간다. 또, 이 경우 margin auto는 절대 적용되지 않는다.
• nth child는 tag의 종류를 가리지 않아서 여러 개의 div들 위에 갑자기 h2 태그를 추가하면 요소가 하나씩 밀린다. 따라서 이럴땐 .box div:nth-of-type()사용한다. 그러면 css가 해당 요소의 type을 확인한다.