CSS 작성 방법

선택자 {속성 : 값;}

1. 내장방식 : HTML style 태그 내부에 작성

<style>
      div {
        color: red;
      }
</style>

2. 인라인방식 : 태그 내 style 속성에 작성

<div style="color: red"></div>

3. 링크방식 : link 태그로 외부의 CSS파일 병렬 연결

<link rel="stylesheet" href="/main.css">

4. @import방식 : 링크 방식으로 연결된 CSS에 직렬로 다른 CSS를 연결

@import "/component.css";

선택자 (selector)

• 전체 선택자 : *

• 태그 선택자 : div, span, p 등

• 클래스 선택자 : .class명

• 아이디 선택자 : #id명

• 일치 선택자 : div.class명

• 자식 선택자 : div > span p > .class명

• 하위 선택자 : div .class명 .class명 .class명2

• 형제 선택자 : .class명 + 바로 다음태그

• 일반형제 선택자 : .class명 ~ 다음태그들 중 하나
  
  
  

가상 클래스 선택자

---

1. 콜론을 2번 쓰는 가상 클래스 선택자

.class명::가상클래스선택자 { }
div::가상클래스선택자 { }

• hover : 마우스를 요소 위에 올림

• active : 마우스로 요소를 클릭하고있음

• focus : 요소가 포커스 된 경우 (input 태그 등)
  
  

2. 콜론을 1번 쓰는 가상 클래스 선택자

.class명:가상클래스선택자 { }
div:가상클래스선택자 { }

• first-child : 형제 요소중 첫째

• last-child : 형제 요소중 막내

• nth-child(n) : 형제 요소중 n째

• not(선택자) : 선택자가 아닌 요소 전부 선택
  
  
  
  

가상 요소 선택자

---

• before : 요소 내부 '앞'에 내용 삽입

.class명::before {
  content: "내용";
}

• after : 요소 내부 '뒤'에 내용 삽입

.class명::after {
  content: "내용";
}

속성 선택자

---

• type 속성을 지정함

[type] {
  color: red;
}

• type 속성 내의 "password" 라는 속성값까지 지정함

[type:"password"] {
  color: red;
}