기초

작성법

html 파일 내

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

html 태그 내

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

개별 css 파일 (link 필요)

h1 {
    color: red;
}

스타일 속성
무수히 많은 스타일 속성 존재

선택자

태그

<style>
  p{
    color:blue;
  }
</style>
<p>안녕하세요.</p>

id(#)

<style>
  #title{
    color:green;
  }
</style>
<h1 id="title">아이디가 title 입니다</h1>

class(.)

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p> 

태그 속성(태그[속성이름])

<style>
  a[target] {
    color: red;
  }
</style>
<a href="#">이동</a>
<a href="#" target="_blank">새 창으로 이동</a>

target은 클릭 시 활성화

문자열 속성 (속성="문자열" or 속성*="문자열")

<style>
  div[class*="my"] {
  color: red;
  }
</style>
<div class="my">MY</div>  
<div class="my-class">MY CLASS</div>  

일치 (선택자선택자) 띄어쓰기X

<!-- red라는 클래스를 가진 p태그 -->
<style>
  p.red {
  color: red;
  }
</style>
<p>P</p>
<p class="red">P.red</p>
<div class="red">div</p>

그룹 (,)

p, #title, .red{
  color:red;
} 

자식 (>)

#title > .red{
  color:red;
} 

가상 요소

<style>
  /* p태그의 전 */
  p::before {
  content: "나는";
  }
  /* p태그의 후 */
  p::after {
  content: "입니다.";
  }
</style>
<p>홍길동</p>

링크 가상 클래스

<style>
  a:link {
  /* 한 번도 방문한 적이 없는 링크 */
  color: blue;
  }
  a:visited {
  /* 한 번이라도 방문한 적이 있는 링크 */
  color: red;
  }
</style>
<a href="www.naver.com">a_test</a>

클릭 전

클릭 후

---

동적 가상 클래스

<style>
  p:hover{
  color:red;
  }
  button:active{
  color:red;
  }
</style>
<p>hover test</p>
<button>active test</button>

hover test에 마우스 올릴 시

active test클릭 시

---

입력 요소 가상 클래스

<style>
  /* 입력창 깜빡임 커서 색깔 */
  input:focus {
  	color:red;
  }
  input:checked {
  	color:red;
  }
  input:disabled {
  	color:red;
  }
</style>