CH4- sec2 태그를 표현하는 CSS와 Advanced CSS3

<section 02 : css의 주요 속성과 값> 

참고) www.w3.org/TR/CSS21/

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

background, border,color,display,float,font,padding,position,pause,volume 등등이 있다

 

1. 색상과 배경지정

-color속성: 문자열 글자색

-background-color 속성 : 배경색 지정

-background-image 속성 : 태그의 배경 이미지 지정

-background-repeat 속성 : 배경이미지가 있는 경우, 이것을 반복해서 화면에 표시할 지 여부 결정

-background-attachment 속성 : 배경 이미지가 있을 때, 화면의 스크롤이 이동하더라도 이미지를 고정적으로 보여줄 것인지의 여부

-background-position 속성 : 배경 이미지가 있을 경우, 이미지의 초기위치를 지정

-background 속성 : 위의 속성 값을 한번에 같이 간단히 표기하기 위해 사용함.

 

2. 폰트에 지정

-font-family 속성 : 폰트의 종류

-font-style 속성 : 폰트 스타일

-font-variant 속성 : 소문자는 모두 대문자

-font-weight 속성 : 폰트의 굵기

-font-size 속성 : 폰트크기

 

3. 텍스트에 지정

-text-indent 속성 : 첫번째 줄의 들여쓰기

-text-decoration 속성 : 장식(밑줄,윗줄,취소선) 

-text-align 속성 : 맞춤

-letter-spacing 속성 : 글자간격 지정 

-word-spacing 속성 : 단어 간격 지정

-text-transform 속성 : 영문자의 첫 글자를 대문자로 변환하거나 영문자의 대소문자의 변경을 지정

-white-space 속성 :  태그 내의 여백을 처리하는 방법 

4. 테이블 지정 : 레이아웃 정의

- vertical-align 속성 : 테이블 각각의 셀의 수직 맞춤을 결정

-text-align 속성 : 수평맞춤

5. 테두리에 지정

-separated 보더모델 : 각각의 셀로 구성

가

나

다

 

-collapsing 보더모델 : 셀들이 연속되어 한 덩어리로 합쳐진 듯한 모양

가

나

다

 

-border-collapse 속성으로 지정 : 테이블의 테두리 모델을 선택

 

6. 박스모델지정

-content(내용) 영역과 선택적인 영역인 padding, border, margin 영역이 있다

 

7. 가시성과 위치

-display 속성 : CSS태그를 화면에 표시할지 여부와 표시한다면 어떻게 표시할지를 지정하는 속성

- visibility 속성 : 태그를 화면에 표시할지의 여부 결정

-position 속성 : 태그의 배치를 지정

-z-index 속성 : 태그들이 겹쳤을 떄 어떤 태그가 앞에 표시되고 뒤에 표시되는지의 태그간의 순서 결정

-float 속성 : 태그를 유동적으로 배치

-clear 속성 : float 속성을 해제