# flex box
[CSS] Flex-box 1.
✅ block vs inline CSS를 이용해 Box를 만들면 기본적으로 display: block이 된다. block속성의 특징은 옆으로 무언가가 올 수 없기 때문에 한줄을 다 사용하게 된다. 그에 반해, inline속성은 옆에 무언가를 둘 수 있지만, Box처럼 width나 height을 사용할 수 없다. ✅ Box를 inline처럼 두고 싶을때?...
TIL 08___CSS basic 4(Flex box)
* 웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에 배경을 지정하는 방법 등에 대해 알아본다. 1. 배경색을 지정하는 background-color 속성 색상을 세밀히 조절하고 싶다면 16진수값을, 투명도도 함께 조절하고 싶다면 rgba표기법을 사용
Flex box
flex box 에 대해 공부한걸 간단하게 정리한다.부모 요소 내의 자식 요소들의 정렬에 사용된다.부모 요소 - flex containel자식 요소 - flex item위와 같은 html body가 작성되어 있다고 할 때와 같이 css 코드를 작성하면다음과 같이 핑크색
TIL[006] 21.03.18
flex-basisflex item의 초기 너비를 지정, 이후 남은 공간은 증가/감소(glow/shrink) 근거로 공간분배flex-glowflex item의 너비를 늘어나도록 정의해 줄 수 있는 속성flex-glow: 1 일 경우 컨테이너 너비에 맞춰 균등하게 배분f
CSS flex
아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다. flex-box 수평, 수직 정렬과 관련된 속성 (container, item로 이루어짐) display: flex : container가 block (flex container로 정의함!) di
[HTML / CSS] FlexBox 정복하기 3
flex-grow flex-shrink flex-basishtml 파일 css파일 flex-grow와 flex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink
[HTML / CSS] FlexBox 정복하기 2
요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-content: fl
[HTML / CSS] FlexBox 정복하기 1
flex box 모델의 모든것을 알아보자👻오늘은, flex box를 생성하고(display: flex;), 요소들을 다음줄로 넘겨주고 (flex-wrap), 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로
Flexbox가 등장하기 전에 우리가 했던 것들
div는 block 요소로 위에서 아래로 쌓이게 되어 있다. 이것을 수평 정렬 할 수 있는 방법이 무엇이 있을까.필자는 flex라는 속성이 나오기 전에 아래 두 가지 방법을 이용해 수평 정렬을 했다.첫 번째 방법으로는 block요소를 inline화 시키는 것이었다. 여
