CSS 및 HTML을 사용하여 스크롤 텍스트 상자 만들기
HTML 스크롤 상자는 상자의 내용이 상자 크기보다 클 경우 스크롤 막대를 오른쪽과 아래쪽에 추가하는 상자입니다. 즉, 약 50 단어에 맞는 상자가 있고 200 단어의 텍스트가있는 경우 HTML 스크롤 상자는 추가 150 단어를 볼 수 있도록 스크롤 막대를 올립니다. 표준 HTML에서는 단순히 상자 외부에 추가 텍스트를 넣을뿐입니다.
HTML 스크롤을 만드는 것은 매우 쉽습니다. 스크롤하려는 요소의 너비와 높이를 설정 한 다음 CSS overflow 속성을 사용하여 스크롤 방법을 설정하면됩니다.
추가 텍스트로 무엇을해야합니까?
레이아웃 공간에 텍스트보다 많은 텍스트가있는 경우 몇 가지 옵션이 있습니다.
- 텍스트가 더 짧고 잘 맞도록 텍스트를 다시 작성하십시오.
- 텍스트가 범위를 넘어서도록 허용하고 레이아웃이 그것을 지원하기 위해 유연 해지기를 바랍니다.
- 오버플로되는 텍스트를 잘라냅니다.
- 추가 텍스트를 표시하기 위해 스크롤 할 스크롤 막대 (일반적으로 텍스트의 세로)를 추가하십시오.
가장 좋은 옵션은 일반적으로 마지막 옵션 인 스크롤하는 텍스트 상자를 만드는 것입니다. 그런 다음 추가 텍스트를 읽을 수는 있지만 디자인이 손상되지는 않습니다.
HTML과 CSS는 다음과 같습니다.
오버플로 : 자동; div에 경계선이 오버 플로우되지 않도록 스크롤 막대를 추가하도록 브라우저에 지시합니다. 그러나 이것이 작동하려면 오버 플로우 할 경계가 있도록 div에 설정된 너비 및 높이 스타일 속성도 필요합니다.
overflow : auto를 변경하여 텍스트를자를 수도 있습니다. 오버플로 : 숨김; 오버플로 속성을 생략하면 텍스트가 div의 경계 위로 넘치게됩니다.
단순한 텍스트 이상으로 스크롤 막대를 추가 할 수 있습니다.
더 작은 공간에 표시하려는 큰 이미지가있는 경우 텍스트와 같은 방법으로 스크롤 막대를 추가 할 수 있습니다.
이 예에서 400x509 이미지는 300x300 단락 안에 있습니다.
테이블은 스크롤 막대에서 이익을 얻을 수 있습니다.
긴 정보 표는 매우 빨리 읽을 수 없지만 제한된 크기의 div 안에 넣은 다음 오버플로 속성을 추가하면 페이지에서 극단적 인 공간을 차지하지 않는 많은 양의 데이터로 표를 생성 할 수 있습니다 .
가장 쉬운 방법은 이미지와 텍스트를 사용하는 것과 같습니다. div를 테이블 주위에 추가하고 div의 너비와 높이를 설정 한 다음 overflow 속성을 추가하면됩니다.
브라우저에서 스크롤 막대의 크롬이 테이블과 겹치는 것으로 가정하기 때문에 가로 스크롤 막대가 일반적으로 나타납니다. 테이블 및 기타의 너비를 변경하지 못하도록 수정하는 방법은 여러 가지가 있습니다. 하지만 가장 좋아하는 것은 단순히 CSS 3 속성 overflow-x로 가로 스크롤을 해제하는 것입니다. overflow-x : hidden을 추가하십시오. div로 이동하면 가로 스크롤 막대가 제거됩니다. 사라질 내용이있을 수 있으니 테스트 해보십시오.
Firefox는 오버 플로우를위한 TBODY 태그 사용을 지원합니다
파이어 폭스 브라우저의 멋진 기능 중 하나는 tbody와 thead 또는 tfoot와 같은 내부 테이블 태그에 overflow 속성을 사용할 수 있다는 것입니다. 즉, 테이블 내용에 스크롤 막대를 설정할 수 있으며 머리글 셀은 그 위에 고정되어 있습니다. 이 기능 은 Firefox 에서 작동하지만 너무 나쁘지 만 독자가 Firefox 만 사용하면 좋은 기능입니다. Firefox에서이 예제를 찾아 무엇을 의미하는지 확인하십시오.
| 전화 번호 | |
|---|---|
| Jennifer | 502-5366 ...
|