오른쪽에 제안

end를 사용하는 문장

씨 에이자형 티영형에게

빨간색 선을 만들려면 하나의 매개변수만 알면 됩니다.

간단한 텍스트 들여쓰기 속성입니다.

. HTML5의 도래와 기사나 헤더 형태의 심각한 경쟁자의 출현에도 불구하고, 그것은 계속해서 모든 곳의 마크업에 삽입되고 있습니다. 따라서 중앙에서 div 블록의 서식 지정 및 정렬 문제를 처리하는 것이 좋습니다.

DIV 란 무엇입니까

요소의 이름은 나눗셈을 의미하는 영어 단어 division에서 유래합니다. 마크업을 작성할 때 요소를 블록으로 나누는 데 사용됩니다. DIV는 웹 페이지의 콘텐츠 그룹을 묶습니다. 예를 들어 이미지, 텍스트가 있는 단락. 태그는 어떤 식으로든 콘텐츠 표시에 영향을 미치지 않으며 의미론적 로드를 전달하지 않습니다.

DIV는 모든 전역 속성을 지원합니다. 그러나 웹 디자인의 경우 클래스와 ID의 두 가지만 있으면 됩니다. 이국적인 경우에만 나머지 모든 것을 기억할 수 있으며 이는 사실이 아닙니다. div를 가운데 정렬하거나 왼쪽 정렬하는 데 사용되었던 align 속성은 더 이상 사용되지 않습니다.

DIV를 사용해야 하는 경우

사이트가 냉장고이고 DIV가 콘텐츠를 분류하는 데 필요한 플라스틱 용기라고 상상해 보십시오. 당신은 리버부어스트와 같은 용기에 과일을 넣지 않을 것입니다. 당신이 별도로 두는 제품의 각 종류. 웹 콘텐츠도 비슷한 방식으로 생성됩니다.

아무 사이트나 열고 의미 블록으로 나눕니다. 상단에 머리글, 하단에 바닥글, 중앙에 본문. 측면에는 일반적으로 판촉 콘텐츠 또는 태그 클라우드가 있는 작은 열이 있습니다.

이제 각 섹션을 더 자세히 분해하십시오. 헤더로 시작하십시오. 사이트 헤더에는 별도의 로고, 탐색, 1단계 제목, 때로는 슬로건이 있습니다. 각 의미 블록에 고유한 컨테이너를 할당합니다. 이렇게 하면 흐름의 요소가 분리될 뿐만 아니라 서식을 쉽게 지정할 수 있습니다. 클래스나 ID를 지정하여 DIV 태그의 중심에 개체를 배치하는 것이 훨씬 쉽습니다.

여백이 있는 가운데 맞춤 DIV

웹 요소를 렌더링할 때 브라우저는 패딩, 여백 및 테두리의 세 가지 속성을 고려합니다. 패딩은 콘텐츠와 테두리 사이의 공간입니다. 여백 - 한 개체를 다른 개체와 구분하는 필드입니다. 테두리는 블록을 따라 있는 선입니다. 모두에서 한 번에 할당하거나 한쪽에서만 할당할 수 있습니다.

