24시간 이내에 html 레이어를 배운 방법!

HTML 문서는 살아있는 문서입니다. 제 이전 기사를 읽지 않았다면 가서 읽거나 읽을 수 없다면 한 번만 방문하십시오.

CSS를 적용하지 않아도 HTML 문서에는 이미 자체 규칙이 있습니다.

유동성: 콘텐츠가 브라우저 크기에 맞게 조정되는 방식

순서: 요소가 나타나는 순서

쌓기: 요소가 서로 위에 표시되는 방식

이 자연스러운 행동은 논리적입니다.

유동성

HTML에서 콘텐츠는 King입니다.

모든block 요소는 유동적입니다. 내부 콘텐츠를 수용하기 위해 자연스럽게 레이아웃을 조정합니다.

폭: 100%
블록은 사용 가능한 전체 너비를 차지합니다

.

줄 바꿈
블록의 인라인 콘텐츠가 한 줄에 맞지 않으면 새 줄에서 계속됩니다

.

높이: 자동
블록의 높이는 콘텐츠의 크기에 맞게 자동으로 변경됩니다.

<div class="result" id="result-fluidity">
  <div>
    A block element will fill up the whole <strong>width</strong> available, while its <strong>height</strong> will vary automatically according to the size of its content.
  </div>
  <div>
    This element will be pushed downwards depending on the height of its predecessors.
  </div>
</div>

<style type="text/css">
#result-fluidity{ height: 450px; max-width: 800px;}
#result-fluidity div{ background: coral; padding: 20px;}
#result-fluidity div:first-child{ background: mediumaquamarine; animation: expand 3s alternate infinite both;}

@keyframes expand{
  0%  { width: 100%;}
  100%{ min-width: 100px; width: 50%;}
}
</style>

Ablock는 기본적으로 전체 너비입니다.

높이는 내용의 높이입니다

주문

HTML 요소는 코드에 작성된 순서대로 표시됩니다.
코드에서 첫 번째 -> 브라우저에서 첫 번째.

각각block은 HTML 코드에 나타나는 순서대로 위에서 아래로 나타납니다.

<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
<p>Fifth</p>

<div class="result">
  <p>First</p>
  <p>Second</p>
  <p>Third</p>
  <p>Fourth</p>
  <p>Fifth</p>
</div>

스태킹

브라우저에는 3차원이 있습니다.

각 HTML 요소는 가상 레이어에 속합니다.

스택 순서는 요소가 중첩되는 방식에 따라 다릅니다. 자식 요소는 해당 부모 위에 나타납니다.

중첩된 각 요소는 상위 요소 위에 나타납니다.

계층 구조가 깊을수록 스택이 높아집니다.

<div>
  This parent is behind
  <p>
    This nested child appears <strong>on top</strong> of its parent
  </p>
</div>

<div class="result">
  <div style="background: midnightblue; color: white; padding: 20px;">
    This parent is behind
    <p style="background: mediumseagreen; padding: 20px;">
      This nested child appears <span style="background: crimson; color: white; padding: 2px 5px;">on top</span> of its parent
    </p>
  </div>
</div>

흐름 끊기

브라우저의 기본 동작은 효율적이지만 디자인 요구 사항에는 충분하지 않을 수 있습니다.

몇 가지 CSS 속성을 사용하면 흐름을 방해할 수 있습니다.

height 및 width는 요소의 유동성을 변경할 수 있습니다.

float 요소의 동작과 주변 환경을 방해함

position absolute 및 fixed 흐름에서 요소 제거

z-index 요소가 쌓이는 순서를 변경할 수 있습니다.