DHTML CSS Positioning (CSS-P)
CSS는 HTML 요소에 스타일을 추가하는 데 사용됩니다.
예제
주석:대부분의 DHTML 예제는 IE 4.0+、Netscape 7+ 또는 Opera 7+가 필요합니다!
- position:relative
- 요소의 정상적인 위치에 대해 이 요소를 어떻게 정위치하나요?
- position:relative
- 모든 제목을 정상적인 위치에 대해 어떻게 정위치하나요?
- position:absolute
- 요소를 정의하는 데 사용할 수 있는 절대값은 어떻게 사용하나요?
아래에 더 많은 예제를 찾을 수 있습니다.
CSS-P와 함께 사용할 수 있는 속성은 무엇인가요?
먼저, 이 요소는 position 속성(absolute 또는 relative)을 지정해야 합니다.
그런 다음, 다음과 같은 CSS-P 속성을 설정할 수 있습니다:
- left - 요소의 왼쪽 위치
- top - 요소의 상단 위치
- visibility - 요소가 보이거나 숨겨지는지 지정
- z-index - 요소의 쌓임 순서
- clip - 요소 잘라내기
- overflow - 초과된 내용 처리
Position
CSS의 position 속성은 문서 중 특정 요소의 정위치를 제어할 수 있습니다.
position:relative
position:relative 속성은 요소의 현재 위치에 대해 이 요소를 정위치합니다.
아래의 예제는 이 div 요소를 그 정상적인 위치에서 10픽셀 오른쪽으로 정위치합니다:
div { position:relative; left:10; }
position:absolute
position:absolute 속성은 창의 마진에 따라 요소를 정위치합니다.
아래의 예제는 이 div 요소를 그 컨테이너의 왼쪽 마진에서 10픽셀 떨어진 위치로 정위치합니다:
div { position:absolute; left:10; }
Visibility
visibility 속성은 요소가 보이는지 여부를 결정합니다.
visibility:visible
visibility:visible 속성은 요소를 보이게 합니다.
h1 { visibility:visible; }
visibility:hidden
visibility:hidden 속성은 요소를 보이지 않게 합니다.
h1 { visibility:hidden; }
Z-index
z-index 속성은 하나의 요소를 다른 요소 뒤에 배치하는 데 사용됩니다. z-index의 기본 값은 0입니다. 값이 높을수록 우선순위도 높습니다. z-index: -1은 더 낮은 우선순위입니다.
h1 { z-index:1; } h2 { z-index:2; }
위의 예제에서 h1과 h2가 서로 겹치면 h2 요소가 h1 위에 위치합니다.
필터
filter 속성은 텍스트와 이미지에 더 많은 스타일 효과를 추가할 수 있도록 합니다.
h1 { width:100%; filter:glow; }
주석:filter 속성을 사용하려면 항상 요소의 너비를 지정해야 합니다.
위의 예제는 아래의 출력을 생성합니다:
헤더
다양한 필터
주석:background-color 속성이 투명으로 설정되지 않는 한, 일부 Filter 속성은 작동하지 않습니다!
속성 | 파라미터 | 설명 | 예제 |
---|---|---|---|
alpha |
|
요소의 투명도를 설정할 수 있습니다 | filter:alpha( opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) |
blur |
|
요소를 흐릿하게 합니다 | filter:blur( add=true, direction=90, strength=6); |
chroma | color | 지정된 색상을 투명하게 합니다 | filter:chroma( color=#ff0000) |
fliph | none | 수평으로 반전합니다 | filter:fliph; |
flipv | none | 수직으로 반전합니다 | filter:flipv; |
glow |
|
요소를 빛나게 합니다 | filter:glow( color=#ff0000, strength=5); |
gray | none | 검은색과 흰색으로 요소를 표시합니다 | filter:gray; |
invert | none | 반전된 색상과 밝기 값을 사용하여 요소를 표시합니다 | filter:invert; |
mask | color | 지정된 배경색과 투명한 전경색을 가진 요소를 표시합니다 | filter:mask( color=#ff0000); |
shadow |
|
그림자를 가진 요소를 표시합니다 | filter:shadow (color=#ff0000, direction=90); |
dropshadow |
|
그림자를 가진 요소를 표시합니다 | filter:dropshadow (color=#ff0000, offx=5, offy=5, positive=true); |
wave |
|
요소를 파도 모양으로 표시합니다 | filter:wave( add=true, freq=1, lightstrength=3, phase=0, strength=5) |
xray | none | 반전색과 밝기 값이 있는 요소를 검은색과 흰색으로 표시합니다. | filter:xray; |
Background
background 속성은 사용자의 배경을 선택할 수 있도록 합니다.
background-attachment:scroll
배경은 페이지가 스크롤될 때 이동합니다.
background-attachment:fixed
배경은 페이지가 스크롤될 때 이동하지 않습니다.
更多实例
- Visibility
- 어떤 요소를 보이지 않게 할까요? 이 요소를 보이시겠습니까?
- Z-index
- Z-index는 Z-index 순서를 사용하여 다른 요소 뒤에 요소를 배치하는 데 사용될 수 있습니다.
- Z-index
- 이제 요소의 Z-index 순서가 변경되었습니다.
- 커서
- CSS를 사용하여 마우스 포인터의 스타일을 변경할 수 있습니다.
- 필터
- filter 속성을 사용하여 제목의 스타일을 변경할 수 있습니다.
- 이미지에 대한 필터
- filter 속성은 이미지에도 적용될 수 있으며, 여기에는 filter 속성이 적용된 이미지 예제가 몇 가지 있습니다.
- 워터마크
- 페이지가 스크롤될 때 배경 이미지가 움직이지 않습니다.