디스플레이의 차이점은 무엇입니까 : 블록, 디스플레이 : 인라인 및 디스플레이 : 인라인 블록?

디스플레이의 차이점은 무엇입니까 : 블록, 디스플레이 : 인라인 및 디스플레이 : 인라인 블록?

CSS의 display 속성은 HTML 요소의 레이아웃 및 프리젠 테이션을 제어하는 ​​데 사용됩니다. 값은 block , inline 및 inline-block 각각 레이아웃과 주변 요소와의 상호 작용 측면에서 요소가 다르게 행동하는 방식에 영향을 미칩니다.

• 디스플레이 : 블록 :이 속성을 가진 요소는 블록 레벨 요소로 표시됩니다. 그들은 새로운 라인에서 시작하여 용기의 왼쪽에서 오른쪽으로 뻗어있는 전체 너비를 가져옵니다. 블록 레벨 요소에는 일반적으로 주변 공간에 영향을 미치는 여백, 패딩 및 테두리 속성이 있습니다. 기본적으로 블록 수준 요소의 예로는 <div> , <code><p></p> 및 <h1></h1> ~ <h6></h6> 이 포함됩니다.
• 디스플레이 : 인라인 :이 속성의 요소는 인라인 레벨 요소로 표시됩니다. 그들은 새로운 라인에서 시작하지 않으며 필요한만큼 폭을 차지합니다. 상단 및 하단 여백을 가질 수 없으며 폭과 높이 특성은 적용되지 않습니다. 기본적으로 인라인 요소의 예로는 <span></span> , <a></a> 및 <img alt="디스플레이의 차이점은 무엇입니까 : 블록, 디스플레이 : 인라인 및 디스플레이 : 인라인 블록?" > 포함됩니다.
• 디스플레이 : 인라인-블록 : block 과 inline 의 하이브리드입니다. inline-block 으로 설정된 요소는 인라인 요소와 같이 인라인으로 표시되지만 높이 및 너비 특성뿐만 아니라 블록 요소와 같은 상단 및 하단 여백을 사용할 수 있습니다. 이렇게하면 inline-block 나란히 앉아 있어야하지만 정의 된 크기가 필요한 요소를 만드는 데 유용합니다.

디스플레이 사용 방법 : 인라인 블록은 웹 페이지에서 요소의 레이아웃에 영향을 미칩니 까?

display: inline-block 크기 및 기타 블록 같은 속성을 지정할 수 있도록 동일한 라인에 앉을 수 있도록하여 웹 페이지의 요소 레이아웃에 크게 영향을 미칩니다. 몇 가지 주요 효과는 다음과 같습니다.

• 수평 정렬 : display: inline-block 블록 요소와 같은 새로운 라인에서 시작하기보다는 컨테이너 내에서 서로 옆에 수평으로 정렬 될 수 있습니다. 이는 항목이 나란히 있어야하는 내비게이션 메뉴, 갤러리 또는 기타 레이아웃을 만드는 데 유용 할 수 있습니다.
• 치수 및 간격 : display: inline 과 달리 inline-block 요소는 너비와 높이뿐만 아니라 상단 및 하단 여백을 정의 할 수 있습니다. 이를 통해 레이아웃을보다 정확하게 제어 할 수 있으며, 이는 특정 크기의 요소가 있거나 특정 방식으로 간격이 필요한 경우 유용합니다.
• 수직 정렬 : 인라인 블록 요소는 vertical-align 특성을 사용하여 서로에 대해 수직으로 정렬하는 방법을 더 잘 제어 할 수 있습니다. 이 블록 내에서 텍스트 또는 기타 인라인 요소를 정렬 할 때 특히 유용 할 수 있습니다.
• 공백 취급 : inline-block 의 주목할만한 측면 중 하나는 HTML 마크 업에서 공백의 영향을받을 수 있다는 것입니다. 인라인 블록 요소 사이의 공간은 의도하지 않은 간격으로 이어질 수 있으며, 이는 HTML에서 공간을 특수한 처리 또는 제거해야 할 수 있습니다.

표시 할 수 있습니다 : 블록을 사용하여 전폭 컨테이너를 생성하는 데 사용됩니다. 그렇다면 어떻게?

예, display: block 사용하여 전폭 컨테이너를 만들 수 있습니다. 기본적으로 블록 레벨 요소는 부모 컨테이너의 전체 너비를 차지하지만이 동작은 명시 적으로 제어되고 CSS를 사용하여 보장 할 수 있습니다. 당신이 할 수있는 방법은 다음과 같습니다.

• 기본 동작 : 언급 한 바와 같이, 블록 요소는 컨테이너의 전체 너비를 자동으로 가져옵니다. 따라서 <div> 또는 <code><p></p> 와 같은 요소의 경우 display: block (이 요소의 기본값)은 부모의 전체 너비를 가로 질러 늘어납니다.

• 명시 적 폭 : 블록 요소의 너비를 100% 로 명시 적으로 설정하여 전체 너비를 차지할 수 있습니다.

   <code class="css">.full-width-container { display: block; width: 100%; }</code>

  로그인 후 복사

• 마진 및 패딩 고려 사항 : 요소의 총 폭에 대한 여백과 패딩의 영향을 고려하는 것이 중요합니다. 마진과 패딩을 설명하지 않고 전체 너비를 차지하려면 콘텐츠 영역이 필요한 경우 box-sizing: border-box; 재산:

   <code class="css">.full-width-container { display: block; width: 100%; box-sizing: border-box; }</code>

  로그인 후 복사

수평으로 정렬 된 항목이있는 내비게이션 메뉴를 작성하는 데 어떤 디스플레이 속성을 사용해야합니까?

수평으로 정렬 된 항목으로 내비게이션 메뉴를 만들려면 display: inline-block 일반적으로 가장 적합한 선택입니다. 이유는 다음과 같습니다.

• 수평 레이아웃 : inline-block 사용하면 메뉴 항목을 나란히 줄에 ​​표시 할 수 있으므로 수평 내비게이션 메뉴에 이상적입니다.
• 치수에 대한 제어 : inline-block 사용하면 각 메뉴 항목의 특정 너비와 높이를 설정하여 균일하거나 맞춤형 레이아웃이 가능합니다.
• 스타일링 기능 : inline-block 요소는 메뉴 항목을 간격하고 시각적 분리기를 추가하는 데 유용한 여백, 패딩 및 테두리와 함께 스타일링 할 수 있습니다.

다음은 inline-block 사용하여 수평 내비게이션 메뉴를 만드는 방법의 예입니다.

 <code class="html"><nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav></code>

로그인 후 복사

 <code class="css">nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 10px 20px; text-decoration: none; color: #333; } nav ul li a:hover { background-color: #f0f0f0; }</code>

로그인 후 복사

이 설정은 각 목록 항목이 인라인으로 표시되지만 특정 스타일과 크기를 설정할 수있는 기능을 갖춘 수평 내비게이션 메뉴를 만듭니다. 기능적이고 시각적으로 매력적입니다.