CSS
레이아웃 제어

통사론

• 표시 : 없음 | 인라인 | 블록 | 목록 항목 | 인라인리스트 아이템 | 인라인 블록 | 인라인 테이블 | 테이블 | 테이블 셀 | 테이블 열 | 테이블 열 그룹 | 테이블 - 꼬리말 그룹 | 테이블 머리글 그룹 | 테이블 행 | 테이블 행 그룹 | 플렉스 | 인라인 - 플렉스 | 그리드 | 인라인 그리드 | 기동 | 루비 | 루비 기지 | 루비 텍스트 | 루비베이스 컨테이너 | 루비 텍스트 컨테이너 | 내용;

매개 변수

표시 속성

display CSS 속성은 HTML 문서의 레이아웃과 흐름을 제어하는 ​​기본 요소입니다. 대부분의 요소에는 block 또는 inline 의 기본 display 값이 있습니다 (일부 요소에는 다른 기본값이 있음).

인라인

inline 요소는 필요한만큼만 너비를 차지합니다. 동일한 유형의 다른 요소와 수평으로 쌓고 다른 비 인라인 요소는 포함 할 수 없습니다.

<span>This is some <b>bolded</b> text!</span>

위에서 설명한 것처럼 두 개의 inline 요소 인 <span> 과 <b> 는 인라인 (따라서 이름)이며 텍스트 흐름을 중단하지 않습니다.

블록

block 요소는 '부모 요소의 최대 가용 너비를 차지합니다. 새로운 행으로 시작하고 inline 요소와 달리 포함될 수있는 요소의 유형을 제한하지 않습니다.

<div>Hello world!</div><div>This is an example!</div>

div 요소는 기본적으로 블록 수준이며 위에 표시된 것처럼 두 개의 block 요소가 세로로 겹쳐져 있으며 inline 요소와 달리 텍스트 흐름이 중단됩니다.

인라인 블록

inline-block 값은 우리에게 두 세계의 장점을 제공합니다. 요소의 블렌드는 텍스트의 흐름과 padding , margin , height 및 inline 요소에 눈에 띄는 효과가없는 유사한 속성을 사용할 수 있습니다.

이 표시 값을 가진 요소는 일반 텍스트 인 것처럼 작동하며 결과적으로 text-align 과 같은 text-align 흐름을 제어하는 ​​규칙의 영향을받습니다. 기본적으로 콘텐츠를 수용 할 수있는 가장 작은 크기로 축소됩니다.

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

없음

display 속성에 none 값이 지정된 요소는 전혀 표시되지 않습니다.

예를 들어 myDiv 라는 ID를 가진 div 요소를 생성 해 보겠습니다.

<div id="myDiv"></div>

이제 다음 CSS 규칙에 의해 표시되지 않는 것으로 표시 될 수 있습니다.

#myDiv {
    display: none;
}

요소가 display:none; 으로 설정되면 브라우저는 해당 특정 요소 ( position 과 float 모두)에 대한 다른 모든 레이아웃 특성을 무시합니다. 해당 요소에 대해 상자가 렌더링되지 않으며 html에있는 해당 요소가 다음 요소의 위치에 영향을 미치지 않습니다.

이는 visibility 속성을 hidden 설정하는 것과 다릅니다. visibility: hidden; 설정 visibility: hidden; 요소가 페이지에 요소를 표시하지는 않지만 요소는 렌더링 프로세스에서 공간이 보이는 것처럼 보이게됩니다. 따라서 다음 요소가 페이지에 표시되는 방식에 영향을줍니다.

display 속성의 none 값은 JavaScript를 사용하여 임의로 요소를 표시하거나 숨기므로 실제로 삭제하고 다시 만들 필요가 없습니다.

div를 사용하여 오래된 테이블 구조를 얻으려면

이것은 일반적인 HTML 테이블 구조입니다.

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

이 같은 구현을 할 수 있습니다.

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>