CSS에서 디스플레이를 사용하는 방법

display 속성은 요소의 레이아웃 동작을 지정하는 데 사용됩니다. 블록, 인라인, 인라인 블록, 없음, 플렉스 및 그리드를 포함하여 선택할 수 있는 여러 값이 있습니다. 표시 속성을 사용하면 CSS 스타일 시트에 값을 지정하여 요소 표시를 블록 요소, 인라인 요소 또는 기타 형식으로 설정할 수 있습니다. 예를 들어, display: block은 요소를 블록 수준 요소로 표시합니다.

CSS에서 디스플레이 사용

디스플레이 속성이 무엇인가요?

display 속성은 페이지 요소의 레이아웃 동작을 정의하는 데 사용됩니다. 이 속성은 요소가 블록 요소, 인라인 요소 또는 기타 형식으로 표시되는 방식을 지정합니다.

display 값

display 속성은 다음 값을 허용합니다.

• block - 요소는 사용 가능한 전체 너비를 차지하고 새 줄에서 시작하는 블록 수준 요소로 표시됩니다.
• inline - 요소는 인라인 요소로 표시되며 다른 요소와 같은 줄에 있을 때 줄 바꿈되지 않습니다.
• inline-block - 블록과 인라인의 기능을 결합하여 요소가 너비를 차지하면서도 동일한 줄 내의 다른 요소와 함께 표시되도록 허용합니다.
• none - 요소가 페이지에 표시되지 않습니다.
• flex - 요소를 Flexbox 레이아웃용 컨테이너로 만듭니다.
• grid - 요소를 그리드 레이아웃의 컨테이너로 만듭니다.

디스플레이 속성을 어떻게 사용하나요?

다음 구문과 함께 CSS 스타일시트의 표시 속성을 사용하세요.

<code class="css">selector {
  display: value;
}</code>

예:

<code class="css">p {
  display: block;
}</code>

이렇게 하면 모든 단락 요소가 블록 수준 요소로 표시됩니다.

display 속성의 사용 예

• 제목 요소를 블록 수준 요소로 표시:

  <code class="css">h1 {
  display: block;
  }</code>

  로그인 후 복사

• 하이퍼링크를 인라인 요소로 표시:

  <code class="css">a {
  display: inline;
  }</code>

  로그인 후 복사

• 둘 다 너비를 채우는 요소 만들기 다른 요소와 정렬 버튼:

  <code class="css">button {
  display: inline-block;
  }</code>

  로그인 후 복사

• 페이지의 요소 숨기기:

  <code class="css">#my-element {
  display: none;
  }</code>

  로그인 후 복사

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