css: 문법과 적용방식

문법

h1 {
  color: #000000;
  font-size: 24px;
}

선택자(selector[셀렉터]): h1
속성(property[프로퍼티]): color font-size
값(value[밸류]): #000000 24px
선언(declaration[디클레이션]): color: #000000;
선언부(declaration block[디클레이션 블럭]): {color: #000000; font-size: 24px;}
규칙(rule set[룰 셋]): h1 {color: #000000; font-size: 24px;}

주석

메모를 위한 기능 실제 아무런 표현도 되지 않는다.

  /* 내용 */

적용방식

총 4가지의 적용방식이 있습니다. 차근차근 쉽게 알아보도록 하겠습니다.

---

인라인 스타일(inline style)
각 태그에 직접 선언하기 때문에 선택자가 필요없습니다.

<div style="color: #000000;">콘텐츠</div>

---

인터널 스타일(internal style)
head 태그 안에 스타일 태그를 이용하여 셀렉터를 작성하는 방법입니다.

<style>
  h1 {color: #000000; font-size: 24px;}
</style>

---

익스터널 스타일(external style)
head 태그 안에 외부링크를 만들어서 그 안에 css문법을 넣으면 됩니다.

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

---

임포트 스타일(@import)
성능이 좋지 않아 다루지 않습니다.

  @import url('css/style.css')

---