Skip to main content

HTML5와 CSS3 시대의 마퀴 (Marquee)

Responsive Design with Bootstrap by Neel Mehta (유월 2025)

Responsive Design with Bootstrap by Neel Mehta (유월 2025)
Anonim

오랫동안 HTML을 작성해 온 사람들은 그 요소를 기억할 것입니다. 이것은 브라우저 특정 요소로 화면 전체에 스크롤 텍스트 배너를 만들었습니다. 이 요소는 HTML 사양에 추가 된 적이 없으며 다양한 지원을 통해 다양한 브라우저에서 지원됩니다. 사람들은 종종 긍정적이고 부정적인이 요소의 사용에 대해 매우 강한 의견을 가지고있었습니다. 그러나 당신이 그것을 좋아하든 싫어하든간에 그것은 박스 경계를 ​​넘쳐나는 내용을 만드는 목적에 도움이됩니다.

강력한 개인적인 견해를 제외하고는 브라우저가 완전히 구현하지 못한 이유 중 하나는 시각 효과로 간주되므로 구조를 정의하는 HTML에 의해 정의되어서는 안된다는 것입니다. 대신 시각적 효과 또는 표현 효과는 CSS에 의해 관리되어야합니다. 그리고 CSS3는 브라우저가 어떻게 마키 효과를 요소에 추가하는지 제어하는 ​​선택 윤곽 모듈을 추가합니다.

새로운 CSS3 속성

CSS3는 다음과 같은 다섯 가지 새로운 속성을 추가하여 선택 윤곽에서 내용이 표시되는 방식을 제어 할 수 있습니다. 넘치는 스타일, 마키 스타일, 마키 플레이 횟수, 움직이는 방향연회 속도.

넘치는 스타일그만큼 넘치는 스타일 속성 (CSS Overflow 기사에서도 설명)은 내용 상자를 오버플로하는 내용의 기본 스타일을 정의합니다. 값을로 설정하면 연회실 또는 마키 블록 콘텐츠가 왼쪽 / 오른쪽으로 밀려 나올 것입니다 (연회실) 또는 위 / 아래 (마키 블록).

마키 스타일이 속성은 내용을보기 (및 바깥 쪽)로 이동하는 방법을 정의합니다.

옵션은 다음과 같습니다. 스크롤, 슬라이드번갈아 하는. 스크롤은 내용이 화면에서 완전히 벗어나기 시작한 다음 표시 영역이 화면에서 완전히 벗어날 때까지 이동합니다. 슬라이드는 콘텐츠가 화면에서 완전히 벗어나 시작한 다음 콘텐츠가 화면 위로 완전히 이동하고 화면에 슬라이드 할 콘텐츠가 더 이상 남아 있지 않을 때까지 이동합니다.

마지막으로, alternate는 내용을 앞뒤로 움직여 좌우로 바운스합니다.

마키 플레이 횟수사용하는 단점 중 하나는 큰 천막 요소는 천막이 결코 멈추지 않는다는 것입니다. 하지만 스타일 속성 마키 플레이 횟수 특정 횟수만큼 내용을 켜고 끄도록 선택 윤곽을 설정할 수 있습니다.

움직이는 방향또한 화면에서 내용을 스크롤 할 방향을 선택할 수도 있습니다. 값 앞으로 텍스트의 방향성을 기반으로 넘치는 스타일 ~이다. 연회실 위아래로 넘치는 스타일 ~이다. 마키 블록.

움직이는 방향 세부 정보

넘치는 스타일언어 방향앞으로
연회실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;}