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