HTML div를 나란히 배치

1. float 속성 사용
2. flexbox 속성 사용
3. CSS 그리드 사용

이 게시물에서는 HTML 문서에서 두 개의 div 요소를 나란히 표시하는 많은 방법을 살펴봅니다.

float 속성 사용

float CSS 속성을 사용하면 텍스트 및 인라인 요소가 컨테이너의 왼쪽 또는 오른쪽에 배치된 요소 주위를 둘러쌀 수 있습니다. 그럼에도 불구하고 요소는 일반 흐름의 일부가 아니더라도 페이지의 흐름에 포함됩니다.

통사론:

float: $value;

이 값은 left, right, none, inline-start, inline-end 등이 될 수 있습니다.

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<div class="float-parent">
  <div class="float-child">Float Child 1</div>
  <div class="float-child">Float Child 2</div>
</div>

.float-parent {
    padding: 20px;
}

.float-child {
    width: 45%;
    float: left;
    padding: 20px;
    border: 1px dotted black;
}

이전 예제에서는 float 속성을 사용하여 각 div를 플로팅하여 나란히 놓았습니다. 둘 다 왼쪽에 떠 있기 때문에 적당한 공간이 있으면 나란히 표시됩니다.

두 개의 .float-child divs가 있고 각각 폭이 45%이므로 적합합니다.

HTML과 호환되는 모든 브라우저에서 위의 코드 줄을 실행합니다. 다음과 같은 결과가 표시됩니다.

flexbox 속성 사용

float 또는 positioning이 필요하지 않은 Flexible Box Layout 모듈을 사용하면 유연하고 반응이 빠른 레이아웃 구조를 보다 간단하게 개발할 수 있습니다. Flexbox는 모바일 친화적이고 반응이 빨라 소규모 레이아웃을 디자인하는 데 편리합니다.

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
</div>

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

이전 예에서는 display: flex;를 설정했습니다. flexbox의 .flex-parent 클래스 요소를 사용하여 상위 div 컨테이너에서. 이렇게 하면 flexbox가 활성화됩니다.

그런 다음 flex: 1;을 설정합니다. 각 .flex-child div 요소에서. 이 수치는 상위 플렉스 요소에 있는 각 하위 플렉스 요소의 너비 사이의 비율로 작동합니다.

그들은 동일하기 때문에 사용 가능한 공간을 동등하게 공유합니다. 두 개의 자식 div 구성 요소가 있습니다. 따라서 각 div는 공간의 50%를 차지합니다.

HTML과 호환되는 모든 브라우저에서 위의 코드 줄을 실행합니다. 다음과 같은 결과가 표시됩니다.

CSS 그리드 사용

‘CSS 그리드’ 레이아웃은 페이지를 주요 영역으로 나누고 HTML 프리미티브 기반 컨트롤의 구성 요소 간 연결을 지정하는 데 탁월합니다.

그리드의 한 가지 중요한 변경 사항은 먼저 그리드 템플릿의 모양을 선택한다는 것입니다. 레이아웃에서 원하는 열 및/또는 행 수를 나타냅니다.

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<div class="grid-parent">
    <div class="grid-child">
        Grid Child 1
    </div>
    <div class="grid-child">
        Grid Child 2
    </div>
</div>

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

이 경우 너비가 같은 두 개의 열이 필요합니다. 따라서 디스플레이: 그리드;를 사용합니다. 클래스 .grid-container 요소를 통해 상위 div 요소에서 grid를 활성화하는 속성.

그런 다음 grid-template-columns 매개변수를 사용하여 레이아웃에 원하는 열 수를 추가합니다.

동일한 너비의 두 열을 원하기 때문에 1fr 1fr로 설정합니다. 이렇게 하면 각 열 사이에 1 fr = fractional unit 간격이 있는 2열 레이아웃을 생성하도록 브라우저에 지시합니다.

flexbox 접근 방식에서 사용한 flex: 1 규칙은 한 열과 다른 열의 비율인 fr 단위와 유사합니다. 열이 1fr 1fr로 설정된 경우 각 열은 동일한 양의 공간을 사용합니다.

HTML과 호환되는 모든 브라우저에서 위의 코드 줄을 실행합니다. 다음과 같은 결과가 표시됩니다.

데모