이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 웹사이트 레이아웃 기초
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
지난 포스트에서는 웹사이트의 레이아웃을 잡는 플렉스 flex의 기초를 배웠습니다.
이번에는 조금 더 구체적인 내용을 공부해보겠습니다.
flex-basis
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
.item:nth-child(2){ } 라는 선택자는 class=""의 값이 "item"인 엘리먼트 중에서 두 번째 것을 선택하는 선택자입니다.
특정 엘리먼트에 크기를 직접 지정해주고 싶다면 CSS 속성에서 flex-basis: 픽셀 값px; 을 넣어줍니다.
flex-direction을 row로 했다면 지정해준 픽셀 값만큼 가로로 크기가 커지고, column으로 했다면 세로로 크기가 커집니다.
flex-grow
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
모든 엘리먼트들이 컨테이너 크기에 다 맞게 들어가게 하고 싶을 때에는, 모든 엘리먼트들의 선택자 안에 flex-grow:1; 이라고 넣어줍니다.
flex-grow의 기본값은 0입니다.
.item:nth-child(2){ } 라는 선택자에는 flex-grow:2; 라고 넣어주면, 이 엘리먼트는 다른 엘리먼트들보다 공간을 2배로 차지하게 됩니다.
flex-shrink
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
flex-basis로 픽셀 값을 넣은 엘리먼트에 flex-shrink: 0; 이라는 속성도 넣으면 인터넷 창의 크기가 줄어들어도 그 엘리먼트는 크기가 줄어들지 않습니다.
다음 포스트
CSS, Holy Grail Layout
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, Flex 기타 속성들 (0) | 2021.01.04 |
|---|---|
| CSS, Holy Grail Layout (0) | 2021.01.03 |
| CSS 웹사이트 레이아웃 기초 (0) | 2021.01.03 |
| CSS 포지션 fixed (0) | 2021.01.02 |
| CSS 포지션 absolute (0) | 2021.01.02 |
댓글