Flexbox IE를 지원하지 않아도 된다면 가장 쓸모 있는 Column flex items set to align-items: center overflow their container Column flex items ignore margin: auto on the cross axis ⚠ flex item → display 속성 값이 flex인 경우, flex container가 수직으로 배치됨→ display 속성 값이 inline-flex인 경우,... flex-basisalign contentflex growflex wrapflex-shrinkgapFlexalign selforderCSSflex directionflex-flowgridjustify contentFlexboxalign itemsCSS TIL#05 CSS Grid를 공부해보자! 특히 이 포스트도 정말 잘 정리되어있고 공부가 많이 되었던 것 같다. 여기서는 내가 정말 Grid를 잘 써먹을 수 있는지 지식을 검증하는 차원에서 작성해본다. Flexbox에 무언가 불편한 점이 있으니 좀 더 발전된 Grid가 나왔지 않았을까? 예를 들어 flex-wrap: wrap;속성을 적용했을 때, 만약 justify-content: space-between; 속성을 같이 적용했다면 아... CSSFlexboxgridCSS TLI 5 | Thank you - "CSS flex box" Flexbox를 설명하는 가장 기본적인 개념은 Flex-container(부모) / Flex-item(자식)에서부터 시작한다. flex-container(부모)에게 display:flex를 선언하게 되면 flex-items은 즉각적으로 영향을 받고 실행된다. 하지만 여기서 유의해야할 건, Flex-container와 flex-items가 직접적으로 종속관계에 있어야지 Flex모드가 제대로 적... CSS레이아웃FlexboxCSS 5. 중급 CSS와 반응형 기능 하위 자식 요소: flex item flex-direction flex item 들의 주 축(main-axis) 방향 설정 flex-wrap flex item 들을 1행 또는 복수의 행으로 배치하는 설정 flex-flow flex: block 특성의 flex container 정의 (수직 정렬) inline-flex: inline 특성의 flex container 정의 (수평 정렬) flex... @mediaFlexboxinheritance@media [CSS] 🐸Flexbox Froggy 귀여운 🐸개구리 게임 flexbox froggy🐸로 FLEXBOX를 공부해보았다. 엘리님의 드림코딩 강의를 들으면서 하게 됐는데 정말 유익하다! 사랑해요 엘리님. ❗ 참고 내가 보려고 하는 정리 🧺 justify-content 요소를 가로 선상에서 정렬한다. 🧺 align items 요소를 세로 선상에서 정렬한다. 🧺 flex-direction 정렬할 방향을 지정한다. ❗ Flex의 방향이 ... CSSfroggyFlexboxhtmlCSS Flex~~~돈콜미 css에서 flexbox에 대해서 알아보자 (이런거 뭐가 중요하겠어.... 비트코인 따따따따상하고 있는데) HTML에서 요소들의 배치를 편리하게 할 수 있엄 !! display: flex; 우리 웹페이지는 구성이 잘 되어 있어 ~~ 눈치챔? 이렇게 웹화면서 구성을 짜는거야 이렇게 화면 나눈는 방법 정말 다양한데 그 중에 플렉스박스 라는걸 알려줄께~~ ㅇㅋ 레츠고 그럼 오늘의 목표를 공개 할께... CSSFlexboxCSS TIL - 21.06.30 👨💻 - CSS 이 정사각형을 수직으로 두번 자르면(수직분할) 정사각형은 결국 가로로 세개의 직사각형이 나올 것 이다. 다만 flex는 부모에 적용한다 하더라도 자식의 자식, 즉 자식을 제외한 후손까지는 적용되지 않으니 자식의 자식을 가로 정렬 시켜야할때는 자식에게 display: flex 속성을 부여한다. flex-direction 속성 같은 경우는 부모에 적용시키는 속성으로, 자식을 가로로 줄세울지 세로... FlexboxCSSTILCSS 코드스테이츠 3주차 -[JS/Node] 배열, 객체 / [CSS] 레이아웃, Selector / [JS/Node] 핵심 개념과 주요 문법 배열 중 가장 큰 요소를 숫자로 리턴 ex) [1, 4, 3] -> 4 객체 : 각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 사용 셀렉터 : h1{ }, div{ } => h1 전체 선택, div 전체 선택 전체 셀렉터 : *{ } => 전체 선택 tag 셀렉터 : section, h1{ } => section과 h1을 다중 선택 ID 셀렉터 : #onl... scopeFlexboxselectorclosureCSS객체배열레이아웃jsCSS CSS Layout_1_Flexbox 배운점 FLEX를 사용하는 이유 float 혹은 inline-block 로 마크업할 때 화면 크기가 달라질때마다 그에 알맞게 변하지 않고 다 깨지거나 혹은 기본값으로 불필요한 여백들이 생기기 때문 Flex는 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 원하는 곳에 적절한 속성을 부여해서 사용할 수 있습니다. FLEXBOX에서 부모가 자식을 ... positionFlexboxCSSCSS flexbox 공부허자 학원에서는 백엔드 중심이었기 때문에 flexbox에 대해 언급하지 않고 넘어갔다. 그래서 flexbox에 대해 잘 알지 못하고 padding, float을 남발해왔는데.... float은 사실 이미지와 텍스트를 배치하는 데 사용되는 속성이다. 그래서 float은 left, center, right로 설정할 수 있는데, 이는 텍스트들이 이미지를 감사면서 배치되도록 하는 방법이었다. 즉, flo... FlexboxCSSCSS
IE를 지원하지 않아도 된다면 가장 쓸모 있는 Column flex items set to align-items: center overflow their container Column flex items ignore margin: auto on the cross axis ⚠ flex item → display 속성 값이 flex인 경우, flex container가 수직으로 배치됨→ display 속성 값이 inline-flex인 경우,... flex-basisalign contentflex growflex wrapflex-shrinkgapFlexalign selforderCSSflex directionflex-flowgridjustify contentFlexboxalign itemsCSS TIL#05 CSS Grid를 공부해보자! 특히 이 포스트도 정말 잘 정리되어있고 공부가 많이 되었던 것 같다. 여기서는 내가 정말 Grid를 잘 써먹을 수 있는지 지식을 검증하는 차원에서 작성해본다. Flexbox에 무언가 불편한 점이 있으니 좀 더 발전된 Grid가 나왔지 않았을까? 예를 들어 flex-wrap: wrap;속성을 적용했을 때, 만약 justify-content: space-between; 속성을 같이 적용했다면 아... CSSFlexboxgridCSS TLI 5 | Thank you - "CSS flex box" Flexbox를 설명하는 가장 기본적인 개념은 Flex-container(부모) / Flex-item(자식)에서부터 시작한다. flex-container(부모)에게 display:flex를 선언하게 되면 flex-items은 즉각적으로 영향을 받고 실행된다. 하지만 여기서 유의해야할 건, Flex-container와 flex-items가 직접적으로 종속관계에 있어야지 Flex모드가 제대로 적... CSS레이아웃FlexboxCSS 5. 중급 CSS와 반응형 기능 하위 자식 요소: flex item flex-direction flex item 들의 주 축(main-axis) 방향 설정 flex-wrap flex item 들을 1행 또는 복수의 행으로 배치하는 설정 flex-flow flex: block 특성의 flex container 정의 (수직 정렬) inline-flex: inline 특성의 flex container 정의 (수평 정렬) flex... @mediaFlexboxinheritance@media [CSS] 🐸Flexbox Froggy 귀여운 🐸개구리 게임 flexbox froggy🐸로 FLEXBOX를 공부해보았다. 엘리님의 드림코딩 강의를 들으면서 하게 됐는데 정말 유익하다! 사랑해요 엘리님. ❗ 참고 내가 보려고 하는 정리 🧺 justify-content 요소를 가로 선상에서 정렬한다. 🧺 align items 요소를 세로 선상에서 정렬한다. 🧺 flex-direction 정렬할 방향을 지정한다. ❗ Flex의 방향이 ... CSSfroggyFlexboxhtmlCSS Flex~~~돈콜미 css에서 flexbox에 대해서 알아보자 (이런거 뭐가 중요하겠어.... 비트코인 따따따따상하고 있는데) HTML에서 요소들의 배치를 편리하게 할 수 있엄 !! display: flex; 우리 웹페이지는 구성이 잘 되어 있어 ~~ 눈치챔? 이렇게 웹화면서 구성을 짜는거야 이렇게 화면 나눈는 방법 정말 다양한데 그 중에 플렉스박스 라는걸 알려줄께~~ ㅇㅋ 레츠고 그럼 오늘의 목표를 공개 할께... CSSFlexboxCSS TIL - 21.06.30 👨💻 - CSS 이 정사각형을 수직으로 두번 자르면(수직분할) 정사각형은 결국 가로로 세개의 직사각형이 나올 것 이다. 다만 flex는 부모에 적용한다 하더라도 자식의 자식, 즉 자식을 제외한 후손까지는 적용되지 않으니 자식의 자식을 가로 정렬 시켜야할때는 자식에게 display: flex 속성을 부여한다. flex-direction 속성 같은 경우는 부모에 적용시키는 속성으로, 자식을 가로로 줄세울지 세로... FlexboxCSSTILCSS 코드스테이츠 3주차 -[JS/Node] 배열, 객체 / [CSS] 레이아웃, Selector / [JS/Node] 핵심 개념과 주요 문법 배열 중 가장 큰 요소를 숫자로 리턴 ex) [1, 4, 3] -> 4 객체 : 각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 사용 셀렉터 : h1{ }, div{ } => h1 전체 선택, div 전체 선택 전체 셀렉터 : *{ } => 전체 선택 tag 셀렉터 : section, h1{ } => section과 h1을 다중 선택 ID 셀렉터 : #onl... scopeFlexboxselectorclosureCSS객체배열레이아웃jsCSS CSS Layout_1_Flexbox 배운점 FLEX를 사용하는 이유 float 혹은 inline-block 로 마크업할 때 화면 크기가 달라질때마다 그에 알맞게 변하지 않고 다 깨지거나 혹은 기본값으로 불필요한 여백들이 생기기 때문 Flex는 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 원하는 곳에 적절한 속성을 부여해서 사용할 수 있습니다. FLEXBOX에서 부모가 자식을 ... positionFlexboxCSSCSS flexbox 공부허자 학원에서는 백엔드 중심이었기 때문에 flexbox에 대해 언급하지 않고 넘어갔다. 그래서 flexbox에 대해 잘 알지 못하고 padding, float을 남발해왔는데.... float은 사실 이미지와 텍스트를 배치하는 데 사용되는 속성이다. 그래서 float은 left, center, right로 설정할 수 있는데, 이는 텍스트들이 이미지를 감사면서 배치되도록 하는 방법이었다. 즉, flo... FlexboxCSSCSS