/ / CSS 속성 "display : none"사용

CSS 속성 "display : none"사용

CSS (Cascading Style Sheet)를 사용하면 웹 페이지의 모양과 디자인을 구성 할 수 있습니다. 가장 일반적으로 사용되는 속성 및 해당 값 중 하나는 "display : none"입니다.

속성 정의

표시 없음

Само свойство является многоцелевым и определяет 문서에서 항목의 표시 유형. 선택한 값에 따라 페이지의 특정 섹션을 테이블에 일부로 목록 항목으로 선형으로 블록에 표시 할 수 있습니다. 따라서 "디스플레이"속성으로 인해 문서에서 블록 유형을 변경할 수 있습니다.

링크 속성 값 표시는 다음과 같습니다.none "을 사용하면 문서에서 요소 또는 블록을 제거 할 수 있습니다.이 경우 페이지의이 부분에 대한 공간이 예약되지 않았습니다. 즉, 스트림에서 떨어집니다. 뒤에있는 모든 요소는 삭제되지 않습니다. 숨겨진 개체를 반환하려면 속성 값을 필요한 형식으로 변경하는 스크립트를 통해 문서에 액세스해야합니다. 그러면 새 개체가 포함 된 페이지의 서식이 자동으로 지정됩니다.

디스플레이와 가시성의 차이

스타일 표시 없음

Несмотря на то что в итоге оба свойства скрывают 사용자의 요소에 따라 작동 원리가 크게 다릅니다. 위에서 언급했듯이 "display : none"옵션은 문서에서 항목을 완전히 제거합니다. 블록이 페이지에서 떨어져 공간을 차지하지 않습니다. 동시에 객체 자체는 HTML 코드에 남아 있습니다.

차례로, 속성 "가시성 :hidden은 "사용자로부터 요소를 숨기지 만 문서 모델에서 제거하지 않습니다. 따라서이 블록의 예약 된 공간은 페이지에 남아 있습니다. 즉, 문서 흐름은 가시성 : hidden 속성과 동일한 방식으로 요소의 위치와 크기를 인식하고 고려합니다. 그없이.

이러한 두 가지 속성을 가진 문서 구조 구성의 차이로 인해 페이지를 올바르게 표시하기위한 원하는 결과를 얻을 수 있습니다.

CSS 사용-표시 : 없음

div 표시 없음

Интернет-документ позволяет использовать 요소의 속성을 결정하기위한 몇 가지 옵션. 우선, 표시 : 캐스 케이 딩 스타일 시트의 별도 파일에 아무것도 쓸 수 없습니다. 이 방법을 사용하면 모든 선택기, 클래스 및 해당 속성을 별도의 문서에 넣을 수 있으므로 가장 고급스럽고 정확합니다. 이러한 모델을 사용하면 페이지 설정을 매우 빠르게 찾고 변경할 수 있습니다.

문서 제목에

두 번째 옵션은 스타일을 정의하는 것입니다.스타일 태그 사이의 문서 헤드. 이 방법의 효과는 훨씬 적습니다. 스타일이 많으면 웹 디자이너의 페이지 가독성이 크게 저하되므로 마지막 수단으로 만 사용하는 것이 좋습니다. 이로 인해 오류가 발생하고 인터넷 문서 개발 프로세스가 느려집니다. 이 방법은이 태그에 적은 수의 스타일을 추가하거나 문서를 디버깅하는 경우에만 권장됩니다.

이 방법을 사용하면스타일 구성은 별도의 스타일 시트를 가져 오는 것보다 낮은 문서에 있으므로 html 문서 본문에있는 속성으로 교차 속성을 덮어 씁니다.

div 블록. 디스플레이 : none

CSS 표시 없음

다른 방법은 추가하는 것입니다코드 요소 태그에 직접 "style = display : none;". 다양한 프레임 워크로 작업 할 때 비슷한 접근 방식이 종종 사용되는데, 그 목적은 스타일 시트에서 직접 특성 수를 줄이고 인터넷 문서 자체에 표시하는 것입니다. 또한 "코드 관리자"가 페이지를 볼 때 유사한 항목이 종종 발생합니다. 이 방법을 사용하면 스타일 시트에 지정된 속성과 값을 변경할 수 있습니다. 따라서 결국 추가 문제점을 작성하고 페이지 코드에서 오류를 찾고 수정하는 데 시간을 소비 할 수 있으므로주의해야합니다.

자바 스크립트

또한 추가 언급 할 가치가 있습니다.이 속성을 변경할 가능성. 더 이상 스타일 시트 및 HTML 코드가 아니라 스크립팅 언어를 나타냅니다. 따라서 적용하려면이 분야에 대한 지식이 있어야합니다. 문서 플로우에서 요소를 제거하기 위해 JavaScript 특성 "display = none"을 사용할 수 있습니다. 특정 이벤트가 발생할 때 문서의 구조를 변경할 수 있습니다. 또한 스크립트를 사용하여 속성 매개 변수를 동적으로 ( "즉석에서") 변경하여 페이지를 다시로드하지 않고도 페이지보기를 업데이트 할 수 있습니다. 이 방법은 드롭 다운 메뉴, 모달 창 및 양식을 구성 할 때 유용합니다.

SEO

자바 스크립트 디스플레이 없음

검색 엔진을위한 웹 콘텐츠 최적화 분야기계에는 많은 미신과 모호성이 있습니다. 예를 들어, 많은 야심 찬 SEO는 "디스플레이"속성을 나쁜 매너로 사용하는 것을 고려합니다. 그들은 숨겨진 콘텐츠를 보는 검색 엔진이 페이지를 스팸으로 간주하기 시작한다는 사실로 이것을 설명합니다. 그들의 말에는 논리가 있지만 더 이상은 없습니다. 이 시점에서 객체 숨김 속성은 드롭 다운 메뉴의 서식을 지정하고 현재 사용자가 관심을 갖지 않는 문서 부분을 숨기는 데 자주 사용됩니다 (예 : 한 범주를 선택하면 다른 범주에 대한 정보가 삭제됨). 이 접근 방식은 다소 강력한 인터넷 포털 (그 중 하나가 "Amazon")에서 사용됩니다. 따라서 검색 엔진 크롤러는 "display : none"속성을 스팸으로 사용하는 것을 고려할 수 없습니다.

이 접근 방식을 사용할 때 또 다른 문제입니다.개별 단어 및 기호 숨기기. 현재 검색 로봇이 문서에서 이러한 "스팸"을 인식하는 완벽한 알고리즘을 아직 가지고 있지 않음에도 불구하고 페이지가 여기에 걸릴 가능성은 상당히 높습니다. 따라서 의도 된 목적 (블록 유형을 변경하거나 사용자의 눈에서 일시적으로 숨기는 등)에 대해서만 "표시"속성을 사용하는 것이 좋습니다.

좋아요 :
0
인기 게시물
영적 개발
음식
예