# flex box

17개의 포스트
post-thumbnail

[CSS] Flex Box

드림코딩: CSS Flexbox 완전정리 드림코딩: 웹사이트 따라만들기, 반응형 헤더편

2022년 7월 7일
·
0개의 댓글
·

[CSS] Flex-box 1.

✅ block vs inline CSS를 이용해 Box를 만들면 기본적으로 display: block이 된다. block속성의 특징은 옆으로 무언가가 올 수 없기 때문에 한줄을 다 사용하게 된다. 그에 반해, inline속성은 옆에 무언가를 둘 수 있지만, Box처럼 width나 height을 사용할 수 없다. ✅ Box를 inline처럼 두고 싶을때?...

2022년 3월 26일
·
0개의 댓글
·

Editors in Chrome

미완성 크롬 개발자 도구에서 box-shadow, font-style, flex 쉽게 변경하기

2021년 12월 6일
·
0개의 댓글
·
post-thumbnail

TIL 08___CSS basic 4(Flex box)

* 웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에 배경을 지정하는 방법 등에 대해 알아본다. 1. 배경색을 지정하는 background-color 속성 색상을 세밀히 조절하고 싶다면 16진수값을, 투명도도 함께 조절하고 싶다면 rgba표기법을 사용

2021년 11월 6일
·
0개의 댓글
·
post-thumbnail

😮 Flex

Flex-box 사용법 정리

2021년 11월 1일
·
0개의 댓글
·

211027 TIL Kakao 앱코딩3 (학습 93일차)

flex-box, align-self

2021년 10월 28일
·
0개의 댓글
·

211022 TIL Flex-Box (학습 90일차)

flex box model

2021년 10월 22일
·
0개의 댓글
·

210822 일요일 리마인드 학습

HTML Tag, CSS flex-box

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

Flex box

flex box 에 대해 공부한걸 간단하게 정리한다.부모 요소 내의 자식 요소들의 정렬에 사용된다.부모 요소 - flex containel자식 요소 - flex item위와 같은 html body가 작성되어 있다고 할 때와 같이 css 코드를 작성하면다음과 같이 핑크색

2021년 8월 14일
·
0개의 댓글
·

TIL[006] 21.03.18

flex-basisflex item의 초기 너비를 지정, 이후 남은 공간은 증가/감소(glow/shrink) 근거로 공간분배flex-glowflex item의 너비를 늘어나도록 정의해 줄 수 있는 속성flex-glow: 1 일 경우 컨테이너 너비에 맞춰 균등하게 배분f

2021년 3월 18일
·
0개의 댓글
·
post-thumbnail

TIL(2021.01.29)

HTML & CSS wireframe , Flex-Box

2021년 1월 31일
·
0개의 댓글
·
post-thumbnail

CSS flex

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. flex-box 수평, 수직 정렬과 관련된 속성 (container, item로 이루어짐) display: flex : container가 block (flex container로 정의함!) di

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

[HTML / CSS] FlexBox 정복하기 3

flex-grow flex-shrink flex-basishtml 파일 css파일 flex-grow와 flex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink

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

[HTML / CSS] FlexBox 정복하기 2

요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-content: fl

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

[HTML / CSS] FlexBox 정복하기 1

flex box 모델의 모든것을 알아보자👻오늘은, flex box를 생성하고(display: flex;), 요소들을 다음줄로 넘겨주고 (flex-wrap), 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로

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

Flexbox가 등장하기 전에 우리가 했던 것들

div는 block 요소로 위에서 아래로 쌓이게 되어 있다. 이것을 수평 정렬 할 수 있는 방법이 무엇이 있을까.필자는 flex라는 속성이 나오기 전에 아래 두 가지 방법을 이용해 수평 정렬을 했다.첫 번째 방법으로는 block요소를 inline화 시키는 것이었다. 여

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