# Flex

27개의 포스트

[CSS] Flex

과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.float은 배우기 어려움.이러한 상황에서 flex가 등장함.flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그

2020년 5월 21일
·
0개의 댓글

TIL CSS Flexbox

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flex의 2가지 개념 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. 위에서 살펴본 바와 같이 Co

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

WeStudy TIL # 14 - flex display (Netflix 클론[2])

넷플릭스의 상단 로고와 로그인이 있는 바를 만들기위해 float나 여러가지 방법이 있겠지만요새는 가장 주로 사용하는 flex를 써서 쉽고 유연하게 배치해보았다.flex에서 중요한것은 flex container 안에 flex item 이 들어있다는 것이다.containe

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

flex shrink 계산법

flex-shrink 의 계산은 flex-basis, width, height 의 영향을 받기 때문에 여간 까다로운 일이 아니다. 실무에서는 많이 사용해보진 않았지만, 계산법은 알고 있어야 할 것 같아 정리 해본다.위 그림은 flex-basis의 값이 각각 100px

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

레이아웃을 잡자.

나는 건축설계를 하듯이 하려고 한다. 큰 덩어리(mass)을 잡고, 메스의 모양을 얼추 잡은 뒤 그 메스 안에 공간을 생성한다. 이 공간은 휴식을 위한 공간, 생활하는 공간 등등, 그리고 그 안에는 룸을 통해 실제로 어떤 행위가 일어날 수 있도록 한다.HTML 요소가

2020년 4월 26일
·
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개의 댓글

[CSS] flex

부모에 적용되는 요소들(아이템들의 부모)row / column / row-reverse / column-reversflex방향wrap / wrap-reversfloat처럼 화면이 줄어들면 자동으로 아래로 떨어진다.flex-start / center / flex-end

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

20.03.25(Wed) Module #3. Flexbox

만약 내가 많은 수의 박스를 가지고 싶은 경우에, float 나 inline-block 을 여기저기 바르는 방식은 박스가 옆으로 떨어지는게 아니라 밑으로 내려간다.이 경우에 자세히 보면 좌우 마진이 다르다. 그래서 일일이 7.2 px, 7.8 px 이렇게 마진값을 수정

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

Flex & Grid 에 대한 간단 영상

화면을 스타일링 할 때 항상 어려워하는 flex와 grid에 대해 블로깅을 해야겠다.이건 내가 정리해서 적는 것 보다 어려울 때마다 보는 게 더 좋을 것 같다.참조영상 : https://www.youtube.com/watch?v=eprXmC_j9A4엄청 이해하

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

Flex 카드리스트

카드리스트 컨텐츠 높이조절 부모컨테이너에 flex하고, 내용이 들어가는곳에 아래 코드를 입력해주면 (flex-grow) 높이가 다른 문장이여도 박스가 자동으로 늘어난다.

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

rem과 em차이..

rem : html 폰트사이즈 기준em : 현재부모의 폰트사이즈 기준

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Flex 유연한 검색창

창을 늘렸다 줄였다하면 찾기 버튼은 위치가 고정되어있고 검색창만 줄어들었다 늘어났다함.부모가 flex속성이여서 자식들은 flex 아이템이된다.flex의 기본속성은 align-items:stretch 이다. (세로로 늘어남)=> 부모속성에 height:40px을 줄경우

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Flex 메뉴

padding:1rem => 현재 폰트사이즈만큼 패딩을주겠다.font-size:1rem => 현재 html에 설정된 폰트 사이즈를 1rem으로

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

TIL #21. css-flex사용법

Flexbox Froggydisplay: flex; 후 적어줘야함justify-content: 가로정렬 ex) justify-content: flex-end;flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으

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

Flex 유용한 기법들

왼쪽 결과물에서 보다시피 C만 맨 끝으로 떨어트리고싶을때 사용하는 기법.으로는 구현이 어려울때 사용함왼쪽 결과물이 사진으로는 짤려보이지만 왼쪽에서부터 1:8:1 비율이라고 보면 된다. (총합 10)각 끝의 컬럼들은 width(사이트 크기)가 바뀌어도 고정되어있고 ( f

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

Flex 이미지 버튼 정렬 팁

위 사진과 똑같이 padding으로 이미지를 가운데 정렬 할 수 있겠으나,padding으로 할 경우 svg로 만든 폰트어썸과 같은것 들은 각기 크기가 달라 붕 뜨는 경우가 생김 그래서 flex사용을 권장함

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

Basic CSS

CSS를 HTML에 적용하는 세 가지 방법의 장단점 inline style 장점: 태그 단위로 스타일을 지정하기 때문에 특정 태그에 어떤 스타일을 적용시켰는지 직관적으로 알기 쉽다 단점: 스타일 일괄 적용이나 일괄 변경 등의 작업을 할 때 매우 비

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

아주 간략한 css flex 사용법 정리

css의 flex란? element들의 위치를 쉽게 잡아주는 속성. 예를 들면... flex를 잘 모르던 시절 대개 이런 방식으로 구조를 짜고 스타일을 잡았다. 결과물은 스크린샷 2020-02-07 오후 10.55.17.png 메뉴를 얻고자 많은 스타일을 사용하게 되었다. 좀 더 디테일하게 스타일을 잡게된다면 마진과 패딩값, 요소들에게...

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