본문 바로가기

'.' Programs/CSS

 (101)
Text-TransForm Text-TransForm 개요 : 이 속성은 요소 글자의 대/소문자를 전환한다. 대문자를 소문자로 변경하거나, 소문자를 대문자로 변경할 수 있고, 단어의 첫 글자만 대문자로 변경할 수 있다. 물론, 대소문자 구분이 없는 한글엔 사용할 수 없다. 정의 text-transform 설명 값 capitalize | uppercase | lowercase | none | inherit 기본값 none 적용대상 모든 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 capitalize 단어의 첫번째 글자를 대문자로 지정한다. uppercase 단어의 모든 글자를 대문자로 지정한다. lowercase 단어의 모든 글자를 소문자로 지정한다. none 정상적으로 지정한다. 대/소문자 변형을 지정하지 않는..
Text-Shadow Text-Shadow 개요 : 이 속성은 요소의 글자에 그림자 효과를 지정한다. 글자의 그림자는 화면의 배치에 영향을 주지 않는다. 정의 text-shadow 설명 값 none | [ || ?,]* [ || ?] | inherit 기본값 none 적용대상 모든 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 그림자 색상을 지정한다. 그림자 크기나 간격(offset) 지정한다. inherit 부모 요소의 값을 상속 하도록 지정한다. 그림자 효과를 쉼표(,)로 분리해서 여러번 지정 할 수 있다. 그림자 효과의 크기는 박스의 크기를 벗어날 수 있으나, 배치에 영향을 주지 않는다. 두개의 는 각각 수평(x축) 거리와 수직(y축) 간격을 지정한다. 세개의 는 각각 수평(x축) 거리와 수직(y축)..
Direction Direction 개요 : 이 속성은 요소가 위치할 가로 방향를 지정한다. 글자나 이미지와 같은 인라인 요소 뿐만 아니라, 테이블 셀 요소의 방향도 지정할 수 있다. 정의 direction 설명 값 ltr | rtl | inherit 기본값 ltr 적용대상 모든 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 ltr 왼쪽에서 오른쪽으로(left-to-right) 지정한다. rtl 오른쪽에서 왼쪽으로(right-to-left) 지정한다. inherit 부모 요소의 값을 상속하도록 지정한다. -----------------------------------------------------------------------------------------------------------------..
Color Color 개요 : 이 속성은 요소의 색상(전경색)을 지정한다. 요소에 포함된 글자 색상을 지정하며, border-color 에게 상속된다. 정의 color 설명 값 | inherit 기본값 화면 표시 장치의 기본 스타일 참조 적용대상 모든 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 색상을 지정한다. inherit 부모 요소의 값을 상속하도록 한다. 예제 View Source : 문단의 글자색을 빨강으로 지정한다. 문단의 글자색을 녹색으로 지정한다.
Background-Color Background-Color 개요 : 이 속성은 배경색을 지정한다. 배경색은 내용 영역과 패딩, 그리고 해당 요소의 테두리 영역까지 입혀진다. 정의 background-color 설명 값 | transparent | inherit 기본값 transparent 적용대상 모든 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 색상을 지정한다. transparent 투명한 색상을 지정한다. inherit 부모 요소의 값을 상속하도록 지정한다. View Source : 배경색을 지정합니다. 접근성을 보장하려면 색상(color)과 함께 지정하세요. Result :
Background-Image Background-Image 개요 : 이 속성은 요소의 배경 이미지를 지정한다. 배경 이미지의 경로는 절대 경로와 상대 경로를 사용할 수 있다. 절대 경로 :(http://site.url)/path/image.gif - (http://site.url)은 생략 가능 상대 경로 : path/image.gif background-repeat 값에 따라 배경 이미지는 무한히 반복되거나, 어떤 한 축에 대해서 반복되거나, 또는 전혀 반복되지 않는다. 이러한 반복의 시작은 background-position 값으로 정한다. 정의 backgound-image 설명 값 | none | inherit 기본값 none 적용대상 모든 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 url 경로를 지정한다..
Background-Repeat Background-Repeat 개요 : 이 속성은 요소의 배경이미지가 반복되는 방향을 지정한다. 이러한 반복의 시작은 배경이미지 반복 값으로 정한다. 정의 정의 설명 값 repeat | repeat-x | repeat-y | no-repeat | inherit 기본값 repeat 적용대상 모든 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 repeat 수평과 수직으로 반복된다. repeat-x 수평으로 반복된다. repeat-y 수직으로 반복된다. no-repeat 반복하지 않고 한개의 이미지만 나타난다. inherit 부모 요소의 값을 상속하도록 지정한다. View Source : 배경 이미지가 반복되지 않도록, 즉 한번만 출력되도록 지정합니다. Result : View Sourc..
Background-Position Background-Position 개요 : 이 속성은 요소의 배경 이미지의 시작 위치를 지정한다. 이 속성은 배경 이미지 반복이 시작되는 지점이나, 반복되지 않으면 이미지 자체의 위치를 나타낸다. 백분율 값은 그 요소 내부의 저점뿐만 아니라, 원래 이미지 자체의 동일한 지점도 정의한다. 정의 background-position 설명 값 | ] | [ [top | center | bottom] [left | center | right] | inherit 기본값 0% 0% 적용대상 블럭레벨과 대체된 요소 상속 안됨 백분율 사용 불가 미디어 visual 값 값 설명 '백분율(x축) 백분율(y축)' 쌍으로 수평(x축) 위치와 수직(y축) 위치를 지정한다. '길이(x축) 길이(y축)' 쌍으로 수평(x축) 위치와..

티스토리툴바