이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 포지션 fixed
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 absolute 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는
gogogameboy.tistory.com
어제는 CSS의 포지션과 관련된 속성들만 세번의 포스팅을 통해 세가지를 공부해보았습니다.
오늘부터 공부해볼 주제는 플렉스 Flex입니다.
생활코딩의 강의 영상에서는 자꾸 플럭스라고 발음을 하시는데 잘못 읽으신 것 같습니다. ㅎㅎ
표를 만드는 table 태그
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 이미지 삽입 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는
gogogameboy.tistory.com
과거에는 표를 만들 때 쓰는 table 태그로 웹사이트의 레이아웃을 잡기도 했다는 이야기를 위의 포스트에서 한 적이 있는데, 드디어 이제부터 CSS를 이용해서 현재의 웹사이트 레이아웃을 잡는 방법을 배워보도록 하겠습니다.
flex 기초
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
.container{ } 안에서 display:flex; 를 넣음으로 인해 원래는 한줄 전체를 쓰는 div태그를 옆으로 정렬시킬 수 있습니다.
flex-direction에서는 row는 기본값, row-reverse는 리버스 시킵니다.
그 외에 column과 column-reverse를 넣을 수 있습니다.
다음 포스트
CSS, flex-basis와 grow 그리고 shrink
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, Holy Grail Layout (0) | 2021.01.03 |
|---|---|
| CSS, flex-basis와 grow 그리고 shrink (0) | 2021.01.03 |
| CSS 포지션 fixed (0) | 2021.01.02 |
| CSS 포지션 absolute (0) | 2021.01.02 |
| CSS 포지션 static과 relative (0) | 2021.01.02 |
댓글