2010. 4. 3. 04:24

값과 단위

공부/Cascading Style Sheets
색상

브라우저에서 인식할수있는 이름있는 색상
rgb(0~100%, 0~100%, 0~100%)
rgb(0~255, 0~255, 0~255)
#000000~#FFFFFF

길이

절대길이단위

인치(in)
일반적으로 미국에서 사용되는 인치
센티미터(cm)
일반적으로 세계적으로 사용되는 센티미터로 1인치는 2.54센티미터이고, 1센티미터는 0.394인치이다.
밀리미터(mm)
일반적으로 세계적으로 사용되는 밀리미터로 1인치는 25.4밀리미터이고, 1밀리미터는 0.0394인치이다.
포인트(pt)
인쇄술의 표준 길이로 1인치는 72포인트이다. 12포인트로 지정된 텍스트의 대문자 높이는 1/6인치이다.
파이카(pc)
인쇄에서 사용하는 용어로, 1파이카는 12포인트이다. 1인치는 6파이카이다.

상대길이단위

em (em-height)
em은 font-size의 값과 동일한 값으로 설정된다. 만약 폰트 크기에 em 단위가 사용될경우 부모요소의 폰트 크기를 기준으로 em이 계산된다.
ex (x-height)
사용하는 폰트의 소문자 x의 높이를 기준으로 한다.
px (pixel)
픽셀을 기준으로 한다.

URL
절대경로
url(프로토콜://서버/경로명)

상대경로
url(경로명)

url과 괄호 사이에 공백이 있어서는 안됀다.
예) url (경로명)

키워드
어떤 값을 특정한 단어로 설명할때 사용한다.
예) none, underline, normal 등

inherit
속성의 값을 부모 요소의 값과 동일하게 만든다.

각도 값
음수값이 허용되며 각각의 단위는 0~360사이의 도로 변환된다.
도(deg)
그레이드(grad)
라디안(rad)

시간값
음수값이 허용되지 않으며, 100ms는 0.1s와 동일하다.
밀리초(ms)
초(s)

주파수 값
음수값이 허용되지않으며, 값의 단위는 대소문자를 구분하지 않는다.
헤르츠(Hz)
메가헤르츠(MHz)

'공부 > Cascading Style Sheets' 카테고리의 다른 글

텍스트 속성  (0) 2010.04.09
폰트  (0) 2010.04.04
상속  (0) 2010.04.03
구체성  (0) 2010.04.03
가상클래스와 가상요소 선택자  (4) 2010.04.02
Posted by terebyte
2010. 4. 3. 03:50

상속

공부/Cascading Style Sheets
조상 element에 특정 속성이 선언되면 더이상 상속받을 element가 없을때까지 모든 자손 element에 상속이 된다.


하지만 몇 가지 속성은 상속되지 않는다.
예) margin, padding, background, border 등

상속이 될경우 구체성이 아예없어서 0조차 가지지 않는다. (구체성 0,0,0,0보다 아래)

캐스케이드

모든 선언을 중요도에 따라 분류한다.
선언에는 author, reader, user agent 세가지의 출처가 있다.
일반적인상황에서는 author 가 reader보다 우선한다. 하지만 !important로 선언된 reader 의경우는 author를 포함한 다른 스타일보다 우선한다. user agent는 기본적으로 author와 reader보다 우선순위가 낮다.
구체성에 따라 우선순위를 분류한다.
선언이 뒤에위치할수록 우선순위가 높다.

'공부 > Cascading Style Sheets' 카테고리의 다른 글

폰트  (0) 2010.04.04
값과 단위  (0) 2010.04.03
구체성  (0) 2010.04.03
가상클래스와 가상요소 선택자  (4) 2010.04.02
문서 구조 선택자  (0) 2010.04.02
Posted by terebyte
2010. 4. 3. 03:35

구체성

공부/Cascading Style Sheets
선택자의 구체성은 0,0,0,0처럼 4개의 부분 값으로 표현된다.

선택자에 있는 모든 id 속성값에 0,1,0,0 값이 추가된다.
선택자에 있는 모든 class 속성값과 기타 속성, 가상 클래스에 0,0,1,0 값이 추가된다.
선택자에 있는 모든 요소와 가상 요소에 0,0,0,1 값이 추가 된다.
조합자나 전체 선택자는 구체성에 아무런 영향을 주지 못한다.

구체성의 값은 좌측에서 우측으로 선별된다.

inline style은 1,0,0,0 이 적용된다.


important 선언

important선언은 일반적인 선언과 비교할때 항상 우위에 있으며, important선언 끼리의 비교는 구체성에따라 결정된다.
예) p.death { color : black !important; background : red;}
 

'공부 > Cascading Style Sheets' 카테고리의 다른 글

값과 단위  (0) 2010.04.03
상속  (0) 2010.04.03
가상클래스와 가상요소 선택자  (4) 2010.04.02
문서 구조 선택자  (0) 2010.04.02
선택자  (0) 2010.04.02
Posted by terebyte

티스토리툴바