css

css는 내부스타일시트, 외부스타일시트, 인라인 스타일 시트등의 세가지 종류가 있습니다. 실제로 외부 css 를 많이 사용하는 평이지만 간단한 스타일은 내부 스타일시트로도 많이 사용하고 있으면 인라인 스타일시트는 가장 우선순우가 높아 꼭 필요할때 편리하게 사용할수있습니다.

 

1. 내부 스타일시트는 문서의 표현 을 위한 명령들을 html 문서안에 스타일 태그로 기재하여 스타일이 html 안에 함께 저장되는 형태입니다.

 

2. 외부 스타일시트는 문서의 표현을 위한 명령들을 따로 css 파일로 저장하여 html 문서에 파일명 연결해주는 형태입니다.

 

3. 외부 스타일시트 형식이 또 하나 있는데 @impot 입니다 이것은 스타일 태그나 스타일 파일 안에 써주어야 합니다. 주로 기본 css 를 따로작성하여 각각의 프로젝트마다 꽂아주는 데 사용합니다. css 가장 윗줄에 넣어야 합니다.

 

4. 인라인 스타일시트는 문서의 표현(디자인 꾸미기) 을 위한 명령들을 html 마크업의 속성으로 직적입력해주는 형태입니다. 

이후에 선택자의 속서ㅇ에 대해 좀더 배우고 나서 스타일시트를 본격적으로 만드는 예제들을 만나 보겠습니다.

 

선택자 (selector)

css에 대한 아무런 지식없이 선택자를 이야기한다는 것은 어렵습니다. 그런데 선택자를 모르는 css 속성을 알아볼수없기때문에 선택자의 의미를 먼저 알아야만 좀 더 쉽게 다가갈 수 없습니다. 선택자란 css로 ul디자인을 할 때 어디를 꾸며 줄까 하는 고민의 대상이 되는 부분을 말합니다. 선택자에는 여러종류가 있는데요, 그중에서 타입 선택자, id 선택자, class 선택자가 가장 중요합니다. 

 

1. 타입 선택자 

- 태그이름을 그대로 가져다 쓰는 선택자 입니다.

 

2. id 선택자

- id로 붙인 이름을 가져다 쓰는 선택자입니다- # 붙여 표기함

 

3. class 선택자 

- class 를 붙인 이름을 가져다 쓰는 선택자  -. 붙여 표기 함

 

4. 전체 선택자 

- 페이지의 모든 요소를 가리키는 선택자입니다. - * 를 붙여 표기함

 

5. 자식 선택자 

- 현재요소 내의 바로 아래 나오는 요소만을 가리키는 선택입니다. IE6 에서는 표현되지 않습니다.

 

6.인접선택자

- 현재 요소밖의 바로 뒤에 나오는 요소 만을 가리키는 선택자입니다. IE6에서는 표현되지 않습니다.

 

7. 속성선택자 

- 마크업의 속성을 선택자로 사용할 수 있습니다. IE6에서는 표현되지 않습니다.

 

8. 가상 클랙스 선택자

-링크 걸린 글자에 스타일을 부여하는 것입니다.

a:link 링크된 글자를 보고만 있을때의 스타일을 주는 선택자.

a:vistied 링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우의 스타일 주는 선택자.

a:hover 링크 걸린 글자에 마우스가 닿았을 경우의 스타일을 주는 선택자 

a:active 링크 걸린 글자가 활성화 되었을 경우의 스타일을 주는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만경우)

a:focus 링크 걸린 글자에 포커스가 생길 경우의 스타일을 주는 선택자 (탭키 등으로 포커스가 나타날 경우)

 

9. 수도 클래스 선택자 

-요소의 세부 조건까지도 나타낼 수 있는 선택자 입니다. (IE6에서 표현 안된다)

:first-letter 요소의 첫 글자

:first-line 요소의 첫줄

:first-child 같은 요소중 첫번째 요소

:last-child 같은 요소중 첫번째 요소 

:before 요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소

:after 요소의 맨뒤에 배치하는 마크업에는 없는 가상요소

 

10. 종속 선택자

-타입 선택자와 아이디 (#) , 클래스(.) 선택자가 결합된 형태

11. 하위 선택자

- 한 선택자 내부에 존재하는 또 다른 선택자

12. 그룹 선택자 

- 선택자들을 쉼표로 구분하여 여럿을 함께 기술하는 것

 

font (서체)

- 글자에 관려된 속성은 글꼴 글자 크기, 글자 굵기, 기울임 여부, 줄 간격, 대소문자 여부, 글자 색상 등 일곱가지로 정리해 보게습니다. 그것들을 CSS 로 따로 표현하는 법을 알아보고 , 특히 그 중 색상을 제외한 여섯가지 속성은 한꺼번에 표현하는 경우가 더 많다.

font-family 글꼴을 인용 부호로 감싸 지정한다.

font-size 수치에 px 등의 단위를 붙여 지정한다(px,%, em*)

font-weight 두께를 bold 또는 수치로 지정한다.(bold normal)

font-style 기울이거나, 바로 세운다. (italic, normal )

font- variant  small-caps 로 작은 대문자를 표현할 수있다. (small-caps,normal)

line-height 줄간격을 수치로 지정한다. (%, em* px)

font 위의 속성들을 한 줄로 기술하는 선택자

#1em은 100%와 같은뜻으로 부모박스에서 설정한 크기와 같은 크기를 의미한다.

* 여섯가지 속성을 많은 사람들은 모두 한꺼번에 쓰기를 즐겨하는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자크기와 글꼴은 결코 생략수 없다.