티스토리 뷰

HTML+CSS

flex속성 / day22 / 25.04.29

one-dy 2025. 5. 2. 15:35

 flex box layout = flexible box layout

플렉스 박스 레이아웃은 웹 요소를 배치하기도 쉽지만 화면 너비에 따라 웹 요소의 크기를 자동으로 바꿀 수 있어

매우 편리하다. 그래서 반응형 웹을 만들 때 적합하다. 

화면 크기가 달라지면 그에 맞춰 플렉스 항목(자식)을 늘리거나 줄일 수 있는

유연한 상자를 활용해 레이아웃을 만든다는 의미이다.

 

항목마다 크기를 조절하려면 4가지 속성을 플렉스 항목에 지정해야한다.

flex속성❤❤❤

1. flex-basis : 플렉스 항목(자식요소)의 기본 크기를 지정한다.

2. flex-grow : 공간이 남으면 플렉스 항목을 늘린다.

3. flex-shrink : 공간이 부족하면 플렉스 항목을 줄인다.

4. flex: flex-basis, flex-grow, flex-shrink속성을 한꺼번에 지정한다.

 

기본 크기를 지정하는 flex-basis속성 

flex-basis속성은 flex된 자식박스의 기본 크기를 지정한다. 플렉스 항목을 가로로 배치한다면 이 값은 자식박스의 너비이고, 세로로 배치한다면 이 값은 자식박스의 높이가 된다. flex-basis의 기본값은 auto. 이 값에는 여러 의미가 있다. 플렉스 항목에 width 속성이 지정되어 있다면 그 값을 flex-basis의 값으로 사용한다.

만약 width값이 없다면 컨텐츠가 들어있는만큼만 크기를 차지한다.

세로로 배치할 경우에는 height값을 사용하고 height이 없다면 역시 컨텐츠 크기만큼 크기를 차지한다.

 

flex의 항목을 확장하는 flex-grow속성 

화면 너비가 큰 환경에서 접속할 경우 flex container에 항목을 채우고도 남는 공간이 생긴다.

이 때 남는 공간을 어떻게 나눌지를 flex-grow속성으로 지정한다. flex-grow의 기본값은 0이고 확장하지 않겠다 라는 의미이다. 그리고 음수값은 쓸 수 없다. 1 이상의 값을 사용할 수 있다.

 

flex의 항목을 축소하는 flex-shrink속성

flex container(부모)의 너비가 줄어들 경우 그 안에 있는 flex항목의 너비도 자연스럽게 줄어들도록 설정할 수 있는데, 이 때 flex-shrink속성을 사용한다. flex-shrink의 기본값은 1, 컨테이너에 맞춰 flex항목(자식)을 축소한다. 만약 플렉스 항목마다 shrink값이 다르다면 grow와 마찬가지로 비율대로 공간을 계산한다. 또 0이라는 값을 쓰면 항목을 줄이지 않겠다는 의미이다.

     

 

확장, 축소를 한 번에 지정하는 flex속성

flex 속성은 (첫번째자리) flex-grow, (두번째자리) flex-shrink, (세번째자리) flex-basis를 한번에 선언하는 속성이다. 공백으로 구분하여 값을 지정, 3개 속성의 기본값은 flex: 0 1 auto;이다.

 

▶flex속성에 값으로 숫자 하나만 지정할 경우 flex-grow의 값으로 사용된다.

나머지 shrink는 1, basis는 0이 된다. (flex-basis의 기본값은 auto이지만 이때는 값으로 0을 사용)

flex-basis값이 0이면 확장, 축소하는 상황에 따라 항목의 기본 크기가 결정된다.

예) flex: 1; ☞ flex: 1 1 0;

 

▶ flex속성에 값이 2개일 경우 첫번째 자리는 grow자리, 두번째 자리는 그냥 숫자만 쓸 경우에 shrink자리, 단위가 있다면 basis의 자리가 된다.

예) flex: 1 1; ☞ flex: 1 1 0;  / flex: 1 150px; ☞ flex: 1 1 150px;

 

