1. CSS란?

- Cascading Style Sheets 

- HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

- 확장자는 .css 



2. CSS 문법

a { bacckground-color:yellow; font-size:16px; }


// a는 선택자 , 선언구분은 세미콜론. 



3. CSS 선택자

(1) HTML 요소 선택자 



(2) 아이디(id) 선택자 // id는 #으로 선언 

- 특정 요소를 선택할 때 사용.

- 여러 요소에 같은 아이디 이름 사용할시 자바스크립트 오류남. 



<style>

# heading { color: skyblue; text-size:150%; }

</style>


<h2 id="heading"> </h2> 



(3) 클래스(class) 선택자 // 클래스는 . 으로 선언 

- 특정 집단의 여러 요소를 한 번에 선택할 때 사용.

- 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택. 


<style>

    .headings { color: limetext-decoration: overline; }

</style>

...

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>



4. CSS주석(comments)

/* */ 



5. CSS를 적용하는 방법

(1) 인라인 스타일(Inline style)


(2) 내부 스타일 시트(Internal style sheet)


<head>

    <style>

        body { background-color: lightyellow; }

        h2 { color: redtext-decoration: underline; }

    </style>

</head>


(3) 외부 스타일 시트(External style sheet)


<head>

   <link rel="stylesheet" href="/examples/media/expand_style.css">

</head>


expand_style.css

body { background-color: lightyellow; }

p { color: redtext-decoration: underline; }


'언어 > HTML_CSS' 카테고리의 다른 글

HTML 확장  (0) 2018.11.06
HTML 입력 양식  (3) 2018.11.06
HTML 공간분할  (1) 2018.11.04
HTML 기본요소  (1) 2018.11.04
HTML 텍스트 요소- 인용구, 문자셋  (0) 2018.11.02

+ Recent posts