# Flex
flex/Bootstrap 2023.3.20
flex(플렉서블 박스 레이아웃) display속성인 flex flex-wrap : wrap; -> flex내용이 자동으로 반응형이 적용된다. 📌flex를 컨트롤하는 기본적인 종류 flex-direction = 가장 기본 속성 / row = 가로 정렬 column

[CSS] flex - 01
flex-direction item의 주 축(방향) 설정flex-wrap item의 줄 바꿈 설정flex-flow flex-direction과 flex-wrap의 단축속성justify-content 주 축의 정렬 방법을 설정align-content 교

HTML/CSS (중급) - 박스 가로배치가 편리한 flexbox
Flexbox 레이아웃 사용법 ⭐⭐⭐ 박스를 감싸는 부모요소에게 display: flex 사용 CSS Flex에 대해 아주 자세히 나와있는 사이트 Flexbox 세부속성 사용하기

css flex 부시기
Item에 적용되는 속성 flex-grow -할당 가능한 공간의 정도 -형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간을 의미 -형제 아이템들이 다른 flex-grow 값 = 다른 공간을 의미 flex-shrink -아이템의 크기가 container
CSS Flex, Position
displayflex : 본인은 display : block 처럼 작동자식들은 flex 방식으로 다루겠다는 의미justify-content:flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.cente

1/9 - CSS(가상 선택자)
링크https://youareawesomeblueprint-lecture8--jm05271998.repl.co/이번에는 가상선택자를 배워 적용시킨 예시 색깔별 카드에 nth-child로 배경색을 입힘

1/7 - CSS(FLEX)
링크https://youareawesomeblueprint-lecture6.jm05271998.repl.co/CSS를 적용 시키며 FLEX를 처음으로 배운날flex를 사용하며 중앙정리를 성공함

Flex
Flex CSS에서 편리하고 멋진 기능인 Flex!!에 대해 알아보자 flex를 사용할 때 순서를 알아보자 Flex를 쓸거야! 1. display : flex ; 선언하기 flex쓴다고 선언하기! 정렬하고자 하는 요소를 감싸는 부모에게 display:flex
230224_TIL
flex1차원적 구조비교적 작은 단위에 적합기획의 변경 가능성이 있는 경우에 적합grid2차원적 구조큰 규모에 적합반응형 디자인을 효율적으로 구현display: grid grid-templategrid-template-rows(행) : 1fr 2fr 200pxgrid
[CSS] Flexbox로 CSS 레이아웃 만들기
속성과 인자의 종류가 많아서 항상 외우다가 잊어버리고 개발자도구 틀어서 제작하는 습관이 있어 이번에 flex를 정리하려고 해요.크롬을 제외하고 IE, 엣지의 경우 버전에 따라 다르지만 flex를 지원하지 않는 경우도 있어 아직까지는 float과 inline-block으
Flex
flex는 "부모"한테 주는 것! 이 모든 것은 부모 태그에 적용된다.적용 시 자식 개체 위드값에flex : 1 -> 영역 풀로 채우기또는width: 20%; / flex: 8;퍼센트 20%, 80% / 비율 2, 8 로도 가능하다.중심축 (J) = justify-co
Flexbox3
item 전용 속성 > order : item의 순서를 지정하는 속성 > flex grow(팽창): item이 flex-conatiner 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성 > flex-shrink (수축) : item이 수축하는 정도로 지정하는 속성 > f...
Flexbox
Flexbox > 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식. Flexbox를 이용할 때 반드시 알아야 되는 것! Flexbox의 구성 flex-container : 정렬이 필요한 요소를 감싸는 요소 it...

Flex 레이아웃
CSS 레이아웃의 꽃 !특징을 변경할 때 사용한다.flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리하다.block or inline으로 구분되지 않고 독자적인 속성을 가진 요소로 구분된다.위의 코드에서 부모요소는 container,

Float 레이아웃
직역하자면 띄운다란 의미이다.float 속성을 이용해 해당 객체를 좌/우 정렬을 하며 레이아웃을 구성한다.기본값으로 block element 기본 속성을 그대로 유지한다. 적용 Xdiv와 p태그는 원래 block요소이지만 div(파란박스)를 빼와서 왼쪽으로 땡겨오는 방