학습 목표
-
레이아웃을 위한 HTML을 만들 수 있다.
o
-
display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.o
display: flex(속성명:속성값)를 설정하는 이유는 원하고자 하는 영역을 화면상에서 고정이 아니라
유연하게 정렬하거나 조절하기 위함이다.
즉, 고정되어 있는 위치를 유연하게 움직이기 위해서 사용한다.flex의 속성 중 부모 요소에 적용해야 하는 속성이 있고,
자식 요소에 적용해야 하는 속성이 있다.이때, display: flex, flex-wrap, flex-direction, justify-content, align-items는
부모 요소에 적용해야 자식 요소에 작동한다.
따라서 주고 싶은 태그가 자식이 없는 경우에는 임의로 그 태그를 덮는 부모 태그를 만들어 그 부모 태그에 flex 속성을 적용한다.
이때, flex-wrap, flex-direction, justify-content, align-items는
display: flex와 같이 다니므로 display: flex가 적용되어야 작동한다.cf) flex-wrap: nowrap, flex-wrap: wrap, flex-wrap: wrap-reverse가 있는데
이는 '속성명: 속성값'을 의미한다. 하위 요소의 크기가 상위 요소의 크기보다 클 때, 자동으로 유연하게 줄을 바꿔 표현할 것인지를 정하는 속성으로 줄바꿈 없음, 줄바꿈, 반대 방향으로 줄 바꿈으로 속성의 값을 설정할 수 있다. -
flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.o
flex-direction은 어떤 축을 기준으로 정렬할지를 정하는 속성으로
부모 요소에 적용해야 자식 요소에 작동한다.
아무것도 설정하지 않으면, '가로축을 기준으로 정렬하는 것'을 기본값으로 한다.
flex-direction: row는 가로 방향(옆으로)으로 요소들을 정렬하는 것이고,
flex-direction: column은 세로 방향(아래로)으로 요소들을 정렬하는 것이다. -
justify-content와align-items를 이용하여 수평-수직 정렬을 결정할 수 있다.o
justify-content와 align-items는 flex-direction의 속성과 같이 다니므로
flex-direction이 적용되어야 작동한다.justify-content는 축의 수평방향으로 컨텐츠 박스들을 어떻게 정렬할지를 정하는 속성이며,
flex-start, flex-end, center, space-between, space-around의 속성값을 가지는데
이는 flex-direction의 속성값에 따라 달라진다.예를 들어,
flex-direction: row인 경우, 가로축을 기준으로 정렬할 건데,
justify-content: flex-start라면, 가로축과 수평방향(옆으로)으로 컨텐츠 박스 왼쪽변이 축의 시작부분인 왼쪽에서부터 시작하도록 하겠다.
justify-content: flex-end라면, 가로축과 수평방향(옆으로)으로 컨텐츠 박스 오른쪽변이 축의 끝부분인 오른쪽에서 끝나도록 하겠다.
justify-content: center라면, 가로축과 수평방향(옆으로)으로 가운데에 오게 하겠다.
justify-content: space-between이라면, 가로축과 수평방향(옆으로)으로 축의 양쪽 끝으로 간격을 넓혀 배치하겠다.
justify-content: space-around라면, 가로축과 수평방향(옆으로)으로 축의 양쪽 끝에서 중심 주변으로 모이게 배치하겠다를 의미한다.반면,
flex-direction: column인 경우, 세로축을 기준으로 정렬할 건데,
justify-content: flex-start라면, 세로축과 수평방향(아래로)으로 컨텐츠 박스 윗변이 축의 시작 위에서부터 시작하도록 하겠다.
justify-content: flex-end라면, 세로축과 수평방향(아래로)으로 컨텐츠 박스 아랫변이 축의 끝부분인 아래에 와서 끝나도록 하겠다.
justify-content: center라면, 세로축과 수평방향(아래로)으로 가운데에 오게 하겠다.
justify-content: space-between이라면, 세로축과 수평방향(아래로)으로 축의 양쪽 끝으로 간격을 넓혀 배치하겠다.
justify-content: space-around라면, 세로축과 수평방향(아래로)으로 축의 양쪽 끝에서 중심 주변으로 모이게 하겠다를 의미한다. -
justify-content와align-items를 이용하여 수평-수직 정렬을 결정할 수 있다.o
justify-content와 align-items는 flex-direction의 속성과 같이 다니므로
flex-direction이 적용되어야 작동한다.align-items는 축의 수직방향으로 컨텐츠 박스들을 어떻게 정렬할지를 정하는 속성이,
stretch, flex-start, flex-end, center, baseline을 속성값으로 가지는데
이는 flex-direction의 속성값에 따라 달라진다.예를 들어,
flex-direction: row인 경우, 가로축을 기준으로 정렬할 건데,
align-items: stretch라면, 가로축과 수직방향(아래로)으로 컨테츠 박스들을 늘리겠다.
align-items: flex-start라면, 가로축과 수직방향(아래로)으로 컨텐츠 박스 윗변이 축의 시작 위에서부터 시작하도록 하겠다.
align-items: flex-end라면, 가로축과 수직방향(아래로)으로 컨텐츠 박스 아랫변이 축의 시작 아래에 와서 끝나도록 하겠다.
align-items: center라면, 가로축과 수직방향(아래로)으로 가운데에 오게 하겠다.
align-items: baseline이라면, 가로축과 수직방향(아래로)으로 컨텐츠 박스 내에 있는 컨텐츠의 밑변의 기준선이 일정한 상태에서 왼쪽에서 오른쪽으로 박스를 정렬한다는 것을 의미한다.반면,
flex-direction: column인 경우, 세로축을 기준으로 정렬할 건데,
align-items: stretch라면, 세로축과 수직방향(옆으로)으로 컨테츠 박스들을 늘리겠다.
align-items: flex-start라면, 세로축과 수직방향(옆으로)으로 컨텐츠 박스 왼쪽변이 축의 시작 왼쪽에서부터 시작하도록 하겠다.
align-items: flex-end라면, 세로축과 수직방향(옆으로)으로 컨텐츠 박스 오른쪽변이 축의 시작 오른쪽에 와서 끝나도록 하겠다.
align-items: center라면, 세로축과 수직방향(옆으로)으로 가운데에 오게 하겠다.
align-items: baseline이라면, 세로축과 수직방향(옆으로)으로 컨텐츠 박스 내에 있는 컨텐츠 왼쪽변의 기준선이 일정한 상태에서 위에서 아래로 박스를 정렬한다는 의미한다.
+) 2023.04.24 페어 분께 질문한 후, 추가하는 내용
justify-content와 align-items를 둘 다 함께 사용해도 된다.
justify-content는 기준축을 중심으로 '어디에' 정렬할지를 정하는 것이다.
기준축이 가로면, 글씨 쓰는 방향인 왼쪽에서 시작 -->오른쪽에서 끝이므로
시작점에서 시작하여 수평으로 정렬하려면 flex-start를 써서 왼쪽에서 부터 가로로 정렬하고,
끝점에서 끝내게 수평으로 정렬하려면 flex-end를 써서 오른쪽에 붙게 가로로 정렬한다.
마찬가지로 기준축이 수직면, 위에서 시작 --> 아래에서 끝이므로 기준축을 중심으로 수평으로 정렬이다.
반면, align-items는 기준축을 중심으로 '어떻게' 분배할지를 정하는 것이다.
기준축이 가로면, 기준축과 수직을 이루는 방향인 위에서 아래로 어떻게 분배할지를 정하는 것이다.
만약, div는 차지하는 영역이 넓어서 줄바꿈이 되는데 여기에 flex를 걸면,
크기가 컨텐츠 크기에 맞춰 작아진다. (span처럼 변함) 이를 유의하여 의도에 맞게 사용해야 한다.
-
flex-grow를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.o
flex-grow는 요소가 차지하는 공간을 얼마나 늘릴 것인지를 정하는 속성으로
자식 요소에 직접 적용해야 작동하는 속성이다.
flex-grow의 기본값은 0이며, 이는 늘리지 않는 것을 기본으로 한다.
1일 경우, 부모 요소가 차지하는 공간의 100%까지 늘리겠다는 것을 의미한다.
1을 넘은 경우는 다른 것보다 더 늘리겠다는 것을 의미한다.
같은 부모의 자식 요소라면 flex-grow 의 값이 클수록 더 많은 공간을 차지한다.
이때, 0과 1, 그 이상의 숫자는 비율을 의미한다.flex-shrink라는 요소도 있다. 이는 요소가 차지하는 공간을 얼마나 줄일 것인지를 정하는 속성으로 자식 요소에 직접 적용해야 작동하는 속성이다.
flex-shrink의 기본값은 1이며, 이는 다른 요소의 크기와 일정하게 하는 것을 기본으로 한다.
0일 경우, 수축하지 않고, 다른 것보다 늘어날 수 있으며, 1을 넘는 경우는 다른 것보다 더 수축하겠다는 것을 의미한다.
이때, 0과 1, 그 이상의 숫자는 비율을 의미한다.
그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하면,
실제 크기를 예측하기 어려우므로 함께 사용하는 것을 추천하지 않는다. -
flex-basis를 이용하여 요소의 기본 크기를 결정할 수 있다.o
요소가 차지하는 크기가 줄어들거나 즐어나는 것과 상관없이 요소의 기본 크기를 정하는 속성이다.이렇듯 flex의 속성을 정하는 방법은 3가지가 있다.
- flex: 1;
- flex: 팽창지수 수축지수 기본 크기;
- flex-grow:0;
flex-shrink:1;
flex-basis: auto;
만약, 자식 요소에 flex 속성을 따로 설정해주지 않으면,
기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치함을 의미한다.
또한, width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선된다. -
VSCode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
o
-
HTML과 CSS를 활용하여 만들고자 하는 웹 애플리케이션의 레이아웃을 구성할 수 있다.
o
-
Flexbox속성을 이용하여 자식 요소를 정렬할 수 있다.
o
display: flex, flex-wrap, flex-direction, justify-content, align-items는
부모 요소에 적용해야 자식 요소에 작동한다. -
자식 요소에 flex 속성을 추가하여 부모 요소에서 각각의 자식 요소가 차지하는 비중을 조절할 수 있다.
o
flex-grow, flex-shrink, flex-basis는 자식 요소에 적용해야 작동한다. -
레이아웃을 구성할 때 Flexbox만큼 자주 사용되는 Grid에 대해 학습한다.
<실습> : 페어프로그램을 통해 계산기 목업 만들기
소감
🔡➡️💻➡️🤓👍
이번주 나를 가장 힘들게 했던 부분이다.
flexbox 속성들.
도대체 뭐 하는 놈들이며, 어디에 써야하는지, 어떻게 써야하는지, 언제 써야하는지
이해하기 위해 정말 나의 하루의 90%는 이 아이들이 차지했다.
축하한다. 녀석들아.. 나의 관심을 듬뿍 받다니..
시간을 들이면 정말 배신하는 건 없다는 말이 정답이다.
내가 관심을 가진 것에는 항상 관심에 대한 댓가가 따라온다.
시간을 많이 할애한 대신 flexbox 속성들을 이해할 수 있었다.
물론, 현업의 개발자분들처럼 바로 바로 적재적소에 사용할 수 있을 정도는 아니지만,
복습하면서 계속 지켜볼 거다. 이놈들 내가 잊지 않고 담아두마!!!