div( border: 1px solid #333; border-left: 없음; )

이러한 속성은 개체 사이에 여유 공간을 추가하고 원하는 대로 정렬하고 배치하는 데 도움이 됩니다. 예를 들어, 그림이 있는 블록을 왼쪽 가장자리에서 가운데로 20% 오프셋해야 하는 경우 값이 20%인 요소에 왼쪽 여백을 할당합니다.

img로 차단(왼쪽 여백: 20%; )

요소는 너비 값과 음수 패딩을 사용하여 형식을 지정할 수도 있습니다. 예를 들어 200x200px 크기의 블록이 있습니다. 먼저 절대 위치를 지정하고 중앙으로 50% 이동합니다.

Div( 위치: 절대; 왼쪽: 50%; )

이제 DIV가 완벽하게 중앙에 있는지 확인하려면 너비의 50%, 즉 -100픽셀과 같은 음수 왼쪽 패딩을 지정합니다.

여백-왼쪽: -100px

CSS에서는 이것을 "공기 제거"라고 합니다. 그러나 여러 수준의 중첩이 있는 요소에 대해 수행하기가 상당히 어려운 일정한 계산을 수행해야 한다는 점에서 상당한 단점이 있습니다. 패딩과 테두리 너비가 설정된 경우 브라우저는 기본적으로 컨테이너의 크기를 테두리 두께, 오른쪽, 왼쪽의 패딩, 콘텐츠 자체의 합으로 계산하므로 놀라울 수도 있습니다.

따라서 DIV를 중앙에 배치해야 하는 경우 border-box 값과 함께 box-sizing 속성을 사용하십시오. 브라우저가 DIV 요소의 전체 너비에 패딩 및 테두리 값을 추가하는 것을 방지합니다. 요소를 높이거나 낮추려면 음수 값도 사용하십시오. 그러나 이 경우 컨테이너의 위쪽 또는 아래쪽 필드에 할당할 수 있습니다.

자동 여백을 사용하여 div 블록을 가운데에 맞추는 방법

이것은 큰 블록을 중앙에 배치하는 쉬운 방법입니다. 컨테이너의 너비와 margin 속성을 auto로 설정하기만 하면 됩니다. 브라우저는 모든 작업을 자체적으로 수행하면서 왼쪽과 오른쪽에 동일한 여백을 두고 가운데에 블록을 배치합니다. 결과적으로 수학적 계산에서 혼동될 위험이 없으며 시간을 크게 절약할 수 있습니다.

반응형 앱을 개발할 때 자동 여백 방법을 사용합니다. 핵심은 컨테이너에 너비 값을 ems 또는 백분율로 지정하는 것입니다. 위 예제의 코드는 다음을 포함한 모든 장치의 DIV를 중앙에 배치합니다. 휴대전화, 화면의 90%를 차지합니다.

속성 표시를 통한 정렬: 인라인 블록

기본적으로 DIV 요소는 블록 요소로 간주되며 블록의 표시 값을 갖습니다. 이 방법의 경우 이 속성을 재정의해야 합니다. 상위 컨테이너가 있는 DIV에만 적합:

외부 div 클래스가 있는 요소가 할당됩니다. 텍스트 정렬 속성가운데 값으로 텍스트를 내부 중앙에 배치합니다. 그러나 현재로서는 브라우저가 중첩된 DIV를 블록 개체로 봅니다. text-align 속성이 작동하려면 inner-div를 인라인으로 처리해야 합니다. 따라서 inner-div 선택기의 CSS에서 다음 코드를 작성합니다.

내부 div( 표시: 인라인 블록; )

표시 속성을 블록에서 인라인 블록으로 변경합니다.

변환/번역 방법

계단식 스타일 시트를 사용하면 웹 요소를 마음대로 이동, 기울이기, 회전 및 변형할 수 있습니다. 이를 위해 transform 속성이 사용됩니다. 원하는 변환 유형과 정도가 값으로 지정됩니다. 에 이 예우리는 번역과 함께 일할 것입니다:

변환: 번역(50%, 50%);

번역 기능은 요소를 현재 위치에서 왼쪽/오른쪽 및 위/아래로 이동합니다. 두 개의 값이 괄호 안에 전달됩니다.

• 수평 이동 정도;
• 수직 이동 정도.

요소를 좌표 축 중 하나를 따라 이동해야 하는 경우 변환 단어 뒤에 축 이름을 지정하고 괄호 안에 필요한 이동량을 지정합니다.

변환: translateY(-20%);

일부 가이드에서는 공급업체 접두사가 포함된 변환을 볼 수 있습니다.

웹킷 변환: 번역(50%, 50%); -ms-변환: 번역(50%, 50%); 변환: 번역(50%, 50%);

2018년에는 더 이상 필요하지 않으며 Edge 및 IE를 포함한 모든 브라우저에서 속성이 지원됩니다.

필요한 DIV를 중앙에 배치하기 위해 CSS 변환 기능은 수직 및 수평 축에 대해 50% 값으로 작성됩니다. 이렇게 하면 브라우저가 요소를 현재 위치에서 너비와 높이의 절반으로 이동합니다. 너비 및 높이 속성을 지정해야 합니다.

변형 속성이 적용된 요소는 주변 개체에 관계없이 이동합니다. 한편으로 이것은 편리하지만 때때로 움직이는 DIV는 다른 컨테이너와 겹칠 수 있습니다. 따라서 웹 구성 요소를 중앙에 배치하는 이 방법은 비표준으로 간주되며 비상시에만 사용됩니다. 애니메이션에는 모든 CSS 표준에 따른 변환이 사용됩니다.

Flexbox 레이아웃 작업

Flexbox가 고려됩니다. 복잡한 방법으로웹 레이아웃 레이아웃. 하지만 숙달하면 생각보다 훨씬 쉽고 즐겁다는 것을 알게 될 것입니다. 표준 방법포맷. Flexbox 사양은 요소를 처리하는 유연하고 믿을 수 없을 정도로 강력한 방법입니다. 에서 영어의모듈 이름은 "유연한 컨테이너"로 번역됩니다. 너비, 높이, 요소 배열의 값은 들여쓰기 및 여백을 계산하지 않고 자동으로 조정됩니다.

이전 예제에서 이미 display 속성으로 작업했지만 블록(블록) 및 인라인(인라인 블록) 값으로 설정했습니다. 플렉스 레이아웃을 만들기 위해 display: flex를 사용할 것입니다. 먼저 플렉스 컨테이너가 필요합니다.

계단식 테이블에서 플렉스 컨테이너로 변환하려면 다음을 작성합니다.

플렉스 컨테이너(디스플레이: flex; )

그 안에 중첩된 모든 객체(직계 자식만 제외)는 플렉스 항목이 됩니다.

목록이 플렉스 컨테이너 안에 있으면 li 목록의 항목은 플렉스 항목으로 간주되지 않습니다. Flexbox 레이아웃은 ul에서만 작동합니다:

플렉스 아이템 배치 규칙

플렉스 아이템을 관리하기 위해서는 justify-content와 align-items가 필요합니다. 지정한 값에 따라 이 두 속성은 필요에 따라 개체를 자동으로 배치합니다. 중첩된 모든 DIV를 중앙에 배치해야 하는 경우 justify-content: center, align-items: center만 작성하고 다른 것은 작성하지 않습니다. 브라우저는 나머지 작업을 수행합니다.

플렉스 항목인 DIV에 텍스트를 가운데에 맞추려면 표준 텍스트 정렬 트릭을 사용할 수 있습니다. 또는 중첩된 각 DIV를 플렉스 컨테이너로 만들고 justify-content 로 콘텐츠를 관리할 수도 있습니다. 이 방법은 그래픽을 비롯한 다양한 콘텐츠, 다단계 목록을 비롯한 기타 중첩 개체가 포함된 경우 훨씬 더 합리적입니다.

요소를 가로 및 세로로 정렬할 수 있습니다. 다른 방법들. 방법 선택은 요소 유형(블록 또는 인라인), 위치 유형, 크기 등에 따라 다릅니다.

1. 블록/페이지 중앙에 가로 맞춤

1.1. 블록에 너비가 있는 경우:

div ( 너비: 300px; 여백: 0 auto; /*상위 블록 내에서 수평으로 요소를 중앙에 배치*/ )

인라인 요소를 이런 식으로 정렬하려면 display: block;

1.2. 블록이 다른 블록 내에 중첩되어 있고 이에 대해 설정된 너비/폭이 없는 경우:

.wrapper(텍스트 정렬:중앙;)

1.3. 블록에 너비가 있고 상위 블록의 중앙에 고정되어야 하는 경우:

.wrapper (위치: 상대; /*상위 상자를 상대 위치로 설정하여 나중에 상자 안에 절대 위치를 지정할 수 있도록*/) .box ( 너비: 400px; 위치: 절대; 왼쪽: 50%; 여백-왼쪽: - 200px; / *폭의 절반만큼 블록을 왼쪽으로 이동*/ )

1.4. 블록에 너비가 설정되지 않은 경우 상위 래퍼 블록을 사용하여 가운데에 배치할 수 있습니다.

.wrapper (text-align: center; /*블록의 내용 가운데 맞춤*/) 블록 사이 들여쓰기*/ )

