CSS

Soyeon Won·2021년 9월 24일
1
post-thumbnail

CSS Syntax

selector { property: value; }

p {
    color: pink;
}

CSS 파일 연결하기

<head>
  <title>World</title>
  <link href="./style.css" rel="stylesheet">
</head>

CSS Selector

*

  • 모든 요소 선택
* {
}

Class

.class {
}

ID

  • id값 중복 사용 금지
#id {
}

가상선택자

  • :nth-child(n)
div:nth-child(2) {
   font-size:16px
}
  • event
div:hover {
   font-size:16px
}
/* 선택자 위에 마우스 커서가 있을 때 */

div:active { font-size:16px }
/* 선택자가 클릭된 상태일 때 */

div:focus { font-size:16px }
/* 선택자가 마우스나 키보드에 의해 선택되었을 때 */

div:visited { font-size:16px }
/* 선택자(링크인 경우)가 이미 방문한 사이트일 때 */

[attribute] 속성 선택자

  • 특정 속성값을 가지고 있는 요소를 선택
a[target] { 
 color: red; 
 } 
 /* a 태그에 target이라는 속성을 가진 요소를 선택 */

a[target="_blank"] { color: red; }
/* a태그에  target=”_blank”라는 속성을 가진 요소를 선택 */

div[class~="apple"] { color: red; }
/* apple이라는 class를 가진 요소를 선택 */

div[class^="apple"] { color: red; }
/* apple이라는 class로 시작하는 요소를 전부 선택 */

div[class$="apple"] { color: red; }
/* apple이라는 class로 끝나는 요소를 선택 */

div[class*="apple"] { color: red; }
/* apple이라는 class를 가진 모든 요소를 선택 */
profile
Frontend

0개의 댓글