# Flexbox

10개의 포스트
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개의 댓글