CSS의 개념 및 특징, 사용법

CSS의 개념 및 특징, 사용법

CSS, Cascading Style Sheet

- HTML의 요소(태그)에 서식을 적용하는 언어

- 디자인 담당

- 독립사용이 불가능. HTML언어에 기생하는 언어

CSS 특징

1. 골격(태그 + 데이터)과 서식을 분리

2. 서식 관련 기능 강화

CSS적용방법

1. Inline Style Sheet, 인라인 스타일 시트

-HTML 태그에 style 속성을 사용해서 적용하는 방식

- style="CSS구문"

- 특정태그 1개에만 적용하는 서식

- 단점 : 서식코드를 재사용할 수 없다.

- 장점 : 가독성 높음

- (*)재사용이 필요없는 서식을 적용하는 용도.. 1회용 서식

  ex) <p><font color ="red" size = "10">문단입니다.</font></p>

2. Embeded Style Sheet, 내부 스타일 시트

- 페이지 상단에 <style> 태그를 사용해서 적용하는 방식

- 여러개의 태그에 모두 적용하는 서식

- 현재 페이지 내에서만 재사용됨.(페이지 바뀌면 불가능)

- 장점 : 서식코드를 여러번 재사용 가능

- 단점 : 가독성 낮음

- 현재 페이지에서만 재상용되는 서식이 필요할 때

ex) 

<style>

/*div{color :blue; font-size:50pt; background-color:yellow;};*/

      div{font-size : 2rem;}

</style>

3. External Style Sheet, 외부 스타일 시트

- 서식코드를 별도의 파일로 제작해서 적용하는 방식.

- *.css 

- 장점 : 재사용성이 가장 높음

- 단점 : 가독성 최악

- 모든 페이지에 공통으로 적용해야하는 서식이 필요할 때

  ex) 

  <!-- 외부 CSS파일을 현재 HTML 페이지에 적용해라.. -->

  <link rel="stylesheet" href="/WebClientTest/css/ex01.css">