[웹 프로그래밍] CSS(Cascading Style Sheet)

 CSS(Cascading Style Sheet)

(1) 디자인의 효과적인 관리

(2) 웹 디자인의 표준화

(3) version : 1.x -> 2.x -> 3.x

(4) 사용방법

1) Inline Style

- 태그 안에서 직접 사용하는 방식(즉흥적)

-style이라는 속성을 통해서 사용

2) Internal Style

- 

3) External Style

- 별도의 .css 파일을 만ㄷ르어서 불러다 사용하는 방식

- 여러 페이지에서 재사용 가능

(5) 문법

Selector -> 디자인이 적용될 위치 선택

Selector {property:value; property:value;}

(6)property 정리

1) font관련

font-family : 글꼴

font-size : 크기

font : 여러개의 속성을 하나로 묶어서 상요할때

font-style : normal, italic, oblique

font-weight : 굴자 굵기

line-height : 줄간격

font-variant : 텍스트를 작은 대문자로

2)색상 및 이미지 관련된

color : 글자색

background-color : 배경색

background-image : 배경 이미지의 반복방법지정

background-attachment : 배경이미지의 고정 여부

background-position : 배경이미지의 시작위치

3) Text 관련

text-transform : 대문자를 소문자로 소문자는 대문자로

text-align : 수평적인 정렬 left right center

text-indent : 문단의 들여쓰기

text-decoration : 텍스트에 더해진느 여러가지 장식

vertical-align : 위아래 가운데 수직적인 정렬 top middle bottom

line-height

4) 여백 관련

- 가장 바깥쪽 여백

margin-top, margin-left, margin-rignt, margin-bottom

- 가장 안쪽 여배

padding-top, padding-left, padding-rignt, padding-bottom

- 경계선 여백 (바깥쪽과 안쪽의 중간 여백)

border-top, border-left, border-right, border-bottom

border-width, border-style, border-color

(7) 상속

1) 독립적 상속

- 하나의 태그가 다른 태그를 포함할 경우, 그 포함된 태그는 포함하는 태그

스타일의 영향을 받는다.

- 만약 상속을 거부할 경우, 다시 포함된 태그에서 프로퍼티를 지정해주면 된다.

2) 선택적 상속

- A태그안에 B태그를 포함시켜 정의하는 방식으로 

B태그는 A채그 영역에서만 유효한 값을 지닌다.

ex) 

h1 span{} : h1안에있는 span 태그만 사용하겠다는 선택적 상속

(8) 원하는 디자인 골라서 사용하기

1) Class

ex) h1.bl{color:blue;}

-> h1 class b1의 글자색은 파랑색으로 한다.

2) id

ex) h1#b1{color:blue;}