▶flex의 값을 none으로 설정하면 flex항목을 축소하거나 확장하지 않겠다는 의미. 크기는 미리 정해놓은 width와 height값을 사용하거나 값이 없다면 내용의 크기에 따라 결정된다. 즉 flex: 0 0 auto;와 같다.  flex box에서 특정 부분만 확장, 축소하지 않도록 만들고 싶을 때 사용한다. 

 

▶flex의 값을 auto로 지정하면 flex항목의 크기를 auto로 설정한다. 플렉스 항목에 width와 height가 있다면 그 값을 크기로 사용하고 값이 없다면 내용이 들어있는 만큼만 크기로 사용한다. 그리고 grow와 shrink의 값은 각각 1로 설정한다. 공간이 남는다면 플렉스 항목을 똑같은 크기로 채우고, 공간이 부족하면 같은 비율로 축소한다.

예)flex: auto; ☞ flex: 1 1 auto;

<title>flex속성</title>
    <style>
      .container {
        width: 800px;
        height: 50px;
        border: 3px solid pink;
        display: flex;
        gap: 10px;
        margin-bottom: 40px;
      }
      .container > div {
        background-color: pink;
        color: #fff;
        height: 100%;
        line-height: 50px;
        flex-basis: 150px;
      }
      .box1-1 {
        flex-grow: 1; /*기본크기(150) + 남는 여백의 1/4 */
      }
      .box1-2 {
        flex-grow: 1; /*기본크기(150) + 남는 여백의 1/4 */
      }
      .box1-3 {
        flex-grow: 0; /*기본크기(150) */
      }
      .box1-4 {
        flex-grow: 2; /*기본크기(150) + 남는 여백의 2/4 */
      }

      /* 두번째 컨테이너 */
      .container:nth-of-type(2) {
        width: 800px;
        border: 3px solid powderblue;
      }
      .container:nth-of-type(2) > div {
        background-color: powderblue;
        flex-basis: 300px;
      }
      .box2-1 {
        flex-shrink: 1; /* 기본크기 - 부족한 공간의 1/4 */
      }
      .box2-2 {
        flex-shrink: 0; /* 기본크기 */
      }
      .box2-3 {
        flex-shrink: 1; /* 기본크기 - 부족한 공간의 1/4 */
      }
      .box2-4 {
        flex-shrink: 2; /* 기본크기 - 부족한 공간의 2/4 */
      }

      /* 세번째 컨테이너 */
      .container:last-of-type {
        border: 3px solid purple;
      }
      .container:last-of-type > div {
        background-color: purple;
        /*
          flex-grow : 1; 확장하고
          flex-shrink : 1; 축소함
          flex-basis : 0%; 기본크기는 0%
        */
        flex: 1;
        /*
          flex-grow : 0; 확장하지 않고
          flex-shrink : 0; 축소함
          flex-basis : 0%; 기본크기는 0%
        */
        flex: 0 1;
        /*
          flex-grow : 1; 확장하고
          flex-shrink : 1; 축소함
          flex-basis : 150px; 기본크기는 150px
        */
        flex: 1 150px;
        /*
          flex-grow : 0; 확장하지 않고
          flex-shrink : 0; 축소하지 않고
          flex-basis : auto; 기본크기는 auto
        */
        flex: none;
        /*
          flex-grow : 1; 확장하고
          flex-shrink : 1; 축소함
          flex-basis : auto; 기본크기는 auto
        */
        flex: auto;
      }
    </style>
  </head>
  <body>
 
    <div class="container">
      <div class="box1-1">1</div>
      <div class="box1-2">2</div>
      <div class="box1-3">3</div>
      <div class="box1-4">4</div>
    </div>

    <div class="container">
      <div class="box2-1">1</div>
      <div class="box2-2">2</div>
      <div class="box2-3">3</div>
      <div class="box2-4">4</div>
    </div>

    <div class="container">
      <div class="box3-1">1</div>
      <div class="box3-2">2</div>
      <div class="box3-3">3</div>
      <div class="box3-4">4</div>
    </div>
  </body>
</html>

      CSS함수

css가 처음 등장했을때는 단순한 스타일링 기능만 제공했다. 예를 들어 색상이나 글꼴, 줄 간격 등 사이트의 겉 모습을

