# Flexbox

83개의 포스트
post-thumbnail

전생엔 디자인학부였던 내가, 이세계에선 프론트엔드 준비러!!???_제 6장

웹페이지는 넓고 레이아웃은 다양하다..... flexbox를 마스터 하는 날까지 화이팅..!!💪💪

2022년 1월 6일
·
0개의 댓글
post-thumbnail

FlexBox 총정리

flexbox에 대한 모든것 간단하게 정리!! space-around과 space-evenly의 차이?!

2022년 1월 5일
·
0개의 댓글
post-thumbnail

웹 다시 시작하기 - CSS (4)

To Do List에 스타일을 적용하자.

2022년 1월 5일
·
0개의 댓글
post-thumbnail

웹 다시 시작하기 - CSS (3)

flexbox 의 개념을 익히자

2022년 1월 4일
·
0개의 댓글
post-thumbnail

CSS 레이아웃 분할과 Flexbox

사이트 전체 레이아웃 잡는 방법이 여러가지가 있을텐데 빨리빨리 되지가 않더라고요 많은 연습이 있어야겠지만 flex나 grid 사용해서 어떻게 전반적인 레이아웃 잡으시는지 궁금해요 css 각각의 속성 어떤건지는 대강 아는데 효과적으로 사이트 만드는 건 또 다른 이야기인거

2021년 12월 19일
·
0개의 댓글
post-thumbnail

CSS 공부 어떻게 해야 하나요? - 이론편 (feat. figma)

제가 좋아하는 파레토의 법칙입니다. css에서 상위 20% 스펙이 전체 css 코드의 80%를 차지한다. 실제로 실전에서 자주 쓰이는 css는 몇개 되지 않습니다. 그래서 이번 글에서는 제가 쓰고 있는 현재의 Best Practice를 공유하려고 합니다.

2021년 12월 4일
·
14개의 댓글
post-thumbnail

[TIL] 2021.11.29 (CSS - display, positon 복습, 시멘틱 웹)

\[CSS] Flexbox, Display, PositionSemantic Web

2021년 11월 29일
·
0개의 댓글
post-thumbnail

Flexbox Froggy

2021년 11월 26일
·
0개의 댓글

CSS FlexBox , Grid

flexbox 기본 모양 > # FlexBox container로 큰 틀 잡음. container의 css 속성들. > 정렬 태그 dispaly : flex; 컬럼들을 자동으로 맞춰줌 flex-direction : column; row가 기본 값. column

2021년 11월 24일
·
0개의 댓글
post-thumbnail

Flex~~~돈콜미

css에서 flexbox에 대해서 알아보자 (이런거 뭐가 중요하겠어.... 비트코인 따따따따상하고 있는데) HTML에서 요소들의 배치를 편리하게 할 수 있엄 !!display: flex; 이렇게 적는거야 시작하지!!

2021년 10월 21일
·
0개의 댓글
post-thumbnail

[CS] Content 정렬 Day-14

Flexbox를 원하는대로 제어하기 위해서는 axis(축)을 잘 이해해야 합니다.axis(축)은 main axis와 cross axis가 있습니다.main axis는 flex-direction 속성에 의해 결정됩니다.flex-direction의 기본 값(row) 상태

2021년 10월 21일
·
0개의 댓글
post-thumbnail

CSS 중급

클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법기본 스타일링 제거하는 CSS 코드방향: flex-directionrow(기본값)column얼마나 늘릴 것인가: flex-grow얼마만큼의 크기를 갖는가: flex-basis수평 정렬: ju

2021년 10월 21일
·
0개의 댓글
post-thumbnail

[CS] HTML + Flexbox Day-14

HTML 구성하기 대부분 좌에서 우, 위에서 아래로 진행합니다. CSS 화면 구분 시 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. 수직분할 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다. 수평분할

2021년 10월 21일
·
0개의 댓글
post-thumbnail

[CS] CSS Day-14

CSS를 통해 콘텐츠를 원하는 위치에 배치하는 것을 넘어, 화면 설계의 기본을 알아보는 시간. CSS를 잘하기 위해서는 #과 . 의 차이를 이해해야하고, 절대 단위와 상대 단위를 구분할 수 있어야 합니다. id를 선택할 때는 #을 사용하고 class를 선택할 때는

2021년 10월 21일
·
0개의 댓글
post-thumbnail

Flexbox

아이템들이 배치되는 축의 방향을 결정하는 속성이다.1\. row

2021년 10월 13일
·
0개의 댓글
post-thumbnail

[CSS] flexbox

flexbox : item들을 행 또는 열로 자유자재로 배치시킬 수 있다.float : flexbox 이전에 사람들이 자주 사용하던 것. image와 text를 어떻게 배치할 것인지를 정의하기 위해 나타남.ex) float : left ; float : center&l

2021년 10월 12일
·
0개의 댓글
post-thumbnail

CSS - flexbox

flex > display: flex는 요소들을 일직선상에서 일렬 배치하기 위해 사용합니다. 일렬 배치되는 요소들을 item이라고 하고 item들을 감싸는 요소를 container라고 하는데, flex속성은 container에 적용해야 합니다. 일렬로 배치되는 방향을

2021년 10월 4일
·
0개의 댓글

[HTML/CSS] 애니메이션, flexbox

1\. CSS CH 6-910월 04일 ZEROBASE NKLCB 6일차🐣transition ➡ user의 특정 action에 따라 효과가 적용됨animation ➡ 자동으로 요소가 움직이게 할 수 있음 다수의 스타일에 대해서도 적용할 수 있음 keyframe을

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[CSS] Flexbox

flex-direction, flex-wrap,justify-content align-items 같은 flex-box요소들과, flex-grow, flex-basis, align-self 같은 flex-item요소들에 대해 다룬다.

2021년 10월 1일
·
0개의 댓글
post-thumbnail

CSS Layout_1_Flexbox

flexbox 사용이유, direction

2021년 9월 27일
·
0개의 댓글