2. 수직 정렬

2.1. 예를 들어 버튼과 메뉴 항목에 대해 텍스트가 한 줄을 차지하는 경우:

.버튼(높이: 50px; 줄 높이: 50px; )

2.2. 상위 블록 내에서 블록을 수직으로 정렬하려면:

.wrapper (위치: 상대;) .box ( 높이: 100px; 위치: 절대; 상단: 50%; 여백: -50px 0 0 0; )

2.3. 테이블 유형별 수직 정렬:

.wrapper ( 디스플레이: 테이블; 너비: 100%; ) .box ( 디스플레이: 테이블-셀; 높이: 100px; 텍스트-정렬: 중앙; 수직-정렬: 중간; )

2.4. 상자에 너비와 높이가 설정되어 있고 부모 상자의 중앙에 있어야 하는 경우:

.wrapper ( 위치: 상대; ) .box ( 높이: 100px; 너비: 100px; 위치: 절대; 상단: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0; 여백: 자동; 오버플로: 자동; /*to 내용이 퍼지지 않았습니다 */ )

2.5. CSS3 변환을 사용하여 페이지/블록 중앙에 절대 위치 지정:

요소에 차원이 있는 경우

div ( 너비: 300px; /*블록 너비 설정*/ 높이:100px; /*블록 높이 설정*/ transform: translate(-50%, -50%); 위치: 절대; 상단: 50%; 왼쪽: 50% ; )