제어하는 속성만 제공했다. 그런데 웹페이지와 애플리케이션 디자인이 점점 복잡해지면서 스타일을 좀 더 세밀하게 제어할 방법이 필요해졌다.그렇게 등장한 것이 바로 CSS함수이다. 컴퓨터 프로그래밍에서 '함수'란 특정 기능을 의미한다. 함수는 기능을 뜻하는 이름 뒤에 ()를 붙여 표현한다. 예를 들어 rgb(red,green,blue)와 같은 속성값들이 이에 해당한다. 함수는 함수에 이름에 따라 기능이 결정되며, ()안에는 그에 맞는 값만 넣을 수 있다. 함수는 특정 값을 넣을 때마다 다른 결괏값을 보여주는 기능이다.

 

[기본형]

속성명 : 함수명(값);

 

ex) background : url(이미지 경로);

 

계산식으로 값을 결정하는 calc()함수

calc()함수는 계산을 뜻하는 calculation의 줄임말로, 이름 그대로 계산식을 사용해서 속성값을 사용하게 해준다. calc()함수의 괄호 안에는 크깃값 또는 각도, 시간, 백분율, 숫자 등 다양한 단위를 사용한 계산식이 들어간다.

+,-,*(곱하기),/(나누기)를 가장 많이 사용한다.



최솟값, 최댓값을 적용하는 min(), max()함수

화면 너비에 따라 속성값을 다르게 적용할 때 최솟값과 최댓값을 고려할 수 잇다.

min()함수는 괄호안에 나열된 값 중 가장 작은 값을 반환하고

max()함수는 괄호안에 나열된 값 중 가장 큰 값을 반환한다.

 

[기본형]

min(값1, 값2, 값3...)
max(값1, 값2, 값3...)

 

값의 범위를 제한하는 clamp()함수

     

클램프는 대상 2개를 물리적으로 고정하는 장치의 이름이다.

이 단어를 이름으로 쓴 clamp()함수는 특정 값의 범위를 '고정'하거나 '제한'하는 역할을 한다.

clamp함수는 최솟값, 최적값, 최댓값 이렇게 3개의 값을 쓴다.

이렇게 값을 3개로 지정하면 화면 크기에 따라 값을 바꿀 수 있다.

최솟값보다 작아질 수 없고 최댓값보다 커질 수 없다.

 

[기본형]

clamp(최솟값, 최적값, 최댓값)

  <title>CSS 함수</title>
    <style>
      .con {
        width: 100%;
        border: 2px solid cadetblue;
      }
      .con > div {
        margin-bottom: 10px;
      }
      .box {
        width: calc(750px / 5 - 5px);
        background-color: salmon;
      }
      .box:first-child {
        width: calc(100% - 80px);
      }
      .box:nth-child(2) {
        /* 넓이를 적용하는데, 100%와 700px중 작은값을 사용함. */
        width: min(100%, 700px);
      }
      .box:nth-child(3) {
        /* 넓이를 적용하는데, 13vw와 12em중 큰값을 사용함. */
        width: max(13vw, 12em); /* 1em = 16px */
      }
      .box:nth-child(4) {
        /* 글자 크기를 제한한다. 16px보다 작아질 수 없고 32px보다 커질 수 없다.
           만약 범위안에 들어있다면 최적값을 사용한다.
         */
        font-size: clamp(16px, 2vw, 32px); 평소에는 2vw를 유지하다가(브라우저에 따른 비율이기 때문에 유동적으로 작아지거나 커진다.)브라우저사이즈 줄이면 최소 16px 더 이상 줄일 수 없다. 브라우저사이즈가 커지다가 최대사이즈 도달하게 되면 32px사용하겠다.
      }
    </style>
  </head>
  <body>
    <div class="con">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
    </div>
  </body>
</html>

 

  position : 위치속성

요소 위에 요소를 겹치고 싶을 때 사용하거나

웹페이지를 작업할때 각 요소의 위치를 2가지 방법으로 설정한다.

· 상대위치 : 태그 요소를 입력한 순서대로 상대적인 위치를 지정한다.

· 절대위치 : 부모의 0점을 기준으로 움직일 위치를 지정한다. 

 

[position 속성값]

