카테고리 없음

Flexbox로 만드는 사이드바 레이아웃 안정성 높이기

김딸기* 2024. 8. 8. 19:10

<!DOCTYPE html>
<html>
    <head>
        <title>My Bucket Lists</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

       <div class="playground">
            <div class="sidebar">sidebar</div>
            <div class="contents">
                contentcontentscont
                entscontentscontent
                scontentsconte
                ntscontentscontentsco
                ntentscontentss</div>

       </div>

    </body>
</html>

 

.playground{
    background-color: aqua;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    min-height: 400px;
    gap: 10px;
}
 
body{
    background-color: brown;
}

 

 

  1. .playground 컨테이너:
    • background-color: aqua;: 컨테이너의 배경색을 청록색으로 설정합니다.
    • border-radius: 10px;: 컨테이너의 모서리를 둥글게 10px로 설정합니다.
    • padding: 10px;: 컨테이너 내부의 여백을 10px로 설정합니다.
    • display: flex;: 플렉스 박스 레이아웃을 사용하여 자식 요소들을 배치합니다.
    • min-height: 400px;: 컨테이너의 최소 높이를 400px로 설정합니다.
    • gap: 10px;: 플렉스 항목 사이의 간격을 10px로 설정합니다.

.contents, .sidebar{
    background-color: mediumaquamarine;
    color: lime;
    font-size: 40px;
    border: 6px solid green;
    border-radius: 10px;
}
  1. .contents와 .sidebar 공통 스타일:
    • background-color: mediumaquamarine;: 배경색을 중간 아쿠아마린으로 설정합니다.
    • color: lime;: 텍스트 색상을 라임색으로 설정합니다.
    • font-size: 40px;: 글자 크기를 40px로 설정합니다.
    • border: 6px solid green;: 테두리를 초록색 실선 6px로 설정합니다.
    • border-radius: 10px;: 모서리를 둥글게 10px로 설정합니다.

 

.sidebar{
    width: 180px;  
    min-width: 180px;

}

.sidebar 스타일:

  • width: 180px;: 사이드바의 너비를 180px로 고정합니다.
  • min-width: 180px;: 사이드바의 최소 너비를 180px로 설정하여, 사이드바의 너비가 줄어들지 않도록 합니다.

 

.contents{
    flex-grow: 1;
    flex-basis: 0;
}
  1. .contents 스타일:
    • flex-grow: 1;: 남은 공간을 차지하도록 설정합니다. .sidebar 요소가 고정 너비를 차지한 후, .contents 요소가 남은 공간을 모두 차지하게 됩니다.
    • flex-basis: 0;: 초기 크기를 0으로 설정하여 남은 공간을 최대한 활용합니다. 이렇게 하면 .contents 요소가 플렉스 컨테이너의 나머지 공간을 차지하도록 유연하게 조정됩니다. =>sidebar의 영역을 침법하지 않음

이 설정을 통해 .sidebar 요소는 고정된 너비 180px를 가지며, .contents 요소는 남은 공간을 차지하게 되어 유동적으로 크기가 조정됩니다.

 

if)  contents내 크기가 과하게 큰 자식요소로 인해 부모컨테이너의 안정성이 깨진다면?

->즉 내부컨텐츠가 부모의 너비에 영향을 끼치지 않게끔 하려면 어떻게 해야 하는가?

 

sol) min-width를 0으로 설정

-> .contents 요소의 최소 너비를 0으로 설정해 .contents 요소가 부모 컨테이너의 크기에 맞춰 줄어들 수 있습니다.

 

-내부 컨텐츠는 안정성이 보장된 레이아웃 내에서 배치되는 것이다

 

 

 

.sidebar{
    width: 180px;  
}
  • width: 180px;: .sidebar 요소의 너비를 180px로 고정합니다. 이 설정으로 사이드바는 항상 180px 너비를 가지며, 너비가 조정되지 않습니다.
.contents{
    flex-grow: 1;/*가용공간을 가득채워라*/
    flex-basis: 0;/*내부컨텐츠+grow가 아닌 grow만으로 사이즈 결정, 즉 내부컨텐츠의 차지공간 없앰*/
    min-width: 0;/*자식 컨텐츠에 의해 부모너비가 커지는것을 방지*/
}
  • flex-grow: 1;: 이 속성은 .contents 요소가 플렉스 컨테이너의 남은 공간을 모두 차지하도록 설정합니다. 플렉스 컨테이너 내에서 .contents 요소는 가능한 한 많은 공간을 차지합니다.
  • flex-basis: 0;: 이 속성은 플렉스 항목의 기본 크기를 설정합니다. flex-basis: 0;는 .contents 요소의 기본 크기를 0으로 설정하여, 플렉스 컨테이너 내에서 가능한 모든 남은 공간을 차지하도록 합니다. 이 설정은 flex-grow 속성에 의해 .contents 요소가 늘어날 수 있도록 합니다.
  • min-width: 0;: 이 속성은 .contents 요소의 최소 너비를 0으로 설정합니다. 이를 통해 .contents 요소가 부모 컨테이너의 크기에 맞춰 줄어들 수 있습니다. 만약 이 속성이 없다면, .contents 요소는 기본적으로 최소 너비를 유지하려 할 수 있어 플렉스 레이아웃에서 예상하지 못한 동작을 할 수 있습니다.

 

이 설정은 .sidebar 요소의 너비를 고정하고, .contents 요소가 플렉스 컨테이너의 남은 모든 공간을 차지하도록 합니다. .contents 요소는 기본 크기를 0으로 설정하고, 최소 너비를 0으로 설정하여, 사이드바의 너비를 초과하는 공간을 차지할 수 있습니다. flex-grow 속성 덕분에 .contents 요소는 사이드바의 너비를 제외한 모든 공간을 차지하게 됩니다.

이렇게 설정하면 사이드바는 항상 180px 너비를 유지하고, .contents 요소는 그 나머지 공간을 유동적으로 채우게 됩니다. .contents 요소의 크기가 부모 컨테이너의 크기에 맞춰 조정되며, 너무 커지지 않고 자연스럽게 레이아웃이 조정됩니다.

 

 

flex-grow: 1     => 가용 공간 가득 채우라. 이제 flex-basis를 곁들인... flex-basis: 0    => 내부 콘텐츠 크기 + grow 가 아닌, grow로만 너비가 결정될 수 있도록 함. min-width: 0     => 내부 콘텐츠가 부모의 너비에 영향을 끼치지 않게끔 처리함.