요소에 차원이 없고 비어 있지 않은 경우

h1 ( 여백: 0; 변환: 번역(-50%, -50%); 위치: 절대; 상단: 50%; 왼쪽: 50%; )

브라우저 창 중앙에 이미지나 텍스트를 설정하는 것은 어렵지 않을 것 같습니다. CENTER 태그를 사용하면 모든 것이 우리가 의도한 위치에 들어갑니다. 그러나 모든 것이 그렇게 간단하지는 않습니다. 중앙 정렬에는 세 가지 방법이 있으며 각 방법은 브라우저마다 고유한 특성과 차이점이 있습니다.

가장 간단하고 편리한 태그 중 하나인 CENTER는 텍스트 블록을 정렬하도록 설계되었습니다. 이 태그는 그림과 표를 가운데에 맞추는 데에도 사용할 수 있습니다. 예외는 요소입니다. 또는 IMG 태그의 속성에 따라 정렬이 설정됩니다. 따라서 요소를 배치하면 CENTER 태그 내에서 그림이 오른쪽으로 정렬됩니다.

예 4.1. CENTER 태그로 가운데 맞추기

이 텍스트는 브라우저 창의 중앙에 정렬되며 기본
오른쪽에 그리기.

공식적으로 CENTER는 다른 블록 태그(P, PRE 등)에 대한 매개변수로만 사용해야 합니다. 그러나 Netscape Navigator 2.0 브라우저에서 CENTER는 독립형 태그로 도입되었습니다. 이 추가는 블록 태그를 사용할 때 나타나는 추가 수직 패딩을 제거하기 위한 것입니다. CENTER 태그 대신 텍스트가 단락 안에 배치되는 경우 (

) , 사이에 추가 세로 들여쓰기가 있습니다. 수평선그리고 이 텍스트.

CENTER는 HTML 사양의 일부가 아닙니다. "공식"에서 HTML 서식, 텍스트 정렬과 같은 작업은 태그 속성을 통해 수행해야 합니다(예:

) 또는 스타일을 사용합니다. 그럼에도 불구하고 이 태그는 존재할 권리를 얻었다. 그러나 HTML 4 W3 사양이 출시된 이후로 컨소시엄은 CENTER 태그의 사용을 피하고 요소가

, 예 4.2에 표시된 대로.

예 4.2. DIV 태그로 가운데 맞추기

---

중심을 맞추는 또 다른 방법은 스타일을 사용하는 것입니다. 스타일은 글꼴, 색상, 정렬 등과 ​​같은 서식 속성을 제어할 수 있는 지침입니다. P 태그를 중앙 텍스트로 재정의하는 예입니다.

예 4.3. 스타일로 가운데 맞추기

이제 위의 P 태그를 사용할 때
스타일, 단락의 텍스트는 브라우저 창의 중앙에 정렬됩니다.

요소를 세로로 CSS 사용개발자에게 특정 어려움을 제공하는 작업입니다. 그러나 이를 해결하는 몇 가지 방법이 있으며 이는 매우 간단합니다. 이 단원에서는 콘텐츠를 세로로 가운데에 맞추는 6가지 옵션을 제공합니다.

시작하자 일반적인 설명작업.

수직 센터링 문제

수평 센터링은 매우 간단하고 쉽습니다. 가운데에 있는 요소가 인라인인 경우 상대 정렬 속성을 사용합니다. 부모 요소. 요소가 블록 요소일 때 너비를 설정하고 자동 설치왼쪽 및 오른쪽 여백.

