집 >웹 프론트엔드 >프런트엔드 Q&A >CSS 디스플레이에서 숨기기 및 표시를 제어하는 방법

CSS 디스플레이에서 숨기기 및 표시를 제어하는 방법

CSS의 Display 속성은 요소의 표시 모드를 설정하는 데 사용됩니다. 이를 사용하여 요소의 가시성, 레이아웃 및 크기와 같은 측면을 제어할 수 있으므로 CSS 애플리케이션에서 매우 일반적입니다.

CSS 디스플레이 설정

CSS에서 디스플레이 속성은 다음 값을 허용할 수 있습니다.

다양한 요소가 다양한 디스플레이 속성을 지원하므로 실제 상황에 따라 적절한 속성 값을 선택해야 한다는 점은 주목할 가치가 있습니다.

CSS 표시 없음

요소를 완전히 숨기려면 표시:없음을 사용하세요. 즉, 해당 요소는 페이지의 공간을 차지하지 않으며 다른 요소에 영향을 주지 않습니다. 이 기능은 HTML 요소를 동적으로 표시하거나 숨겨야 하는 웹 개발에 매우 유용합니다.

CSS 인라인 표시

요소를 인라인 요소로 표시하려면 Display:inline을 사용하세요. 즉, 일반 텍스트처럼 같은 줄에 정렬됩니다. 요소의 너비 및 높이 속성을 무시하고 콘텐츠 크기만을 기준으로 표시합니다.

CSS 표시 블록

요소를 블록 수준 요소로 표시하려면 Display:block을 사용하세요. 즉, 페이지에서 자체 행을 차지하게 됩니다. 이 기능은 HTML 요소의 보다 구체적인 레이아웃을 가질 수 있게 해주기 때문에 매우 유용합니다.

CSS 인라인 블록 표시

요소를 인라인 요소와 블록 수준 요소로 동시에 표시하려면 Display:inline-block을 사용하세요. 즉, 같은 줄에 정렬되지만 크기와 같은 속성은 블록 수준 요소처럼 설정됩니다.

CSS 디스플레이 테이블

디스플레이:테이블을 사용하여 요소를 테이블 형태로 표시하세요. 즉, 요소에는 머리글, 본문, 바닥글이 포함되며 테이블의 관련 속성을 사용하여 설정할 수 있습니다.

CSS Display table-cell

요소를 표 셀로 표시하려면 Display:table-cell을 사용하세요. 즉, 요소가 표의 셀이 됩니다. 열과 행 사이의 너비와 높이를 자동으로 조정할 수 있어 매우 유용합니다.

CSS Display table-row

요소를 테이블 행으로 표시하려면 Display:table-row를 사용하세요. 즉, 요소가 테이블의 행이 됩니다. 또한 테이블 행의 보다 구체적인 레이아웃을 가질 수 있기 때문에 매우 유용합니다.

CSS 인라인 테이블 표시

요소를 인라인 요소와 테이블로 동시에 표시하려면 Display:inline-table을 사용하세요. 이를 통해 인라인 요소 내에 테이블을 만들 수 있습니다.

CSS Display flex

Display:flex를 사용하여 요소를 유연한 상자로 만드세요. 이는 컨테이너 내의 요소를 원하는 대로 정렬, 정렬 및 추가/제거할 수 있음을 의미합니다.

CSS 디스플레이 그리드

Display:grid를 사용하여 요소를 그리드 컨테이너로 만듭니다. 즉, 페이지를 그리드로 나누고 요소를 다양한 크기와 위치에 배치할 수 있어 매우 유용합니다.

CSS 디스플레이는 요소를 숨기고 표시합니다

CSS 디스플레이의 중요한 기능은 HTML 요소를 숨기거나 표시하는 데 사용할 수 있다는 것입니다. 표시: 없음은 요소를 숨기고 표시하는 데 자주 사용됩니다.

다음 코드가 적용되면 요소가 숨겨집니다.

display: none;

요소를 표시해야 하는 경우 Display 속성을 다음과 같은 적절한 값으로 설정하면 됩니다.

display: block;

이렇게 하면 요소가 다시 표시됩니다.

결론

CSS 표시 속성은 웹 개발에서 매우 중요하며 요소의 레이아웃, 가시성 및 크기를 제어하여 복잡한 페이지 디자인을 구현하는 데 사용할 수 있습니다. 다양한 Display 값과 해당 사용 사례를 이해하는 것은 기본 CSS 기술을 익히는 데 중요한 단계입니다.

위 내용은 CSS 디스플레이에서 숨기기 및 표시를 제어하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

CSS 디스플레이에서 숨기기 및 표시를 제어하는 ​​방법