CSS_Day04

가상 클래스

/* 마우스 클릭시 반응 */
input:focus {
	background-color: beige;
}
/* 마우스 커서가 닿일시 반응*/
label:hover {
	background-color: hotpink;
}
/* 클릭하여 페이지 이동시 반응*/
 #intro:target {
    background-color:#0069e0;  /* 배경색 - 파란색 */
    color:#fff;  /* 글자색 - 흰색 */
  }
/* 값을 변경하지 못함*/
<input id="tel" name="tel" type="tel" value="010-2131-1231" disabled>

 /* container의 자식으로 처음나온 속성  */
  .container :nth-child(1){
    background-color: burlywood;
  } 
  /* container의 자식으로 처음나온 p */
  .container p:nth-child(1){
    background-color: burlywood;
  } 
  /* container의 type으로 처음나온 p */
  .container p:nth-of-type(1){
    background-color: red;
  }

가상 요소

 

반응형 웹

미디어 쿼리