오랫동안 HTML을 작성해 온 사람들은 그 요소를 기억할 것입니다. 이것은 브라우저 특정 요소로 화면 전체에 스크롤 텍스트 배너를 만들었습니다. 이 요소는 HTML 사양에 추가 된 적이 없으며 다양한 지원을 통해 다양한 브라우저에서 지원됩니다. 사람들은 종종 긍정적이고 부정적인이 요소의 사용에 대해 매우 강한 의견을 가지고있었습니다. 그러나 당신이 그것을 좋아하든 싫어하든간에 그것은 박스 경계를 넘쳐나는 내용을 만드는 목적에 도움이됩니다.
강력한 개인적인 견해를 제외하고는 브라우저가 완전히 구현하지 못한 이유 중 하나는 시각 효과로 간주되므로 구조를 정의하는 HTML에 의해 정의되어서는 안된다는 것입니다. 대신 시각적 효과 또는 표현 효과는 CSS에 의해 관리되어야합니다. 그리고 CSS3는 브라우저가 어떻게 마키 효과를 요소에 추가하는지 제어하는 선택 윤곽 모듈을 추가합니다.
새로운 CSS3 속성
CSS3는 다음과 같은 다섯 가지 새로운 속성을 추가하여 선택 윤곽에서 내용이 표시되는 방식을 제어 할 수 있습니다. 넘치는 스타일
, 마키 스타일
, 마키 플레이 횟수
, 움직이는 방향
과 연회 속도
.
옵션은 다음과 같습니다. 마지막으로, alternate는 내용을 앞뒤로 움직여 좌우로 바운스합니다. CSS 선택 윤곽 요소를 작동 시키려면 공급 업체 접두사를 사용해야 할 수도 있습니다. 그들은 다음과 같습니다 : 마지막 속성을 사용하면 선택 윤곽의 내용이 화면에서 스크롤 될 때 단계가 얼마나 크거나 작게 정의되어야하는지 정의 할 수 있습니다. 선택 윤곽을 작동 시키려면 공급 업체 접두어 값을 먼저 배치 한 다음 CSS3 사양 값을 따라야합니다. 예를 들어, 다음은 200x50 상자에서 텍스트를 왼쪽에서 오른쪽으로 다섯 번 스크롤하는 선택 윤곽 CSS입니다.넘치는 스타일
그만큼 넘치는 스타일
속성 (CSS Overflow 기사에서도 설명)은 내용 상자를 오버플로하는 내용의 기본 스타일을 정의합니다. 값을로 설정하면 연회실
또는 마키 블록
콘텐츠가 왼쪽 / 오른쪽으로 밀려 나올 것입니다 (연회실
) 또는 위 / 아래 (마키 블록
).마키 스타일
이 속성은 내용을보기 (및 바깥 쪽)로 이동하는 방법을 정의합니다.스크롤
, 슬라이드
과 번갈아 하는
. 스크롤은 내용이 화면에서 완전히 벗어나기 시작한 다음 표시 영역이 화면에서 완전히 벗어날 때까지 이동합니다. 슬라이드는 콘텐츠가 화면에서 완전히 벗어나 시작한 다음 콘텐츠가 화면 위로 완전히 이동하고 화면에 슬라이드 할 콘텐츠가 더 이상 남아 있지 않을 때까지 이동합니다.마키 플레이 횟수
사용하는 단점 중 하나는 큰 천막
요소는 천막이 결코 멈추지 않는다는 것입니다. 하지만 스타일 속성 마키 플레이 횟수
특정 횟수만큼 내용을 켜고 끄도록 선택 윤곽을 설정할 수 있습니다.움직이는 방향
또한 화면에서 내용을 스크롤 할 방향을 선택할 수도 있습니다. 값 앞으로
과 역
텍스트의 방향성을 기반으로 넘치는 스타일
~이다. 연회실
위아래로 넘치는 스타일
~이다. 마키 블록
.움직이는 방향 세부 정보
넘치는 스타일
언어 방향 앞으로 역 연회실
ltr 왼쪽 권리 rtl 권리 왼쪽 마키 블록
쪽으로 내려가는 연회 속도
이 속성은 내용이 화면에서 얼마나 빨리 스크롤되는지를 결정합니다. 값은 다음과 같습니다. 느린
, 표준
, 및 빠른
. 실제 속도는 콘텐츠 및 브라우저가 표시하는 속도에 따라 다르지만 값은 느린
~보다 느리다. 표준
느린 빠른
.마키 속성의 브라우저 지원
CSS3 공급 업체 접두사 overflow-x : 선택 윤곽선;
overflow-x : -webkit-marquee;
마키 스타일
-webkit-marquee-style
마키 플레이 횟수
-webkit-marquee-repetition
marquee-direction : 앞으로 | 뒤로;
-webkit-marquee-direction : 앞으로 | 뒤로;
연회 속도
-webkit-marquee-speed
이에 해당하지 않는 -webkit-marquee-increment
{ 너비 : 200px; 높이 : 50px; white-space : nowrap; 오버 플로우 : 숨김; overflow-x : -webkit-marquee; -webkit-marquee-direction : 전달; -webkit-marquee-style : 스크롤; -webkit-marquee-speed : 보통; -webkit-marquee-increment : 작은; -webkit-marquee-repetition : 5; overflow-x : 선택 윤곽선; marquee-direction : 앞으로; marquee-style : 스크롤; 움직이는 속도 : 정상; 마키 플레이 횟수 : 5;}