비디오: 화면을 어떻게 전환하지? 2024
때때로 사용자는 화면 요소를보다 쉽게 보거나 작업 할 수 있도록 위치를 재조정해야합니다. CSS3에서는 사용자가 주변에서 물건을 움직일 수있는 환경을 만들 때 많은 양의 코드를 작성할 필요가 없습니다. 실제로 필요한 것은 draggable ()이라는 단일 메서드입니다.
다음 코드는이 예제에서 드래그 가능한 단락을 만드는 데 사용 된 방법을 보여줍니다. (다운로드 가능한 코드의 Chapter 06Interactions 폴더에서이 예제의 전체 코드를 DragContent. HTML로 찾을 수 있습니다.)
$ (function () {$ ("# MoveMe"). draggable ();});
이 코드는 특정 페이지 기능으로 작업하는 것이 아니라 jQuery 환경을 확장하는 jQuery 익명 함수를 실제로 만들기 때문에 흥미 롭습니다.
이 호출의 초점은 MoveMe라는 ID가있는 단락 (
태그)입니다. 해당 멤버에 액세스하고 draggable ()을 호출하여 이동하도록하기 만하면됩니다. 다운로드 가능한 예제를 사용하면 페이지에서 원하는 위치로 단락을 이동할 수 있습니다.
이 예제에서는 움직일 수있는 상자를 만들기 위해 사용자 정의 스타일을 사용합니다. 스타일은 테두리를 만들고 텍스트의 공간을 충분히 확보 한 다음 텍스트를 가로 및 세로로 가운데에 맞 춥니 다. 다음은이 예제에 사용 된 스타일입니다.
#MoveMe {border: solid; 너비: 200px; 높이: 5em; 텍스트 정렬: 가운데; line-height: 5em;}
많은 개발자가
태그 내에 텍스트를 세로로 가운데에 배치하는 데 문제가 있습니다. 이 작업을 수행하는 여러 가지 방법을 찾을 수 있습니다. 그러나 플랫폼 및 브라우저 일관성있는 방식으로 작업을 수행하는 가장 쉬운 방법 중 하나는 예제에 표시된 줄 높이 스타일을 사용하는 것입니다.