티스토리 뷰

IT지식

Flexbox, CSS 레이아웃 기술(1)

고슈슈 2024. 8. 19. 09:24

목차



    반응형

    웹 디자인을 하다 보면 페이지 안의 요소들을 깔끔하고 질서 있게 배치하는 것이 생각보다 까다롭다는 것을 느끼게 됩니다. 이럴 때 도움을 주는 것이 바로 CSS Flexbox입니다. 저도 콘텐츠 배치할 때  아주 자주 사용하는 CSS입니다.

     

    오늘은 이 강력하면서도 사용하기 쉬운 Flexbox에 대해 이야기해 보겠습니다.

    ★ Flexbox란?

    Flexbox는 CSS에서 레이아웃을 쉽게 만들 수 있도록 도와주는 도구입니다. 이름에서 알 수 있듯이, ‘flexible box’의 줄임말로, 유연한 상자를 만들 수 있다는 의미입니다. Flexbox를 사용하면 웹 페이지 내의 요소들이 정렬되고 공간이 배분되는 방식을 직관적으로 관리할 수 있습니다.

     

    쉽게 말해서, Flexbox는 여러 아이템을 한 줄 또는 한 열에 자연스럽게 정렬하도록 돕는 마법의 상자 같은 것!

     

    특히 다양한 화면 크기와 해상도에서도 요소들이 예쁘게 정렬되도록 하는 데 탁월하죠. Flexbox의 가장 큰 장점은 복잡한 레이아웃도 상대적으로 간단하게 구현할 수 있다는 점입니다. 예전에는 float나 inline-block 같은 속성을 조합해 억지로 레이아웃을 만들었다면, 이제는 Flexbox 하나로 많은 것을 해결할 수 있게 되었습니다.

     

    ★ Flexbox의 기본 개념

    Flexbox를 사용하려면 먼저 flex container와 flex item이라는 개념을 이해해야 합니다. flex container는 부모 요소, flex item은 자식 요소를 가리킵니다. Flexbox 레이아웃을 적용하려면 부모 요소에 display: flex;를 지정하면 됩니다. 그러면 그 안에 있는 자식 요소들이 flex item이 되어 자동으로 정렬되기 시작합니다.

    css코드 복사
.container {
    display: flex;
}

     

    이제 이 .container 안에 있는 모든 요소들이 Flexbox의 영향을 받게 되는 것입니다.

     

    ★ Flexbox의 주요 속성들

    Flexbox의 주요 속성들은 flex container와 flex item 각각에 적용됩니다. 이 속성들을 이해하면 복잡해 보이는 레이아웃도 쉽게 다룰 수 있습니다.

     

    1) Flex Container 속성들

    • flex-direction ▶ 아이템이 어떻게 배치될지를 결정합니다. 기본값은 row로, 가로 방향(왼쪽에서 오른쪽)으로 배치됩니다. column으로 설정하면 세로 방향(위에서 아래)으로 아이템들이 배치됩니다.
    • justify-content ▶ 주 축(main axis)에서 아이템들을 어떻게 정렬할지 결정합니다. 예를 들어, flex-start는 왼쪽(또는 위쪽)에, flex-end는 오른쪽(또는 아래쪽)에, center는 가운데 정렬을 의미합니다. space-between이나 space-around를 사용하면 아이템들 간의 간격도 조절할 수 있습니다.
    • align-items ▶ 교차 축(cross axis)에서 아이템들을 어떻게 정렬할지 결정합니다. stretch(기본값), flex-start, flex-end, center 등이 있습니다.

    2) Flex Item 속성들

    • flex-grow ▶ 아이템이 flex container 안에서 얼마나 커질 수 있는지를 결정합니다. 기본값은 0으로, 모든 아이템이 동일한 크기를 유지합니다. 만약 flex-grow를 1로 설정하면 여유 공간을 차지하게 되며, 값이 클수록 더 많이 차지하게 됩니다.
    • flex-shrink ▶ flex container가 줄어들 때, 아이템이 얼마나 줄어들 수 있는지를 결정합니다. flex-shrink의 값이 클수록 더 많이 줄어듭니다.
    • flex-basis ▶ 아이템의 기본 크기를 설정합니다. 이 크기를 기준으로 아이템이 커지거나 작아집니다.
    • align-self ▶ 특정 아이템에만 교차 축에서의 정렬을 다르게 설정할 수 있습니다. align-items와 비슷하지만, 개별 아이템에만 적용된다는 점이 다릅니다.

     

    ★ 간단한 네비게이션 바 만들어 보기

    이제 실제로 Flexbox를 활용해 간단한 네비게이션 바를 만들어 보겠습니다. 이 예제에서는 버튼들이 가로로 나란히 배열되고, 화면 크기에 따라 자연스럽게 조정되도록 할 것입니다.

    html코드 복사
<div class="navbar">
    <div class="logo">MyLogo</div>
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
</div>


    css코드 복사
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #333;
}

.logo {
    color: white;
    font-size: 1.5em;
}

.menu a {
    color: white;
    padding: 10px;
    text-decoration: none;
}

.menu a:hover {
    background-color: #555;
}

    이 코드를 적용하면, MyLogo는 왼쪽에, 메뉴 항목들은 오른쪽에 정렬된 간단한 네비게이션 바가 만들어집니다. Flexbox 덕분에 화면 크기가 변하더라도 요소들이 깔끔하게 정렬됩니다.

     

    ★ Flexbox로 할 수 있는 일들

    Flexbox는 단순히 가로, 세로 정렬을 넘어서 다양한 레이아웃을 구현할 수 있습니다. 예를 들어, 카드 레이아웃을 만들거나, 버튼 그룹을 정렬하거나, 다양한 크기의 이미지 갤러리를 정렬할 때 Flexbox를 활용할 수 있습니다. 특히, 화면 크기에 따라 유연하게 반응하는 레이아웃을 만들 때 아주 유용합니다.

    Flexbox는 현대 웹 디자인에서 필수적인 도구 중 하나로 자리 잡았습니다. 직관적인 레이아웃 설정, 유연한 정렬, 그리고 유지보수의 용이성 덕분에 많은 웹 디자이너와 개발자들이 Flexbox를 애용하고 있습니다.

     

     

    CSS Flexbox는 웹 페이지에서 요소들을 깔끔하게 정렬하고 배치하는 데 매우 유용한 도구입니다. 복잡한 레이아웃도 Flexbox를 활용하면 쉽게 해결할 수 있죠. 기본 개념만 잘 이해하면, 여러분도 다양한 웹 페이지에서 Flexbox를 활용해 더욱 멋진 레이아웃을 만들 수 있습니다.

    이제 Flexbox의 힘을 경험해보세요!

    반응형