# Flexbox

20개의 포스트

CSS flexbox

css에서 강력한 정렬기능을 제공하기 위해 고안되었다. 두 개의 축에 대해 명확히 이해해야 정확히 다룰 수 있다. nowrap : 부모 박스 사이즈에 맞춰서 강제로 자식 요소 사이즈를 줄여서라도 무조건 한줄로 정렬됨.: flex-direction 으로 지정된 메인 축

6일 전
·
0개의 댓글

2020SEPT10-12(Final Project 06, CSS, flexbox, 반응형웹, styled-component, tips)

이번 프로젝트를 기획할 때에, 팀원들과 회의를 통해 구체적인 디자인을 기능 구현이 어느 정도 끝나갈 때쯤 시작하자는 의견이 나와서 그동안 기능 구현에 집중하고 이번 주부터 차근차근 css를 만져보았다. 프로젝트 기획 때부터 깔끔한 디자인을 생각했었고, 그에 맞춰서 cs

2020년 9월 12일
·
0개의 댓글
post-thumbnail

TIL] CSS-Flexbox

. flexbox: container/item에 각각 적용할 수 있는 속성값들이 있으며 중심축의 선택(수평/수직)에 따라 반대축이 달라진다. flexbox를 활용하면 웹 브라우저 화면에 컨텐츠의 배열을 자유롭게 할 수 있다. 참조: https://youtu.be/

2020년 9월 10일
·
0개의 댓글
post-thumbnail

200906__CSS Layout: Flexbox

오늘의 TIL은 맨날 까먹는 Flexbox 요소를 정리해본다.

2020년 9월 6일
·
0개의 댓글
post-thumbnail

TIL 35 | CSS Flexible Box

Flexbox 연습하는 사이트 : https://flexboxfroggy.com/#ko

2020년 8월 24일
·
0개의 댓글

2.To Do List div틀잡기

처음에 틀을 안잡고 만들었는데 갈수록 틀 잡는 어려움이 생겨서 CSS flexbox를 적용해 틀을 잡았다.CSS flexbox 참조https://d2.naver.com/helloworld/8540176

2020년 8월 22일
·
0개의 댓글
post-thumbnail

[TIL] 2020/08/13

Planning to Study Document Object에 대한 이해(복습) 객체지향 프로그래밍 부분까지 문법 복습(JS) 현재 twittler 프로젝트로 회원가입까지(with API) 구현해서 포폴로 쓸 수 있게 만들어놓기 flexbox, grid

2020년 8월 13일
·
0개의 댓글
post-thumbnail

css - float , flexbox

float 의 원래 목적은 이미지와 텍스트들을 어떻게 배치하기 위해 사용한다.float : left 이미지가 왼쪽에 배치된다. float : right 이미지가 오른쪽에 배치된다.float : center 이미지가 중앙에 배치된다.예전에는 float 를 많이 많이 사용

2020년 8월 4일
·
0개의 댓글

flex-basis

flex-basis.MDN에서 flex-basis를 다음과 같이 정의하고 있다.flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다.display: flex 특성 상, content의 width가 viewport 보다 크면 width를 따르지 않고

2020년 7월 26일
·
0개의 댓글
post-thumbnail

TIL 07 | CSS Flexbox

Flexbox는 container, Box에 적용되는 속성 값이 존재하고, 각각의 item에 적용되는 속성 값이 존재한다.Flexbox에는 중심축과 반대축이 있다.(main axis, cross axis)flex-direction: row; item이 왼쪽에서 오른쪽으

2020년 7월 21일
·
0개의 댓글
post-thumbnail

[번역] A Complete Guide to Flexbox

flexbox란 용어를 볼 때마다 정리해야지 해야지 생각한 것을 드디어 실천에 옮겨본다. 이 글은 CSS-TRICKS의 A Complete Guide to Flexbox라는 글을 번역한 것이다. 글을 읽는데 별 도움이 되지 않는 문장이나 단어는 과감히 삭제 또는 수정했

2020년 6월 16일
·
0개의 댓글

포트폴리오(06 : 레이아웃 만들기)

프로젝트에서 Material-ui의 기본적인 테마 이외에 나만의 테마를 위한 스타일링이 필요했다. Material-ui는 Css전처리기 대신 jss(javacript based style solution)을 사용하기 때문에 SCSS를 활용해서 컴포넌트를 스타일링하는 레

2020년 5월 19일
·
0개의 댓글
post-thumbnail

포트폴리오(02 : 반응형 웹사이트 구현)

포트폴리오를 반응형레이아웃을 적용해서 만들고 싶었고,어떻게 구현을 할지 검색중에 여러가지 방법들이 나와서 정리해본다.Flexbox 활용design framework 활용(bootstrap, material uimedia query library(react-respons

2020년 4월 28일
·
0개의 댓글

flex 컨테이너에 가로 스크롤 (overflow-x:scroll)

overflow-x:scroll 를 적용하면서 여러 케이스들을 보았는데 이를 정리.결국 방법은 문서에 있었다. 😂flexbox의 기본개념 MDN으로 익히기flex-wrap은 item들이 여러 행에 나열될 수 있도록 도와준다.default값은 nowrap이다. 그래서

2020년 4월 15일
·
0개의 댓글

flexbox의 기본 개념

공부 이유 잘~ 정리된 블로그글들에서 내가 필요한 layout을 찾아 복붙하는 일들이 많았다. 😓(반성중) 이전에 일할 때 하위 브라우저를 맞춘다는 이유로 잘 안써봄.. flexbox에서 overflow:scroll을 작업하는데 많은 삽질과 많은 시간을 소비하여 문서

2020년 4월 15일
·
0개의 댓글

CSS - Flexbox

부모 컨테이너를 플렉스로 선언하면, 그 안에 종속된 칠드런 박스들을 움직일 수 있다. 각각의 박스에게 일일히 명령할 필요가 없다.flex-dirextion: row; 일때 (디폴트) justify-content 수평으로 적용 align-items 수직으로 적용flex

2020년 3월 31일
·
0개의 댓글
post-thumbnail

난 평생 FLEX하지 못할거같다.

이론의 중요성을 모르는 미물들에게 'flex~' 를 통해 실전맛보기를 시켜주는 괴물같은 글입니다. 깨굴! ( 썸네일 이미지는 https://www.youtube.com/watch?v=X4j_HU-wZwA 의 캡쳐이미지입니다. )

2020년 3월 26일
·
2개의 댓글
post-thumbnail

요구사항에 따른 퍼블리싱 : 시맨틱 웹, 반응형 페이지

프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat

2020년 3월 25일
·
4개의 댓글

[TIL] 17. CSS Flexbox

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.row (default) : 요소들을 텍스트의 방향과 동일하게 정렬한다.row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.column : 요소들을 위에서 아래로 정렬한다.column-reverse :

2020년 2월 12일
·
0개의 댓글

TIL - Day2: CSS-Flex

CSS3는 2011년 6월 7일 최초 Color 모듈이 발행된 이후로 꾸준히 업데이트 되고있는 최신 CSS 기능이다. 현재도 꾸준히 업데이트가 되고 있으며, CSS3의 등장으로 인해 기존에 사용되던 Bootstrap과 같은 CSS 라이브러리는 J-Query와 함께 레거시가 되었다. 레거시- 신규 기술 등장으로 인해 기존 기술이 도태되는 현상. 그 중에서,...

2019년 7월 31일
·
6개의 댓글