오늘은 css를 공부하면서 가장 큰 어려움을 겪었던 flexbox를 공부했다.
사실 공부라기 보다는 필요할 때마다 구글링을 해서 찾아보며 하나하나 실패를 거듭해가며 써왔지만 이렇게 개념부터 차근차근 공부해간건 오늘이 처음인거 같긴 하다. 그래서 더 열심히 공부하고 학습한 부분이기도 하다.
Flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.
사용 방법은 display: flex 를 선언해주면 된다. 여기서 중요한 점이 있는데 이 속성은 부모 박스 요소에 적용해,
자식 박스의 방향과 크기를 결정한다는 점이다.
아래의 코드에서는 부모요소는 <main> 이고 자식요소는 3개의 <div>이다.
<main>
<div>box1</div>
<div>box2</div>
<div>box3</div>
</main>각 요소들을 구분하기 위해 아래의 CSS를 적용해 볼 것이다.
main {
border: 1px dotted red;
}
div {
border: 1px solid green;
}
* {
margin: 10px;
padding: 10px;
}그렇다면 아래와 같은 화면이 나온다. <div> 요소들은 별 다른 설정을 하지 않으면 위쪽에서부터 세로로 정렬되며 , 가로로 넓게 공간을 차지하는 것을 확인 할 수있다.
이 상태에서 부모 요소인 <main>에 display: flex; 속성을 적용하게 된다면 아래와 같은 화면이 나온다
자식 요소인 <div>요소들이 왼쪽부터 가로로 정렬된 것과 내용만큼의 공간을 차지하는 것을 확인할 수 있다.
이처럼 Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.
여기서 중요한 점이 또 한가지 있는데 바로 속성을 지정해주는 위치이다.
flexbox 속성중에서는 부모요소에 적용해야하는 속성들, 자식요소에만 적용해야하는 속성들이 있다
.
1. flex-direction : 정렬 축 정하기
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.
main {
display: flex;
**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */
2. flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 설정해 주지 않으면 줄 바꿈을 하지 않는다.
main {
display: flex;
**flex-wrap : nowrap;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */
3. justify-content : 축 수평 방향 정렬
justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
- flex-direction : row 인 경우 ↔
- flex-direction : column 인 경우 ↕️
4. align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성이다..
주요 속성값으로는 stretch , flex-start , flex-end , center , baseline 이 있습니다. 이번에는 각 속성값의 특징이 명확하게 드러날 수 있도록 자식 요소의 글씨 크기를 각각 다르게 설정해놓았습니다. 각 속성값이 축 방향에 따라 요소들을 어떻게 정렬시키는지 눈으로 확인해보세요.
- flex-direction : row 인 경우 ↕️
- flex-direction : column 인 경우 ↔
다른 건 다 이해가 잘 가지만 align-itmes 가 이해가 잘 가지 않아 따로 다시 공부해야 할 것같다 .. .이해 완료 !
위에는 부모요소에 적용해야 하는 속성에 대해 알아보았고 자식 요소에 적용해야하는 속성에 대해 알아보자.
flex 속성의 값
| grow | 팽창 지수 |
| shrink | 수축 지수 |
| basis | 기본 크기 |
grow 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지 , shrink는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 , basis은 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.
flex속성을 따로 설정해주지 않으면 기본값으로 flex: 0 1 auto; 가 지정된다.
각 순서는 grow shirink basis 순이다.
grow의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미하고 , 정렬축 방향으로 빈 공간이 있을 때 각 자식 요소들이
얼마나 늘어나서 남은 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 된다.
만약 위의 코드에서 만든 3개의 <div> 로 예를 들면 1,2, 3 순서대로 grow가 1:1:2 이면 1/4, 1/4, 2/4 비율로 차지하게 된다.
shrink는 grow와 반대로 설정한 비율만큼 박스 크기가 작아진다. 즉 비율일 클수록 더 많이 줄어든다는 것이다.
grow를 쓰게 된다면 shrink는 쓰지 않는것을 추천한다.
basis는 자식박스가 늘어나거나 줄어들기 전에 가지는 기본크기이다. flex-grow가 0 일때 basis 크기를 지정하면
그 크기는 유지된다.
참고사항으로는
width와 flex-basis을 동시에 적용하는 경우 flex-basis가 우선적용된다.
flex-grow가 헷갈려 다시 한번 정리하자면 처음 flex-basis로 설정한 값을 제외한 나머지 부분을 각 비율로 차지하게 되는것이라고 생각하면 된다.
만약 box1과 box2가 flex-grow:1 flex-basis:50% 일때 basis 가 50%이므로 두 박스가 모든 공간을 차지했기 때문에 두 박스는 소유하고 있는 영역이 같고 빈공간이 없어 늘어날 부분도 없다.
만약 box1이 flex-grow:2 basis : 20% box2가 flex-grow:1 basis:50% 라면 두 박스는 총 70%공간을 차지했고 나머지 30% 공간에서 box1:box2 = 2: 1 비율로 공간을 차지한다 따라서 남은 30%중 20%를 box1이 10%를 box2가 늘어난다고 생각하면 된다.
연습차원으로 만든 레이아웃 코드이다.
html
<!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>
<link rel="stylesheet" href="flexstyle.css">
</head>
<body>
<main>
<div id="navbar">
<div id="icon1" class="icon">아이콘1</div>
<div id="icon2" class="icon">아이콘2</div>
<div id="icon3" class="icon">아이콘3</div>
</div>
<div id="folder">
<div id="section1" class="section">영역1</div>
<div id="section2" class="section">영역2</div>
<div id="section3" class="section">영역3</div>
</div>
<div id="content">
<div id="section4" class="section">영역4</div>
<div id="section5" class="section">영역5</div>
</div>
</main>
</body>
</html>
css
body{
margin:0;
padding:0;
box-sizing: border-box;
}
main{
display: flex;
/* justify-content: center; */
width:80%;
height: 500px;
}
#navbar{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border: red solid 2px;
margin:1px;
flex-grow: 1;
/* flex-basis: 20px; */
}
#folder{
display: flex;
border: red solid 2px;
margin:1px;
flex-grow: 3;
/* flex-basis: 0; */
flex-direction: column;
justify-content: center;
}
#content{
display:flex;
border: red solid 2px;
margin:1px;
flex-grow: 12;
/* flex-basis: 0; */
flex-direction: column;
}
.icon{
border:orange dotted 1px;
margin:2px 20px;
flex-grow: 0;
width: 40px;
height: 40px;
}
.section{
border:blue dotted 1px;
margin:2px 10px;
}
/* #icon1{
flex-grow: 0;
}
#icon2{
flex-grow: 0;
}
#icon3{
flex-grow: 0;
} */
#section1{
flex-grow:2;
}
#section2{
flex-grow:2;
}
#section3{
flex-grow:1;
}
#section4{
flex-grow:4;
}
#section5{
flex-grow:1;
}
오늘은 이렇게 flexbox에 대해 학습해보았다.
학습한 내용을 가지고 계산기 목업을 만들어보았는데 디자인을 어떻게 해야 좋을지 막막한 거 같다. 하지만 페어프로그래밍 때 감사하게 페어분이 공유해주신 사이트와 멘토분이 참고하라고 올려주신 전 기수분들의 계산기목업을 보고 다시 나만의 디자인을 구상해 볼 수 있었다.
결론은... 오늘 페어프로그래밍 시간에 했던 계산기 목업은 모두 갈아 엎고 새롭게 다시 만들어볼것이다 ㅜㅜ
오늘의 회고 끝 !
오늘도 열공 !
'코드스테이츠44기 프론트엔드' 카테고리의 다른 글
| [코드스테이츠 44기 프론트엔드 6일차 회고록] javascript 타입과 변수 (0) | 2023.02.20 |
|---|---|
| [코드스테이츠 44기 프론트엔드 5일차 회고록] 계산기 목업 만들기 (0) | 2023.02.17 |
| [코드스테이츠 44기 프론트엔드 3일차 회고록] CSS에 대해 - 1 (0) | 2023.02.15 |
| [코드스테이츠 44기 프론트엔드 2일차 회고록] HTML의 기초부터 심화까지 (0) | 2023.02.14 |
| [코트스테이츠 44기 프론트엔드] SEB_FE_44 합격 그리고 OT (0) | 2023.02.13 |