대부분의 사람들은 text-align: 속성을 사용할 때 세로 가운데 맞춤을 위해 vertical-align 속성을 참조합니다. 모든 것이 매우 논리적으로 보입니다. 테이블 템플릿을 사용했다면 아마도 valign 속성을 광범위하게 사용했을 것입니다. 이는 vertical-align이 올바른 방법이라는 믿음을 강화시켜줍니다.

그러나 valign 속성은 테이블 셀에서만 작동합니다. 그리고 vertical-align 속성은 매우 유사합니다. 또한 테이블 셀과 일부 인라인 요소에도 영향을 줍니다.

vertical-align 속성의 값은 부모 인라인 요소를 기준으로 합니다.

• 텍스트 줄에서 정렬은 줄 높이를 기준으로 합니다.
• 테이블 셀은 특수 알고리즘에 의해 계산된 값에 대한 정렬을 사용합니다(일반적으로 라인 높이가 얻어짐).

그러나 불행히도 vertical-align 속성은 블록 수준 요소(예: div 요소 내부의 단락)에서 작동하지 않습니다. 이러한 상황은 수직 정렬 문제에 대한 해결책이 없다는 생각으로 이어질 수 있습니다.

그러나 블록 수준 요소를 중앙에 배치하는 다른 방법이 있으며, 선택은 외부 컨테이너와 관련하여 중앙에 배치되는 항목에 따라 다릅니다.

라인 높이 방법

이 방법한 줄의 텍스트를 세로로 가운데에 맞추고 싶을 때 작동합니다. 줄 높이를 글꼴 크기보다 크게 설정하기만 하면 됩니다.

기본적으로 여유 공간은 텍스트 위와 아래에 균등하게 분배됩니다. 그리고 선은 수직으로 중앙에 위치합니다. 종종 라인 높이는 요소의 높이와 동일하게 만들어집니다.

HTML:

CSS:

#자식(줄 높이: 200px; )

이 방법은 모든 브라우저에서 작동하지만 한 줄에만 사용할 수 있습니다. 예제에서 200px의 값은 임의로 선택됩니다. 텍스트 글꼴 크기보다 큰 값을 사용할 수 있습니다.

라인 높이로 이미지 중앙에 맞추기

콘텐츠가 이미지라면? 위의 방법이 효과가 있을까요? 답은 CSS 코드의 다른 행에 있습니다.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

line-height 속성의 값은 이미지의 높이보다 커야 합니다.

CSS 테이블 메서드

위에서 언급했듯이 vertical-align 속성은 잘 작동하는 테이블 셀에 적용됩니다. 요소를 테이블 셀로 렌더링하고 그 위에 vertical-align 속성을 사용하여 콘텐츠를 세로로 가운데에 맞출 수 있습니다.

메모: CSS 테이블 HTML 테이블과 동일하지 않습니다.

HTML:

CSS:

#parent (디스플레이: table;) #child ( display: table-cell; vertical-align: middle; )

테이블 출력을 부모 div로 설정하고 중첩된 div를 테이블 셀로 렌더링합니다. 이제 내부 컨테이너에서 vertical-align 속성을 사용할 수 있습니다. 그 안에 있는 모든 것이 수직으로 중앙에 위치합니다.

위의 방법과 달리 이 경우 div 요소가 콘텐츠에 맞게 크기가 조정되므로 콘텐츠가 동적일 수 있습니다.

이 방법의 단점은 이전 버전의 IE에서는 작동하지 않는다는 것입니다. 중첩된 컨테이너에 대해 display: inline-block 속성을 사용해야 합니다.

절대 위치 및 음수 마진

이 방법은 모든 브라우저에서도 작동합니다. 그러나 중심 요소에 높이가 지정되어야 합니다.

예제 코드는 수평 및 수직 센터링을 동시에 수행합니다.

HTML:

CSS:

#parent(위치:상대;) #하위(위치:절대;상단:50%;왼쪽:50%;높이:30%;폭:50%;여백:-15% 0 0 -25%; )

