코카티비-CoCaTV

코딩ㆍ개발 정보/HTML 연습

[HTML] Flex, nth-child, Grid, Block, vw, vh, position 예제들

RioRex 2024. 7. 25.
반응형 웹 페이지를 모바일 단위로 만들어서 화면이 점점 커질때 이런 단위를 한 줄에 여러개 표현 하게 되는데 그 방법을 예를 들어 알려줘

 

반응형 기본 레이아웃

 

반응형 웹 페이지를 제작할 때, CSS의 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃을 조정할 수 있습니다. 예를 들어, 모바일 화면에서는 단위가 하나씩 표시되고 화면이 커질수록 여러 개의 단위가 한 줄에 표시되도록 설정할 수 있습니다.

아래는 이러한 레이아웃을 설정하는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page</title>
    <style>
        /* 기본 스타일: 모든 요소들이 한 줄에 하나씩 표시됨 */
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 100%; /* 초기에는 한 줄에 하나씩 */
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
        }

        /* 화면이 600px 이상일 때: 한 줄에 두 개 */
        @media (min-width: 600px) {
            .item {
                flex: 1 1 48%;
            }
        }

        /* 화면이 900px 이상일 때: 한 줄에 세 개 */
        @media (min-width: 900px) {
            .item {
                flex: 1 1 30%;
            }
        }

        /* 화면이 1200px 이상일 때: 한 줄에 네 개 */
        @media (min-width: 1200px) {
            .item {
                flex: 1 1 22%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

설명

  1. 기본 스타일: .container 클래스는 flex 레이아웃을 사용하여 아이템들을 배치합니다. .item 클래스는 기본적으로 flex: 1 1 100%를 사용하여 한 줄에 하나씩 표시됩니다.
  2. 미디어 쿼리: 화면의 크기에 따라 .item 클래스의 flex 속성을 변경하여 한 줄에 표시되는 아이템의 개수를 조절합니다.
    • @media (min-width: 600px): 화면이 600px 이상일 때 한 줄에 두 개의 아이템이 표시되도록 설정합니다.
    • @media (min-width: 900px): 화면이 900px 이상일 때 한 줄에 세 개의 아이템이 표시되도록 설정합니다.
    • @media (min-width: 1200px): 화면이 1200px 이상일 때 한 줄에 네 개의 아이템이 표시되도록 설정합니다.

이 예제는 반응형 웹 디자인을 구현하는 기본적인 방법을 보여줍니다. 이를 통해 다양한 화면 크기에 대응하는 레이아웃을 손쉽게 구성할 수 있습니다. 필요에 따라 미디어 쿼리를 추가하거나 기존 스타일을 수정하여 원하는 레이아웃을 구현할 수 있습니다.

 

 

반응형 비율 변경 레이아웃

 

그렇다고 했을 때 동일한 비율 1:1:1 배치하는 것 아닌 2:1 1:3 1:2 와 같이 비중을 달리하려고 할때 예시를 들어줘

 

화면 크기에 따라 아이템의 비중을 다르게 조정하려면 flex-grow, flex-shrink, flex-basis 속성을 활용하여 각 아이템의 크기를 비율로 조정할 수 있습니다. 아래 예제는 다양한 화면 크기에서 각 아이템이 서로 다른 비율로 배치되는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page with Variable Item Ratios</title>
    <style>
        /* 기본 스타일: 모든 요소들이 한 줄에 하나씩 표시됨 */
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
        }

        /* 화면이 600px 이상일 때: 비율 2:1 */
        @media (min-width: 600px) {
            .item:nth-child(2n-1) {
                flex: 2 1 0; /* 2의 비율 */
            }
            .item:nth-child(2n) {
                flex: 1 1 0; /* 1의 비율 */
            }
        }

        /* 화면이 900px 이상일 때: 비율 1:3 */
        @media (min-width: 900px) {
            .item:nth-child(3n-2) {
                flex: 1 1 0; /* 1의 비율 */
            }
            .item:nth-child(3n-1) {
                flex: 3 1 0; /* 3의 비율 */
            }
            .item:nth-child(3n) {
                flex: 1 1 0; /* 1의 비율 */
            }
        }

        /* 화면이 1200px 이상일 때: 비율 1:2 */
        @media (min-width: 1200px) {
            .item:nth-child(2n-1) {
                flex: 1 1 0; /* 1의 비율 */
            }
            .item:nth-child(2n) {
                flex: 2 1 0; /* 2의 비율 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

 

설명

  1. 기본 스타일: .container는 flex 레이아웃을 사용하며, .item은 기본적으로 한 줄에 하나씩 표시됩니다.
  2. 미디어 쿼리: 화면 크기에 따라 아이템의 비율을 조정합니다.
    • @media (min-width: 600px): 화면이 600px 이상일 때, 홀수 번째 아이템은 flex: 2 1 0을 사용하여 비율을 2로 설정하고, 짝수 번째 아이템은 flex: 1 1 0을 사용하여 비율을 1로 설정합니다.
    • @media (min-width: 900px): 화면이 900px 이상일 때, 첫 번째와 세 번째 아이템은 flex: 1 1 0을 사용하여 비율을 1로 설정하고, 두 번째 아이템은 flex: 3 1 0을 사용하여 비율을 3으로 설정합니다.
    • @media (min-width: 1200px): 화면이 1200px 이상일 때, 홀수 번째 아이템은 flex: 1 1 0을 사용하여 비율을 1로 설정하고, 짝수 번째 아이템은 flex: 2 1 0을 사용하여 비율을 2로 설정합니다.

이 예제는 각기 다른 화면 크기에서 아이템의 비율을 조정하는 방법을 보여줍니다. 필요에 따라 미디어 쿼리와 flex 속성을 추가 또는 수정하여 원하는 레이아웃을 구현할 수 있습니다.

 

flex: 1 1 44% 상세 설명해줘

 

반응형 Flex 비율 설정 설명

 

flex 속성은 flex-grow, flex-shrink, flex-basis 세 가지 속성을 한 줄에 지정할 수 있는 단축 속성입니다. flex: 1 1 44%는 각각의 속성을 다음과 같이 설정합니다:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 44%

이 속성들이 어떻게 작용하는지 상세히 설명해드리겠습니다.

flex-grow

flex-grow는 컨테이너의 여유 공간을 아이템이 얼마나 차지할지를 결정합니다. 값이 1이면 여유 공간이 있을 때 해당 아이템이 다른 아이템과 균등하게 공간을 차지합니다. 예를 들어, 두 아이템 모두 flex-grow: 1로 설정되면 여유 공간을 반반씩 나누어 갖습니다.

flex-shrink

flex-shrink는 컨테이너의 공간이 부족할 때 아이템이 얼마나 줄어들 수 있는지를 결정합니다. 값이 1이면 공간이 부족할 때 해당 아이템이 다른 아이템과 균등하게 줄어듭니다. 예를 들어, 두 아이템 모두 flex-shrink: 1로 설정되면 부족한 공간을 반반씩 나누어 줄어듭니다. 값이 0이면 아이템은 줄어들지 않습니다.

flex-basis

flex-basis는 아이템의 기본 크기를 설정합니다. 이 값은 width나 height와 비슷하게 작용하지만, flex 컨테이너 내에서 사용될 때의 초기 크기를 결정합니다. 예를 들어, flex-basis: 44%는 아이템이 컨테이너의 44%의 너비를 가지도록 설정합니다.

종합 설명

flex: 1 1 44%는 다음과 같은 의미를 가집니다:

  • 기본 크기: 아이템은 컨테이너의 너비의 44%를 차지합니다.
  • 여유 공간: 컨테이너에 여유 공간이 있으면 다른 아이템과 균등하게 여유 공간을 나누어 갖습니다.
  • 부족한 공간: 컨테이너에 공간이 부족하면 다른 아이템과 균등하게 공간을 줄입니다.

이러한 설정을 통해 반응형 레이아웃에서 아이템의 크기를 유연하게 조정할 수 있습니다. 예를 들어, 컨테이너에 네 개의 아이템이 있고 각 아이템에 flex: 1 1 44%를 설정하면, 각 아이템이 기본적으로 44%의 너비를 차지하지만, 여유 공간이나 부족한 공간이 발생할 경우 적절히 늘어나거나 줄어듭니다.

예제

아래는 flex: 1 1 44%를 사용하는 HTML과 CSS 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 아이템 사이에 간격을 추가 */
        }
        .item {
            flex: 1 1 44%; /* 기본적으로 컨테이너의 44%를 차지 */
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

 

이 예제에서 네 개의 아이템은 각각 기본적으로 컨테이너의 44%를 차지하며, 여유 공간이 있거나 부족할 때 적절히 늘어나거나 줄어듭니다. 아이템 사이에는 10px의 간격이 있습니다.

 

 

nth-child 예시

 

n은 1부터야 0부터야?

 

nth-child()와 같은 CSS의 의사 클래스에서 사용되는 n은 1부터 시작합니다.

다음은 nth-child 사용 예시입니다:

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }

        /* 첫 번째와 네 번째 아이템에 스타일 적용 */
        .item:nth-child(3n+1) {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

 

설명

  1. .item:nth-child(3n+1)는 아이템 중에서 3의 배수에 1을 더한 순서(즉, 첫 번째, 네 번째, 일곱 번째, ...)의 아이템에 스타일을 적용합니다.
  2. n은 1부터 시작하기 때문에 첫 번째 아이템은 3*0 + 1 = 1이 됩니다.
  3. 두 번째 아이템은 3*1 + 1 = 4가 됩니다.

따라서 nth-child()에서 n은 1부터 시작하여 요소의 순서를 지정합니다.

 

:nth-child(m)에서 m은 1부터이고, 3n+1 에서의 n 은 0부터인거 같은데?
 
 

맞습니다, :nth-child(m)에서 m은 1부터 시작하며, 3n+1과 같은 식에서 n은 0부터 시작합니다. 이를 구체적으로 설명해 드리겠습니다.

CSS :nth-child 의사 클래스

:nth-child 의사 클래스는 선택자에 따라 요소의 순서를 지정할 때 사용됩니다. 여기서 m은 1부터 시작하며, 3n+1과 같은 식에서의 n은 0부터 시작합니다.

3n+1 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }

        /* 첫 번째, 네 번째, 일곱 번째 아이템에 스타일 적용 */
        .item:nth-child(3n+1) {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

 

설명

  1. 기본 설정: .container는 flex 레이아웃을 사용하며, .item은 기본적으로 한 줄에 세 개씩 표시됩니다.
  2. :nth-child(3n+1): 여기서 n은 0부터 시작합니다.
    • n = 0이면, 3*0 + 1 = 1, 즉 첫 번째 아이템에 적용됩니다.
    • n = 1이면, 3*1 + 1 = 4, 즉 네 번째 아이템에 적용됩니다.
    • n = 2이면, 3*2 + 1 = 7, 즉 일곱 번째 아이템에 적용됩니다.

따라서 3n+1 패턴은 1, 4, 7, 10, ... 번째 아이템에 스타일을 적용합니다.

더 많은 예제

다른 패턴도 사용해 볼 수 있습니다.

/* 홀수 번째 아이템 */
.item:nth-child(odd) {
    background-color: lightgreen;
}

/* 짝수 번째 아이템 */
.item:nth-child(even) {
    background-color: lightcoral;
}

/* 2의 배수 번째 아이템 (2, 4, 6, ...) */
.item:nth-child(2n) {
    background-color: lightblue;
}

/* 3의 배수 번째 아이템 (3, 6, 9, ...) */
.item:nth-child(3n) {
    background-color: lightyellow;
}

 

결론

  • :nth-child(m)의 m은 1부터 시작합니다.
  • 3n+1에서 n은 0부터 시작하여 주어진 패턴에 맞춰 요소를 선택합니다.

이러한 패턴을 사용하면 다양한 방식으로 요소에 스타일을 적용할 수 있습니다.

:nth-child(3n) 이라고 했을 때 n은 0부터 이기때뭉에 :nth-child(0) 이라는 것도 생기지만 선택할 위치가 없으므로 무시되는건가? 그래서 0, 3, 6, 9 번째까 아니라 3, 6, 9 번째가 되는건가?

 

:nth-child(3n)에서 n은 0부터 시작하지만, :nth-child(0)과 같은 선택자는 존재하지 않으며, 이는 무시됩니다. 따라서, 실제로 선택되는 위치는 3n에서 n이 0, 1, 2, 3, ... 값일 때의 결과인 3, 6, 9, ... 번째 요소가 됩니다.

요약

  • :nth-child(3n)에서 n이 0일 때 :nth-child(0)은 무시됩니다.
  • 따라서, 실제로 선택되는 요소는 n이 1, 2, 3, ... 일 때의 값인 3, 6, 9, ... 번째 요소입니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }

        /* 3의 배수 번째 아이템에 스타일 적용 */
        .item:nth-child(3n) {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

 

설명

  1. 기본 설정: .container는 flex 레이아웃을 사용하며, .item은 기본적으로 한 줄에 세 개씩 표시됩니다.
  2. :nth-child(3n): 3n에서 n이 0, 1, 2, 3, ... 일 때의 값을 가지므로, 선택되는 아이템은 3의 배수 번째인 3, 6, 9, ... 번째 요소입니다.
    • n = 0: :nth-child(3*0) → 무시됨
    • n = 1: :nth-child(3*1) → 3번째 아이템
    • n = 2: :nth-child(3*2) → 6번째 아이템
    • n = 3: :nth-child(3*3) → 9번째 아이템

따라서 :nth-child(3n)은 3의 배수 번째 요소에 스타일을 적용하며, n이 0일 때의 :nth-child(0)은 존재하지 않기 때문에 무시됩니다.

 

:nth-child(-1) 은 선택할 수 없는 것이지?

 

맞습니다, :nth-child(-1)과 같은 음수 인덱스는 CSS에서 유효하지 않기 때문에 선택할 수 없습니다. CSS의 :nth-child() 의사 클래스는 자연수와 수식(an + b)을 사용하여 요소를 선택합니다. 음수는 선택자로 사용되지 않습니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }

        /* 양수 n을 사용하는 유효한 예제 */
        .item:nth-child(3n+1) {
            background-color: lightblue;
        }

        /* 음수 n은 유효하지 않음, 이 예제는 무시됨 */
        .item:nth-child(-1) {
            background-color: lightcoral; /* 이것은 적용되지 않음 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

 

설명

  • 양수 인덱스: .item:nth-child(3n+1)는 유효한 선택자이며, 3의 배수에 1을 더한 순서의 아이템(즉, 1, 4, 7, ...)을 선택하여 배경색을 lightblue로 설정합니다.
  • 음수 인덱스: .item:nth-child(-1)는 유효하지 않으며, 선택할 수 있는 요소가 없으므로 스타일이 적용되지 않습니다.

따라서 :nth-child() 의사 클래스는 자연수와 양수 인덱스만을 사용하며, 음수 인덱스는 무시됩니다.

 

좋아 0도 없어

 

맞습니다. CSS의 :nth-child() 의사 클래스에서 유효한 인덱스는 1부터 시작하며, 0은 유효한 선택자로 간주되지 않습니다.

요약

  • :nth-child(0)은 존재하지 않으며, 무시됩니다.
  • :nth-child()에서 유효한 인덱스는 1부터 시작합니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 30%;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px;
            text-align: center;
        }

        /* 유효한 선택자 */
        .item:nth-child(3n) {
            background-color: lightblue; /* 3, 6, 9 번째 요소에 적용 */
        }

        /* 무시되는 선택자 */
        .item:nth-child(0) {
            background-color: lightcoral; /* 적용되지 않음 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
    </div>
</body>
</html>

 

설명

  1. 유효한 선택자: .item:nth-child(3n)는 3의 배수 번째 요소(3, 6, 9, ...)에 스타일을 적용합니다.
  2. 무시되는 선택자: .item:nth-child(0)은 존재하지 않으며, 아무런 스타일도 적용되지 않습니다.

CSS의 :nth-child()는 항상 1부터 시작하며, 음수나 0과 같은 값은 무시됩니다. 따라서 요소의 첫 번째부터 시작하여 스타일을 적용해야 합니다.

 

CSS Grid 레이아웃 기초

모바일을 보다 큰 화면에 배치하는 것을 flex 구성 말고 다른 것은 없어?

 

물론입니다. 반응형 웹 디자인을 구현할 때 flex 외에도 다양한 방법을 사용할 수 있습니다. 대표적으로는 CSS Grid를 사용하는 방법과 미디어 쿼리를 사용한 CSS 클래스 변환 방법이 있습니다.

1. CSS Grid를 사용한 반응형 레이아웃

CSS Grid는 강력한 레이아웃 시스템으로, 복잡한 2차원 레이아웃을 쉽게 구현할 수 있습니다. 아래는 CSS Grid를 사용하여 반응형 레이아웃을 만드는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page with CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr; /* 기본적으로 한 열로 시작 */
            gap: 10px; /* 아이템 사이에 간격 추가 */
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }

        /* 화면이 600px 이상일 때: 두 열 */
        @media (min-width: 600px) {
            .container {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* 화면이 900px 이상일 때: 세 열 */
        @media (min-width: 900px) {
            .container {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        /* 화면이 1200px 이상일 때: 네 열 */
        @media (min-width: 1200px) {
            .container {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

 

2. 미디어 쿼리를 사용한 CSS 클래스 변환

미디어 쿼리를 사용하여 특정 화면 크기에서 CSS 클래스를 변경하는 방법도 있습니다. 이 방법을 통해 유연한 레이아웃을 구현할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page with Media Queries</title>
    <style>
        .container {
            display: block;
        }
        .item {
            display: block;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 5px 0;
            text-align: center;
        }

        /* 화면이 600px 이상일 때: .item-2 클래스 적용 */
        @media (min-width: 600px) {
            .container {
                display: flex;
                flex-wrap: wrap;
            }
            .item {
                margin: 5px;
            }
            .item-2 {
                flex: 1 1 48%;
            }
        }

        /* 화면이 900px 이상일 때: .item-3 클래스 적용 */
        @media (min-width: 900px) {
            .item-3 {
                flex: 1 1 30%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-2 item-3">Item 1</div>
        <div class="item item-2 item-3">Item 2</div>
        <div class="item item-2 item-3">Item 3</div>
        <div class="item item-2 item-3">Item 4</div>
        <div class="item item-2 item-3">Item 5</div>
        <div class="item item-2 item-3">Item 6</div>
    </div>
</body>
</html>

 

설명

  1. CSS Grid 사용: grid-template-columns 속성을 사용하여 화면 크기에 따라 열의 개수를 조정합니다.
  2. 미디어 쿼리와 클래스 변환 사용: 미디어 쿼리를 통해 특정 화면 크기에서 .item-2와 .item-3 클래스를 적용하여 flex 속성을 사용해 레이아웃을 변경합니다.

이러한 방법들은 반응형 웹 디자인을 구현하는 다양한 방법을 제공합니다. 필요에 따라 flex, grid, 그리고 미디어 쿼리를 조합하여 복잡한 레이아웃을 유연하게 구성할 수 있습니다.

 

1fr은 무슨 뜻이야?

 

1fr은 CSS Grid 레이아웃에서 사용되는 단위로, "1 Fraction"의 약자입니다. 이는 그리드 컨테이너의 가용 공간을 동일한 비율로 나누는 것을 의미합니다. 예를 들어, grid-template-columns: 1fr 1fr;라고 설정하면, 그리드 컨테이너의 너비를 두 개의 열로 나누고 각 열이 전체 너비의 절반(50%)을 차지하게 됩니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid with 1fr</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 두 개의 열을 동일한 비율로 나눔 */
            gap: 10px; /* 아이템 사이에 간격 추가 */
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

 

설명

  • .container: 그리드 컨테이너를 설정하고, grid-template-columns: 1fr 1fr;로 두 개의 열을 동일한 비율로 나눕니다.
  • .item: 각 아이템은 그리드 내에서 배치되고, 그리드의 열 간격(gap)이 10px로 설정됩니다.

1fr의 동작 방식

  1. 가용 공간 나누기: 그리드 컨테이너의 전체 가용 공간은 정의된 fr 단위로 나누어집니다.
  2. 동일한 비율: 1fr 1fr는 두 열이 동일한 비율로 공간을 나누어 갖는 것을 의미합니다. 두 열이 각각 전체의 절반을 차지하게 됩니다.
  3. 비율 조정: 만약 grid-template-columns: 2fr 1fr;로 설정하면, 첫 번째 열이 두 번째 열보다 두 배의 공간을 차지하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid with 2fr 1fr</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 2fr 1fr; /* 첫 번째 열이 두 번째 열의 두 배 너비 */
            gap: 10px;
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

 

결론

  • 1fr은 그리드 컨테이너의 가용 공간을 비율로 나누는 단위입니다.
  • 여러 개의 fr 값을 사용하여 그리드 레이아웃의 열이나 행을 원하는 비율로 나눌 수 있습니다.
  • fr 단위는 반응형 레이아웃을 쉽게 구성할 수 있도록 도와줍니다.

grid-template-rows

grid-template-rows 구성은 어떻게 해?

 

grid-template-rows는 CSS Grid 레이아웃에서 행의 크기를 정의하는 속성입니다. 이 속성을 사용하여 그리드 컨테이너 내의 각 행의 높이를 설정할 수 있습니다. grid-template-rows는 grid-template-columns와 유사하게, 행의 높이를 px, em, %, fr 등 다양한 단위를 사용하여 지정할 수 있습니다.

예제 1: 고정된 높이로 행 정의

아래 예제에서는 각 행의 높이를 픽셀 단위로 고정하여 정의합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid with Fixed Row Heights</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 100px 200px 100px; /* 행 높이를 고정 값으로 설정 */
            gap: 10px;
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

 

예제 2: 비율로 행 정의 (fr 단위 사용)

아래 예제에서는 fr 단위를 사용하여 가용 공간을 비율로 나눕니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid with Fractional Row Heights</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 1fr 2fr 1fr; /* 비율을 사용하여 행 높이 설정 */
            gap: 10px;
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

 

예제 3: 혼합 단위 사용

고정된 높이와 비율을 혼합하여 사용할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid with Mixed Row Heights</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 100px auto 1fr; /* 고정된 높이, 자동 높이, 비율 사용 */
            gap: 10px;
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

 

설명

  1. 고정된 높이: grid-template-rows: 100px 200px 100px;는 첫 번째 행의 높이를 100px, 두 번째 행을 200px, 세 번째 행을 100px로 고정합니다.
  2. 비율 (fr): grid-template-rows: 1fr 2fr 1fr;는 첫 번째와 세 번째 행이 동일한 높이를 차지하고, 두 번째 행이 두 배의 높이를 차지합니다.
  3. 혼합 단위: grid-template-rows: 100px auto 1fr;는 첫 번째 행의 높이를 100px로 고정하고, 두 번째 행의 높이는 내용에 따라 자동으로 조정되며, 세 번째 행은 가용 공간의 비율을 차지합니다.

이러한 방식을 사용하면 다양한 레이아웃을 손쉽게 구성할 수 있습니다. 필요에 따라 grid-template-rows 속성을 조합하여 원하는 레이아웃을 만들 수 있습니다.

 

flex row 와 grid-template-rows

flex row 로 100px auto 1fr과 같은 효과를 내려면?

 

Flexbox를 사용하여 100px auto 1fr와 같은 레이아웃을 구현할 수 있습니다. 이를 위해서는 각 아이템에 대한 개별적인 높이 설정과 flex-grow 속성을 조정해야 합니다.

예제

아래는 Flexbox를 사용하여 첫 번째 아이템은 100px, 두 번째 아이템은 자동 높이, 세 번째 아이템은 남은 공간을 차지하는 레이아웃을 구현한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox with 100px, auto, 1fr</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh; /* 전체 높이를 사용 */
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
        .item-1 {
            flex: 0 0 100px; /* 고정 높이 100px */
        }
        .item-2 {
            flex: 1 1 auto; /* 자동 높이 */
        }
        .item-3 {
            flex: 1; /* 남은 공간을 차지 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item-1">Item 1 (100px height)</div>
        <div class="item item-2">Item 2 (auto height)</div>
        <div class="item item-3">Item 3 (remaining space)</div>
    </div>
</body>
</html>

 

설명

  1. 컨테이너 설정: .container는 Flex 컨테이너로 설정되며, flex-direction: column으로 아이템들을 세로 방향으로 배치합니다.
  2. 고정 높이 아이템: .item-1은 flex: 0 0 100px으로 설정하여 고정 높이 100px을 차지합니다. 여기서 flex: 0 0 100px은 flex-grow: 0, flex-shrink: 0, flex-basis: 100px을 의미합니다.
  3. 자동 높이 아이템: .item-2는 flex: 1 1 auto로 설정하여 높이가 내용에 따라 자동으로 조정됩니다. flex: 1 1 auto는 flex-grow: 1, flex-shrink: 1, flex-basis: auto를 의미합니다.
  4. 남은 공간 차지 아이템: .item-3은 flex: 1로 설정하여 남은 공간을 모두 차지합니다. 여기서 flex: 1은 flex-grow: 1, flex-shrink: 1, flex-basis: 0을 의미합니다.

결과

이 설정을 통해 첫 번째 아이템은 고정된 높이 100px을 가지며, 두 번째 아이템은 자동 높이로 설정되고, 세 번째 아이템은 남은 공간을 모두 차지하게 됩니다. 이를 통해 100px auto 1fr과 같은 레이아웃을 Flexbox를 사용하여 구현할 수 있습니다.

 

 

flex-direction 값 설명

flex direction 설명 다시 해줘

 

Flexbox의 flex-direction 속성은 플렉스 컨테이너 내부의 아이템들이 어떻게 배치될지를 결정합니다. 이 속성은 플렉스 아이템들의 주 축(main axis)을 정의하고, 그에 따라 아이템들이 배치되는 방향을 설정합니다.

flex-direction의 값들

1. row: 기본 값. 아이템들이 수평으로 배치됩니다.

    주 축: 왼쪽에서 오른쪽
    교차 축: 위에서 아래 

.container {
    display: flex;
    flex-direction: row;
}


2. row-reverse: 수평으로 배치되지만, 반대 방향으로 배치됩니다.

    주 축: 오른쪽에서 왼쪽
    교차 축: 위에서 아래 

.container {
    display: flex;
    flex-direction: row-reverse;
}


3. column: 아이템들이 수직으로 배치됩니다.

    주 축: 위에서 아래
    교차 축: 왼쪽에서 오른쪽 

.container {
    display: flex;
    flex-direction: column;
}


4. column-reverse: 수직으로 배치되지만, 반대 방향으로 배치됩니다.

    주 축: 아래에서 위
    교차 축: 왼쪽에서 오른쪽

.container {
    display: flex;
    flex-direction: column-reverse;
}

 

예제

다음은 flex-direction 속성을 사용하는 예제입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Direction Example</title>
    <style>
        .container {
            display: flex;
            height: 200px; /* 세로 방향 예제를 위해 높이 설정 */
            gap: 10px; /* 아이템 간 간격 추가 */
        }
        .item {
            padding: 20px;
            background-color: lightcoral;
            color: white;
            text-align: center;
            border: 1px solid #ccc;
        }

        /* 다른 방향 예제 */
        .row {
            flex-direction: row;
        }
        .row-reverse {
            flex-direction: row-reverse;
        }
        .column {
            flex-direction: column;
        }
        .column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <div class="container row">
        <div class="item">Row 1</div>
        <div class="item">Row 2</div>
        <div class="item">Row 3</div>
    </div>
    <div class="container row-reverse">
        <div class="item">Row-reverse 1</div>
        <div class="item">Row-reverse 2</div>
        <div class="item">Row-reverse 3</div>
    </div>
    <div class="container column">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
        <div class="item">Column 3</div>
    </div>
    <div class="container column-reverse">
        <div class="item">Column-reverse 1</div>
        <div class="item">Column-reverse 2</div>
        <div class="item">Column-reverse 3</div>
    </div>
</body>
</html>

 

설명

  • row: 기본적으로 아이템이 왼쪽에서 오른쪽으로 수평 배치됩니다.
  • row-reverse: 아이템이 오른쪽에서 왼쪽으로 수평 배치됩니다.
  • column: 아이템이 위에서 아래로 수직 배치됩니다.
  • column-reverse: 아이템이 아래에서 위로 수직 배치됩니다.

flex-direction 속성을 사용하여 플렉스 컨테이너 내의 아이템 배치 방향을 쉽게 조절할 수 있습니다. 이 속성은 주 축의 방향을 설정하며, 이에 따라 아이템들의 배치가 결정됩니다.

 

grid와 flex direction의 row column

grid와 flex direction의 row column이 반대인거 같아

 

맞습니다, CSS Grid와 Flexbox에서 row와 column의 의미는 다릅니다. 둘 다 레이아웃을 구성하는데 사용되지만, 그 동작 방식이 다릅니다. 여기서 두 시스템의 차이점을 분명히 하겠습니다.

CSS Flexbox

Flexbox는 1차원 레이아웃 시스템으로, 아이템들을 한 줄(수평) 또는 한 열(수직)로 배치합니다.

  • row: 기본 설정으로, 아이템들이 수평으로 배치됩니다.
    • 주 축(main axis): 왼쪽에서 오른쪽
    • 교차 축(cross axis): 위에서 아래
  • row-reverse: 수평으로 배치되지만 반대 방향으로 배치됩니다.
    • 주 축: 오른쪽에서 왼쪽
    • 교차 축: 위에서 아래
  • column: 아이템들이 수직으로 배치됩니다.
    • 주 축: 위에서 아래
    • 교차 축: 왼쪽에서 오른쪽
  • column-reverse: 수직으로 배치되지만 반대 방향으로 배치됩니다.
    • 주 축: 아래에서 위
    • 교차 축: 왼쪽에서 오른쪽

Flexbox 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction Example</title>
    <style>
        .flex-container {
            display: flex;
            height: 200px; /* 세로 방향 예제를 위해 높이 설정 */
            gap: 10px; /* 아이템 간 간격 추가 */
        }
        .item {
            padding: 20px;
            background-color: lightcoral;
            color: white;
            text-align: center;
            border: 1px solid #ccc;
        }

        /* 다른 방향 예제 */
        .row {
            flex-direction: row;
        }
        .row-reverse {
            flex-direction: row-reverse;
        }
        .column {
            flex-direction: column;
        }
        .column-reverse {
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <div class="flex-container row">
        <div class="item">Row 1</div>
        <div class="item">Row 2</div>
        <div class="item">Row 3</div>
    </div>
    <div class="flex-container row-reverse">
        <div class="item">Row-reverse 1</div>
        <div class="item">Row-reverse 2</div>
        <div class="item">Row-reverse 3</div>
    </div>
    <div class="flex-container column">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
        <div class="item">Column 3</div>
    </div>
    <div class="flex-container column-reverse">
        <div class="item">Column-reverse 1</div>
        <div class="item">Column-reverse 2</div>
        <div class="item">Column-reverse 3</div>
    </div>
</body>
</html>

 

CSS Grid

CSS Grid는 2차원 레이아웃 시스템으로, 행과 열을 모두 관리할 수 있습니다.

  • grid-template-columns: 열의 크기를 정의합니다.
    • grid-template-columns: 1fr 1fr;은 두 개의 동일한 열을 만듭니다.
  • grid-template-rows: 행의 크기를 정의합니다.
    • grid-template-rows: 100px auto 1fr;은 첫 번째 행은 100px, 두 번째 행은 콘텐츠에 맞춰지고, 세 번째 행은 남은 공간을 차지합니다.

Grid 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 두 개의 동일한 열 */
            grid-template-rows: 100px auto 1fr; /* 100px, auto, 남은 공간 */
            gap: 10px; /* 아이템 간 간격 추가 */
        }
        .item {
            padding: 20px;
            background-color: lightblue;
            color: black;
            text-align: center;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

 

요약

  • Flexbox: 1차원 레이아웃 시스템으로, row는 수평 방향, column은 수직 방향입니다.
  • CSS Grid: 2차원 레이아웃 시스템으로, grid-template-columns는 열을 정의하고, grid-template-rows는 행을 정의합니다.

이 두 가지 레이아웃 시스템을 사용하여 다양한 반응형 레이아웃을 구성할 수 있습니다. Flexbox는 주로 한 축의 레이아웃을 관리하는데 적합하고, CSS Grid는 더 복잡한 2차원 레이아웃을 관리하는데 유용합니다.

 

grid에서 2차원 레이아웃을 관리

grid에서 2차원 레이아웃을 관리하는 예를 알려줘

 

CSS Grid를 사용하여 2차원 레이아웃을 관리하는 예를 보여드리겠습니다. CSS Grid는 행과 열을 모두 정의할 수 있어서 복잡한 레이아웃을 쉽게 구성할 수 있습니다.

예제: 복잡한 2차원 레이아웃

아래 예제에서는 CSS Grid를 사용하여 헤더, 사이드바, 메인 콘텐츠, 그리고 푸터를 포함한 레이아웃을 만듭니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 2D Layout Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: 
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            gap: 10px; /* 아이템 간 간격 추가 */
            height: 100vh; /* 전체 높이 사용 */
        }
        .header {
            grid-area: header;
            background-color: lightblue;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: lightcoral;
        }
        .main {
            grid-area: main;
            background-color: lightgreen;
        }
        .footer {
            grid-area: footer;
            background-color: lightgrey;
        }
        .item {
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header item">Header</div>
        <div class="sidebar item">Sidebar</div>
        <div class="main item">Main Content</div>
        <div class="footer item">Footer</div>
    </div>
</body>
</html>

 

설명

  1. grid-template-areas:
    • "header header header": 첫 번째 행에 헤더가 세 개의 열을 모두 차지합니다.
    • "sidebar main main": 두 번째 행에 사이드바는 첫 번째 열을 차지하고, 메인 콘텐츠는 나머지 두 개의 열을 차지합니다.
    • "footer footer footer": 세 번째 행에 푸터가 세 개의 열을 모두 차지합니다.
  2. grid-template-columns:
    • 1fr 3fr: 첫 번째 열은 1fr(가용 공간의 1 부분), 두 번째 열은 3fr(가용 공간의 3 부분)으로 설정됩니다.
  3. grid-template-rows:
    • auto 1fr auto: 첫 번째 행은 자동 높이, 두 번째 행은 남은 공간을 차지하고, 세 번째 행도 자동 높이로 설정됩니다.
  4. grid-area: 각 그리드 아이템에 대해 지정된 영역 이름을 할당합니다.
    • .header는 grid-area: header로 설정되어 헤더 영역을 차지합니다.
    • .sidebar는 grid-area: sidebar로 설정되어 사이드바 영역을 차지합니다.
    • .main은 grid-area: main로 설정되어 메인 콘텐츠 영역을 차지합니다.
    • .footer는 grid-area: footer로 설정되어 푸터 영역을 차지합니다.

결과

이 설정을 통해 2차원 레이아웃을 쉽게 구성할 수 있으며, 각 영역은 지정된 공간을 차지합니다. 이를 통해 다양한 레이아웃을 유연하게 구현할 수 있습니다.

이 예제는 CSS Grid를 사용한 2차원 레이아웃의 기본적인 사용법을 보여줍니다. 필요에 따라 grid-template-areas, grid-template-columns, grid-template-rows 속성을 조정하여 복잡한 레이아웃을 만들 수 있습니다.

 

 

vw와 vh, %

어떤 block 안에서 vw vh 는 block과 상관없이 브라우저의 내부 사이즈 인거지? block의 높이 , 폭을 지칭하려면 어떻게 해?

 

맞습니다. vw(viewport width)와 vh(viewport height) 단위는 브라우저의 전체 뷰포트 크기를 기준으로 한 상대 단위로, 특정 블록 요소의 크기와는 상관없이 브라우저의 내부 크기를 나타냅니다.

특정 블록 요소의 높이와 폭을 기준으로 상대적인 크기를 지정하려면, 아래와 같은 CSS 단위를 사용할 수 있습니다:

1. % (백분율)

부모 요소의 크기를 기준으로 한 백분율입니다. 블록 요소의 높이와 폭을 부모 요소의 크기에 따라 상대적으로 설정할 수 있습니다.

.parent {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}

.child {
    width: 50%; /* 부모 요소 너비의 50% */
    height: 50%; /* 부모 요소 높이의 50% */
    background-color: lightblue;
}
<div class="parent">
    <div class="child">50% of Parent</div>
</div>

 

2. em 및 rem

  • em: 요소의 폰트 크기를 기준으로 한 상대 단위입니다.
  • rem: 루트 요소(html)의 폰트 크기를 기준으로 한 상대 단위입니다.
.parent {
    font-size: 16px;
    width: 25em; /* 16px * 25 = 400px */
    height: 18.75em; /* 16px * 18.75 = 300px */
    border: 1px solid #000;
}

.child {
    width: 12.5em; /* 16px * 12.5 = 200px */
    height: 9.375em; /* 16px * 9.375 = 150px */
    background-color: lightcoral;
}

 

3. calc() 함수

CSS의 calc() 함수를 사용하면 다양한 단위를 조합하여 복잡한 크기 계산을 할 수 있습니다.

.parent {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}

.child {
    width: calc(100% - 20px); /* 부모 요소 너비의 100%에서 20px을 뺌 */
    height: calc(100% - 20px); /* 부모 요소 높이의 100%에서 20px을 뺌 */
    background-color: lightgreen;
}

 

4. inherit와 initial

  • inherit: 부모 요소의 속성을 상속받습니다.
  • initial: 요소의 기본값을 설정합니다.
.parent {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}

.child {
    width: inherit; /* 부모 요소의 너비를 상속 */
    height: inherit; /* 부모 요소의 높이를 상속 */
    background-color: lightyellow;
}

 

요약

  • vw와 vh는 뷰포트 크기를 기준으로 한 단위입니다.
  • 특정 블록 요소의 크기를 기준으로 상대적인 크기를 지정하려면 %, em, rem, calc(), inherit 등을 사용합니다.
  • calc() 함수를 사용하면 다양한 단위를 조합하여 복잡한 크기 계산을 할 수 있습니다.

이러한 방법들을 활용하면, 특정 블록 요소의 크기에 따라 상대적인 크기를 설정할 수 있습니다. 필요에 따라 적절한 단위를 선택하여 레이아웃을 구성하면 됩니다.

 

 

부모 와 자식간의 사이즈 관계

자식 폭을 500px로 하고 부모 공간 밖으로 튀어 나가고 싶어 absolute 해야하나? inline-block 해야하나? 부모가 커지면 안되고 자식이 부모 공간을 뚤고 나가야해

 

자식 요소가 부모 요소의 크기를 벗어나도록 만들기 위해 absolute 포지셔닝을 사용하는 것이 가장 일반적입니다. 이를 통해 자식 요소가 부모 요소의 경계를 넘어설 수 있습니다. inline-block으로는 이 효과를 얻을 수 없습니다. absolute 포지셔닝을 사용하면 부모 요소의 크기에 영향을 미치지 않고 자식 요소를 원하는 위치에 배치할 수 있습니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Positioning Example</title>
    <style>
        .parent {
            position: relative; /* 부모 요소를 기준으로 자식 요소를 배치 */
            width: 200px;
            height: 150px;
            border: 1px solid #000;
            overflow: visible; /* 자식 요소가 튀어나가도록 설정 */
        }

        .child {
            position: absolute; /* 부모 요소를 기준으로 절대 위치 */
            width: 500px; /* 자식 요소의 너비 */
            height: 100px;
            background-color: lightcoral;
            top: 0; /* 부모 요소의 상단에 배치 */
            left: 0; /* 부모 요소의 왼쪽에 배치 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm breaking out!</div>
    </div>
</body>
</html>

 

설명

  1. 부모 요소 (.parent):
    • position: relative;로 설정하여 자식 요소의 absolute 포지셔닝 기준을 부모 요소로 합니다.
    • overflow: visible;은 자식 요소가 부모 요소를 벗어나도 잘리지 않도록 설정합니다.
  2. 자식 요소 (.child):
    • position: absolute;로 설정하여 부모 요소를 기준으로 절대 위치를 지정합니다.
    • width: 500px;로 자식 요소의 너비를 부모 요소의 너비보다 크게 설정합니다.
    • top: 0;과 left: 0;으로 부모 요소의 상단과 왼쪽에 배치합니다.

이 설정을 통해 자식 요소가 부모 요소의 크기를 벗어나도록 배치할 수 있습니다. 부모 요소는 크기가 변하지 않고, 자식 요소가 부모 요소의 경계를 넘어설 수 있습니다.

 

부모의 폭도 같이 늘려야 한다면?

 

부모 요소의 폭도 같이 늘려야 한다면, 자식 요소의 크기 변화에 따라 부모 요소의 크기도 자동으로 조정되도록 설정해야 합니다. 이를 위해 Flexbox를 사용할 수 있습니다. Flexbox를 사용하면 부모 요소가 자식 요소의 크기에 따라 자동으로 크기를 조정할 수 있습니다.

예제

아래는 Flexbox를 사용하여 자식 요소의 크기에 따라 부모 요소의 폭도 함께 늘어나는 예제입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Expanding Example</title>
    <style>
        .parent {
            display: flex;
            border: 1px solid #000;
            padding: 10px;
            overflow: visible; /* 자식 요소가 튀어나가도 잘리지 않도록 설정 */
        }

        .child {
            flex: 0 0 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

설명

  1. 부모 요소 (.parent):
    • display: flex;로 설정하여 플렉스 컨테이너로 만듭니다.
    • overflow: visible;은 자식 요소가 부모 요소를 벗어나도 잘리지 않도록 설정합니다.
  2. 자식 요소 (.child):
    • flex: 0 0 500px;으로 설정하여 자식 요소의 너비를 500px로 고정합니다.
    • flex: 0 0 500px;은 flex-grow: 0, flex-shrink: 0, flex-basis: 500px을 의미합니다.
    • height: 100px;으로 자식 요소의 높이를 설정합니다.

이 설정을 통해 자식 요소의 크기에 따라 부모 요소의 크기도 자동으로 조정됩니다.

또 다른 방법: min-width 사용

부모 요소의 최소 너비를 자식 요소의 크기에 맞추는 방법도 있습니다. 이를 위해 min-width 속성을 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min-width Expanding Example</title>
    <style>
        .parent {
            border: 1px solid #000;
            padding: 10px;
            min-width: 500px; /* 자식 요소의 최소 너비를 설정 */
            overflow: visible; /* 자식 요소가 튀어나가도 잘리지 않도록 설정 */
        }

        .child {
            width: 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

설명

  1. 부모 요소 (.parent):
    • min-width: 500px;으로 부모 요소의 최소 너비를 설정합니다.
    • overflow: visible;은 자식 요소가 부모 요소를 벗어나도 잘리지 않도록 설정합니다.
  2. 자식 요소 (.child):
    • width: 500px;으로 자식 요소의 너비를 고정합니다.
    • height: 100px;으로 자식 요소의 높이를 설정합니다.

이 설정을 통해 부모 요소의 최소 너비가 자식 요소의 너비에 맞추어 조정됩니다. 자식 요소가 부모 요소의 크기에 영향을 미치도록 하려면 이러한 방법들을 사용하여 부모 요소의 크기를 동적으로 조정할 수 있습니다.

 

다른 방법은?

 

다른 방법으로 부모 요소의 폭을 자식 요소의 크기에 맞추도록 할 수 있습니다. 여기 몇 가지 다른 방법이 있습니다:

1. 부모 요소의 width: fit-content 사용

CSS fit-content 속성을 사용하면 부모 요소의 크기가 자식 요소의 크기에 맞춰지도록 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fit-content Example</title>
    <style>
        .parent {
            width: fit-content; /* 부모 요소의 폭을 자식 요소의 크기에 맞춤 */
            border: 1px solid #000;
            padding: 10px;
        }

        .child {
            width: 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

2. 부모 요소의 display: inline-block 사용

inline-block을 사용하여 부모 요소가 자식 요소의 크기에 맞게 늘어나도록 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-block Example</title>
    <style>
        .parent {
            display: inline-block; /* 부모 요소를 인라인 블록으로 설정 */
            border: 1px solid #000;
            padding: 10px;
        }

        .child {
            width: 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

3. 부모 요소의 display: table 사용

table 레이아웃을 사용하여 부모 요소가 자식 요소의 크기에 맞춰지도록 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Display Example</title>
    <style>
        .parent {
            display: table; /* 부모 요소를 테이블로 설정 */
            border: 1px solid #000;
            padding: 10px;
        }

        .child {
            display: table-cell; /* 자식 요소를 테이블 셀로 설정 */
            width: 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

4. 부모 요소의 min-width 사용

부모 요소의 최소 너비를 자식 요소의 크기에 맞추는 방법입니다. 부모 요소의 폭을 제한하지 않으면서 자식 요소의 크기에 따라 확장될 수 있도록 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min-width Example</title>
    <style>
        .parent {
            min-width: 500px; /* 부모 요소의 최소 너비를 자식 요소의 크기에 맞춤 */
            border: 1px solid #000;
            padding: 10px;
            overflow: visible; /* 자식 요소가 부모 요소를 벗어나도 잘리지 않도록 설정 */
        }

        .child {
            width: 500px; /* 자식 요소의 너비를 고정 */
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm expanding the parent!</div>
    </div>
</body>
</html>

 

이 방법들은 자식 요소의 크기에 따라 부모 요소의 크기를 자동으로 조정할 수 있도록 해줍니다. 필요에 따라 적절한 방법을 선택하여 사용할 수 있습니다.

 

부모 공간은 유지한채 자식이 뚫고 나가는 경우도 더 설명해줘

 

부모 공간을 유지한 채 자식 요소가 부모 요소의 경계를 넘어서는 방법을 설명하겠습니다. 이 경우, 부모 요소의 크기를 변경하지 않으면서 자식 요소가 부모 요소의 경계를 넘어가도록 만드는 것입니다.

방법 1: position: absolute 사용

position: absolute를 사용하여 자식 요소를 부모 요소의 경계를 넘어가도록 할 수 있습니다. 부모 요소에 position: relative를 설정하여 자식 요소의 기준점을 부모 요소로 설정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Position Example</title>
    <style>
        .parent {
            position: relative; /* 자식 요소의 기준점 */
            width: 200px;
            height: 150px;
            border: 1px solid #000;
            overflow: visible; /* 자식 요소가 튀어나가도 잘리지 않도록 설정 */
        }

        .child {
            position: absolute; /* 절대 위치 설정 */
            width: 500px;
            height: 100px;
            background-color: lightcoral;
            top: 0; /* 부모 요소의 상단에 배치 */
            left: 0; /* 부모 요소의 왼쪽에 배치 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm breaking out!</div>
    </div>
</body>
</html>

 

방법 2: negative margin 사용

부모 요소의 크기를 유지하면서 자식 요소가 부모 요소의 경계를 넘어가도록 margin 속성을 음수로 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Negative Margin Example</title>
    <style>
        .parent {
            width: 200px;
            height: 150px;
            border: 1px solid #000;
            overflow: visible; /* 자식 요소가 튀어나가도 잘리지 않도록 설정 */
            position: relative; /* 필요 시 absolute 사용 시 기준점 */
        }

        .child {
            width: 500px;
            height: 100px;
            background-color: lightcoral;
            margin-left: -150px; /* 부모 요소를 넘어가도록 음수 마진 설정 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm breaking out with margin!</div>
    </div>
</body>
</html>

 

방법 3: transform 사용

transform 속성을 사용하여 자식 요소를 부모 요소의 경계를 넘어가도록 이동시킬 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform Example</title>
    <style>
        .parent {
            width: 200px;
            height: 150px;
            border: 1px solid #000;
            overflow: visible; /* 자식 요소가 튀어나가도 잘리지 않도록 설정 */
            position: relative; /* 필요 시 absolute 사용 시 기준점 */
        }

        .child {
            width: 500px;
            height: 100px;
            background-color: lightcoral;
            transform: translateX(-150px); /* 부모 요소를 넘어가도록 변형 */
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">I'm breaking out with transform!</div>
    </div>
</body>
</html>

 

요약

  • position: absolute: 자식 요소를 절대 위치로 설정하여 부모 요소의 경계를 넘어가도록 합니다.
  • 음수 마진(negative margin): 자식 요소의 마진을 음수로 설정하여 부모 요소의 경계를 넘어가도록 합니다.
  • transform: 자식 요소를 변형하여 부모 요소의 경계를 넘어가도록 합니다.

이 방법들은 부모 요소의 크기를 유지하면서 자식 요소가 부모 요소의 경계를 넘어가도록 설정하는 다양한 방법을 제공합니다. 필요에 따라 적절한 방법을 선택하여 사용할 수 있습니다.

반응형
저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[HTTPS] 윈도우 서버용 무료 SSL 인증서, Let's Encrypt SSL  (0) 2024.07.26
[CSS] 스타일가이드에서 블록 단위 표현  (0) 2024.07.25
[CSS] 스타일시트 Tips 101  (0) 2024.07.25
[JavaScript] 자바스크립트 101 Tips  (0) 2024.07.25
[CSS] position 속성 예제  (0) 2024.07.25

댓글

티스토리툴바