[코드스테이츠 FE 45기] _2023.04.17 _ Day 5

프론트앤드 부트캠프/Day

by 코린’s 2023. 4. 17. 19:51

728x90

오늘은 Day 5

2023년 04월 17일

오늘은 오전 9시부터 11시 전 까지는 자습및 복습 시간이다.

오늘도 자습을 시작해 보자!!

오후에는 페어분과 코드 리뷰를 하고

나머지 시간에는 자습및 복습을 할 생각이다.

2023.04.17 - [프론트앤드 부트캠프/과제] - 목업 계산기 만들기

목업 계산기 만들기

2번째 과제인 목업 계산기 만들기!! HTML 코드 0 AC enter 7 8 9 + 4 5 6 - 1 2 3 * 0 . / CSS 코드 * { margin: auto; padding: 0px; } /* 뒷 배경화면 */ body { display: flex; justify-content: center; align-items: center; height: 100vh; backg

colco-coding.tistory.com

위에 보이는 목업 계산기 만들기 기준으로 코딩 리뷰를 했고

리뷰를 하다가 정렬 부분에서 페어분이 저번 시간에 배웠던

Flexbox

를 사용하여 정렬해보는게 어떻겠냐고 제안해 주셔서 상단 AC/ Enter 부분과 하단 0 부분의 정렬및 크기 조절 코드를 바꾸게 되었다.

CSS 기존 코드!

* {
  margin: auto;
  padding: 0px;
}

/* 뒷 배경화면 */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('/Users/bagdahae/Desktop/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  background-size: cover;

  /* border: 1px solid red; */
}


/* 계산기 몸통 */
.calculator {
  width: 400px;
  height: 590px;
  border: 2px solid #ffffff;
  /* background-color: blue; */
  border-radius: 30px;
  /* background: #00AE68; */
  background: url('/Users/bagdahae/Desktop/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  box-shadow: 0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 60px #ff9,
    0 0 80px #ff9,
    0 0 100px #ff9,
    0 0 150px #ff9;
}

/* 계산기 화면 */

.display {
  border: 2px solid rgb(255, 255, 255);
  text-align: right;
  margin: 20px 20px;
  background-color: rgb(255, 255, 255);
  padding-top: 20%;
  padding-right: 1%;
  font-size: xx-large;
  border-radius: 20px 20px 0px 0px;
}


/* 계산기 숫자패드 연산패드  */

/* 전체 버튼 설정 값 */

button {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  border: 1px solid rgb(255, 253, 253);
  align-items: center;
  box-shadow: 0px 5px 0px 0px #007144;
  color: #fff;
  font-size: x-large;
  background: #00AE68;

}


button:hover {
  box-shadow: 0px 0px 0px 0px #007144;
}



/* Class 버튼 설정 값 */

.button {

  padding-bottom: 20px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgb(255, 255, 255);

}



/* 숫자 패드 버튼 영역 설정 값  */

.b1 {
  display: flex;
  padding-top: 10px;
}

.b2 {
  display: flex;
  padding-top: 10px;
}

.b3 {
  display: flex;
  padding-top: 10px;
}

.b4 {
  display: flex;
  padding-top: 10px;
}

.b5 {
  display: flex;
  padding-top: 10px;
}


/* 버튼 각각 class 별 설정값 */

.ac {
  height: 70px;
  width: 160px;
  background-color:orange;
}

.bin {
  width: 70px;
  height: 70px;
}

.Enter {
  height: 70px;
  width: 160px;
  background-color:orange;
}

.zero {
  height: 70px;
  width: 160px;
  background-color:orange;
}

CSS 변경 코드

* {
  margin: auto;
  padding: 0px;
}

/* 뒷 배경화면 */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('/Users/bagdahae/Desktop/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  background-size: cover;
}


/* 계산기 몸통 */
.calculator {
  width: 400px;
  height: 590px;
  border: 2px solid #ffffff;
  border-radius: 30px;
  background: url('/Users/bagdahae/Desktop/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  background-size: cover;
  box-shadow: 
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 60px #ff9,
    0 0 80px #ff9,
    0 0 100px #ff9,
    0 0 150px #ff9;
}

/* 계산기 화면 */

.display {
  border: 2px solid rgb(255, 255, 255);
  text-align: right;
  margin: 20px 20px;
  background-color: rgb(255, 255, 255);
  padding-top: 20%;
  padding-right: 1%;
  font-size: xx-large;
  border-radius: 20px 20px 0px 0px;
}


/* 계산기 숫자패드 연산패드  */

/* 전체 버튼 설정 값 */

button {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  border: 1px solid rgb(255, 253, 253);
  align-items: center;
  box-shadow: 0px 5px 0px 0px #007144;
  color: #fff;
  font-size: x-large;
  background: #00AE68;
  text-align: center;
  margin: 0px 10px;

}


button:hover {
  box-shadow: 0px 0px 0px 0px #007144;
}



/* Class 버튼 설정 값 */

.button {

  padding-bottom: 20px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgb(255, 255, 255);
  text-align: center;

}



/* 숫자 패드 버튼 영역 설정 값  */

.b1 {
  display: flex;
  padding-top: 10px;
  

}

.b2 {
  display: flex;
  padding-top: 10px;
}

.b3 {
  display: flex;
  padding-top: 10px;
}

.b4 {
  display: flex;
  padding-top: 10px;
}

.b5 {
  display: flex;
  padding-top: 10px;
}


/* 버튼 각각 class 별 설정값 */

.ac {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
  
}

.Enter {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
}

.zero {
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  flex-grow: 1;
  margin: 0px 10px;
}

변경된 코드 부분

/* 버튼 각각 class 별 설정값 */

.ac {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
  
}

.Enter {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
}

.zero {
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  flex-grow: 1;
  margin: 0px 10px;
}

위의 변경 코드를 보면

/* height: 70px;

width: 160px; */

기존에 크기로 설정을 따로 했었던 높이와 넓이 대신

background-color:orange;

flex-grow: 1;

margin: 0px 10px;

flex-grow 를 사용하여 비율 설정으로 변경했다.

전체 마진을 자동으로 설정해 놓고 패딩 또한 0으로 설정 해놓아서 각 버튼들이 붙는 현상이 나타나서

해당 버튼에 각 마진을 주었다.

자식 요소에 적용해야 하는 Flexbox 속성

이번에는 Flexbox 속성 중 자식 요소에 적용해야 하는 속성, flex에 대해서 알아봅시다. 앞서 Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다고 이야기했습니다. 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있습니다.

flex 속성의 값

Flexbox는 부모 요소에 적용되는 속성입니다. 자식 요소에 적용해야 하는 속성은 다음과 같습니다.

flex-grow: 자식 요소가 늘어날 수 있는 여유 공간이 있을 때, 얼마나 많은 공간을 차지할지를 결정합니다.
flex-shrink: 자식 요소가 줄어들어야 할 때, 얼마나 많이 줄어들지를 결정합니다.
flex-basis: 자식 요소의 기본 크기를 설정합니다.
order: 자식 요소가 표시되는 순서를 결정합니다.
align-self: 자식 요소의 수직 정렬을 결정합니다.

이러한 속성들은 부모 요소에서 display: flex를 적용한 후, 자식 요소에 대해 적용할 수 있습니다.

자식 요소에 flex 속성을 따로 설정해 주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.

flex: 0 1 auto;

이 순서와 기본값은 반드시 기억해 주세요. flex: grow shrink basis, flex: 0 1 auto

flex 속성 안에 세 가지 값을 한 번에 설정해 줄 필요 없이, 다음과 같이 각 값을 따로 지정해 줄 수 있습니다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

grow : 자식 박스는 얼마나 늘어날 수 있을까요?

grow(팽창 지수)는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다고 했습니다.

flex-grow 속성은 자식 요소가 부모 요소 내에서 얼마나 늘어날 수 있는지를 결정합니다. 이 값은 숫자를 사용하여 설정할 수 있으며, 기본값은 0입니다.

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

flex 속성을 설정하기 전의 모습입니다.

grow의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미합니다. 따라서 빈 공간이 있음에도 박스들이 늘어나지 않습니다.

flex-grow 1:0:0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="parent">
        <div class="child child-a">Child A</div>
        <div class="child child-b">Child B</div>
        <div class="child child-c">Child C</div>
    </div>


    <style>
        .parent {
            display: flex;
            width: 800px;
            height: 200px;
            border: 1px solid black;
            margin: 15px;
        }

        .child {
            height: 100%;
            color: white;
            text-align: center;
        }

        .child-a {
            background-color: blue;
            flex-grow: 1;
        }

        .child-b {
            background-color: green;
            flex-grow: 0;
        }

        .child-c {
            background-color: rgb(255, 242, 120);
            flex-grow: 0;
        }
    </style>
</body>

</html>

순서대로 1 : 0 : 0 / A : B : C

순서대로 1 : 1 : 1 / A : B : C

shrink : 자식 박스는 얼마나 줄어들 수 있을까요?

flex-shrink는 CSS의 Flexbox 모듈에서 정의된 속성 중 하나입니다.

이 속성은 자식 요소가 부모 요소 내에서 얼마나 줄어들 수 있는지를 결정합니다.

flex-shrink는 CSS의 Flexbox 모듈에서 정의된 속성 중 하나입니다. 이 속성은 자식 요소가 부모 요소 내에서 얼마나 줄어들 수 있는지를 결정합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="parent">
        <div class="child child-a">A</div>
        <div class="child child-b">B</div>
    
    </div>


    <style>
        .parent {
            display: flex;
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }

        .child {
            height: 100%;
            color: white;
            text-align: center;
        }

        .child-a {
            background-color: blue;
            flex-shrink: 3;
        }

        .child-b {
            background-color: green;
            flex-shrink: 2;
        }
    </style>
</body>

</html>

shrink(수축 지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다.

비율이 클수록 더 많이 줄어드는 것이죠. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다.

비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다.

flex-shrink 속성은 width나 이후 설명할 flex-basis속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다.

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

basis : 이 박스의 기본 크기는 얼마일까요?

flex-basis는 CSS의 Flexbox 모듈에서 정의된 속성 중 하나입니다. 이 속성은 자식 요소의 기본 크기를 결정합니다.

flex-basis 값은 크기 단위(length units)를 사용하여 지정할 수 있으며, 기본값은 auto입니다. flex-basis 값이 auto이면, 자식 요소의 기본 크기는 해당 요소의 컨텐츠 박스(content box)의 크기와 같습니다.

flex-basis 속성은 flex 속성의 축약형(shorthand)으로 사용될 수 있습니다. flex 속성을 사용하면, flex-grow, flex-shrink, flex-basis 속성을 한 번에 지정할 수 있습니다. flex 속성의 기본값은 0 1 auto입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="parent">
        <div class="child child-a">A</div>
        <div class="child child-b">B</div>

    </div>


    <style>
        .parent {
            display: flex;
            width: 800px;
            height: 200px;
            border: 1px solid black;
        }

        .child {
            height: 100%;
            color: white;
            text-align: center;
        }

        .child-a {
            background-color: blue;
            flex-basis: 400px;
        }

        .child-b {
            background-color: green;
        }
    </style>
</body>

</html>

참고

width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

728x90

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

[코드스테이츠 FE 45기] _2023.04.19 _ Day 7 (0)	2023.04.19
[코드스테이츠 FE 45기] _2023.04.18 _ Day 6 (0)	2023.04.18
[코드스테이츠 FE 45기] _2023.04.14 _ Day 4 (0)	2023.04.15
[코드스테이츠 FE 45기] _2023.04.13 _ Day 3 (2)	2023.04.13
[코드스테이츠 FE 45기] _2023.04.12 _ Day 2 (0)	2023.04.12

코딩하는 짱구

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

Flexbox

자식 요소에 적용해야 하는 Flexbox 속성

grow : 자식 박스는 얼마나 늘어날 수 있을까요?

shrink : 자식 박스는 얼마나 줄어들 수 있을까요?

basis : 이 박스의 기본 크기는 얼마일까요?

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바