1. static : 태그가 위에서 아래로 순서대로 배치되며 position속성을 사용하지 않은 것과 같은 기본값이다.

                좌표를 인식할 수 없는 상태이다. 모든 태그들은 position속성을 사용하지 않을 때 static.

2. relative : 상대위치를 의미하며 태그가 출력된 해당 위치에서 좌표를 통해 상하 좌우로 이동할 수 있다.

                   즉, 좌표를 인식할 수 있다. 보통 부모박스에 지정한다. 좌표값: top, left 사용한다.

                   right, bottom 좌표는 relative에 쓰지 않는다. 

3. absolute : 절대위치를 의미, 부모박스의 0점을 찾아간다. top bottom right left다 쓸 수 있다.

                     절대 변하지 않는 0점을 기준으로 좌표를 통해 상하좌우로 움직일 수 있다.

4. fixed : 절대위치를 의미, 브라우저 화면을 기준으로 절대 위치 좌표를 설정한다. 0점을 기준으로 움직인다.  

 

      좌표속성

position속성을 적용하게 되면 좌표를 인식할지 안할지를 결정할 수 있다. 즉, 좌표를 인식 가능한 상태로 만드는 것 뿐이지, 실제로 움직이지는 않는다. 좌표가 인식가능한 해당 태그를 좌표에 따라 움직이게 하려면 아래 좌표 속성을 이용한다. 왼쪽 상단이 0점.

[속성]

 

top : 양수일 경우 0점을 기준으로 위에서 아래로, 음수일 경우 반대로 움직인다.
left : 양수일 경우 0점을 기준으로 왼쪽에서 오른쪽으로, 음수일 경우 반대로 움직인다.
right : 양수일 경우 0점을 기준으로 오른쪽에서 왼쪽으로, 음수일 경우 반대로 움직인다.
bottom : 양수일 경우 0점을 기준으로 밑에서 위로, 음수일 경우 반대로 움직인다.

*top 부모박스의 위에서 아래쪽으로 가는 방향 

*left 부모박스의 왼쪽에 딱 붙어있다가 오른쪽으로 이동하는 방향

*right 부모박스의 오른쪽에서 시작해서 왼쪽으로 이동하는 방향

*bottom 부모박스의 아래에서 위로 올라오는 방향 

 

position: static의 경우 좌표를 인식할 수 없으므로 좌표속성을 쓰더라도 움직이지 않음. 

position: relative의 경우 좌표를 상대 좌표로 인식하며 현재 위치에서 top좌표, left좌표를 이용할 수 있다. 

position: absolute의 경우 좌표를 절대 좌표로 인식하며, 상위요소의 0점으로부터 top, left, right, bottom 좌표를 모두 이용할 수 있다.

position: fixed의 경우 좌표를 절대 좌표로 인식하며, 브라우저의 0점으로부터 top, left, right, bottom 좌표를 모두 이용할 수 있다.

<title>위치속성</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      :is(.static_box, .relative_box) {
        width: 300px;
        height: 900px;
        background-color: lavender;
        float: left;
        margin-left: 30px;
      }
      :is(.static_box, .relative_box) > div {
        width: 300px;
        height: 300px;
        border: 3px solid #000;
        box-sizing: border-box;
        text-align: center;
        line-height: 300px;
        font-size: 30px;
      }
      .static_box {
        position: static; /* 좌표인식 불가능. 기본값 */
        top: 100px;
      }
      .relative_box {
        position: relative; /* 좌표인식 가능. 그중에서 상대위치로 좌표를 움직임 */
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
   

    <div class="static_box">
      <div>static box1</div>
      <div>static box2</div>
      <div>static box3</div>
    </div>

    <div class="relative_box">
      <div>relative box1</div>
      <div>relative box2</div>
      <div>relative box3</div>
    </div>
  </body>
</html>

'HTML+CSS' 카테고리의 다른 글

transform / transition속성 / day24 / 25.05.02  (0) 2025.05.02
position / 좌표 / z-index속성 / day23 / 25.05.01  (0) 2025.05.02
<form>,<input>태그 공통속성 / day20 / 25.04.28  (1) 2025.04.28
✔입력양식태그들 / day19 / 25.04.25  (3) 2025.04.25
멀티미디어태그 / day16 / 25.04.22  (0) 2025.04.25