먼저 요소의 위치 유형을 설정합니다. 그런 다음 중첩된 div에서 top 및 left 속성을 상위 요소의 중심인 50%로 설정합니다. 하지만 센터는 왼쪽을 친다. 상단 모서리중첩 요소. 따라서 위로 들어 올려(높이의 절반) 왼쪽(너비의 절반)으로 이동하면 중심이 상위 요소의 중심과 일치하게 됩니다. 따라서 이 경우 요소의 높이를 아는 것이 필요합니다. 그런 다음 요소에 음수 위쪽 및 왼쪽 여백을 각각 높이와 너비의 절반과 동일하게 지정합니다.

이 방법은 모든 브라우저에서 작동하지 않습니다.

절대 위치 및 스트레칭

예제 코드는 수직 및 수평 센터링을 수행합니다.

HTML:

CSS:

#parent(위치:상대;) #하위(위치:절대;위:0;아래:0;왼쪽:0;오른쪽:0;너비:50%;높이:30%;여백:자동;)

이 방법의 이면에 있는 아이디어는 top, bottom, right 및 left 속성을 0으로 설정하여 중첩된 요소를 상위 요소의 경계 4개 모두로 늘리는 것입니다.

모든 면에 자동 여백 형성을 설정하면 작업이 완료됩니다. 동등한 가치 4면 모두에서 중첩된 div 요소를 상위 요소의 중앙으로 가져옵니다.

불행히도 이 방법은 IE7 이하에서는 작동하지 않습니다.

동일한 패딩 상단 및 하단

이 메서드는 부모 요소 위와 아래에 동일한 패딩을 명시적으로 설정합니다.

HTML:

CSS:

#부모 ( 패딩: 5% 0; ) # 자식 ( 패딩: 10% 0; )

코드에서 CSS 예위쪽 및 아래쪽 여백은 두 요소 모두에 대해 설정됩니다. 중첩된 요소의 경우 패딩을 설정하면 수직으로 가운데에 배치됩니다. 그리고 부모 요소의 패딩은 중첩된 요소의 중앙에 위치합니다.

상대 단위는 요소의 크기를 동적으로 조정하는 데 사용됩니다. 그리고 절대 측정 단위의 경우 계산을 수행해야 합니다.

예를 들어 상위 요소의 높이가 400px이고 중첩된 요소의 높이가 100px이면 상단과 하단에 150px의 패딩이 필요합니다.

150 + 150 + 100 = 400

%를 사용하면 계산을 브라우저에 맡길 수 있습니다.

이 방법은 모든 곳에서 작동합니다. 단점은 계산이 필요하다는 것입니다.

메모:이 방법은 요소의 여백을 설정하여 작동합니다. 요소 내에서 여백을 사용할 수도 있습니다. 여백 또는 패딩 적용 여부는 프로젝트의 특성에 따라 결정해야 합니다.

부동 div

이 방법은 문서에서 중첩된 요소의 위치를 ​​제어하는 ​​데 도움이 되는 부동 div 요소를 사용합니다. 부동 div는 HTML 코드에서 중첩 요소 앞에 배치됩니다.

HTML:

CSS:

#parent (높이: 250px;) #floater ( float: left; height: 50%; width: 100%; margin-bottom: -50px; ) #child ( clear: both; height: 100px; )

빈 div를 왼쪽이나 오른쪽으로 오프셋하고 상위 요소의 50% 높이를 지정합니다. 이렇게 하면 상위 요소의 위쪽 절반을 채웁니다.

이 div는 부동 상태이므로 문서의 일반적인 흐름에서 제거되고 중첩된 요소를 해제해야 합니다. 예제는 clear: both 를 사용하지만 부동 빈 div 의 오프셋과 동일한 방향을 사용하는 것으로 충분합니다.

중첩된 div 요소의 위쪽 테두리는 빈 div 요소의 아래쪽 테두리 바로 아래에 있습니다. 중첩된 요소를 부동 빈 요소 높이의 절반만큼 위로 이동해야 합니다. 이 문제를 해결하기 위해 부동 빈 div 요소에 대한 margin-bottom 속성의 음수 값이 사용됩니다.

이 방법은 모든 브라우저에서도 작동합니다. 그러나 이를 사용하려면 빈 div 요소가 추가로 필요하고 중첩 요소의 높이에 대한 지식이 필요합니다.

결론

설명된 모든 방법은 사용하기 쉽습니다. 어려움은 그들 중 어느 것도 모든 경우에 적합하지 않다는 사실에 있습니다. 프로젝트를 분석하고 요구 사항에 가장 적합한 프로젝트를 선택해야 합니다.