[CSS] display와 float, Felx

display

요소가 화면에 어떻게 보여질지 특성을 지정합니다.

.container {
  display: <display-keyword>;
}

Value

1. none : 보여지지 않는다. 요소는 존재하지만 화면에서는 사라진다.

2. inline : 글자요소

3. block : 상자 (레이아웃) 요소

4. inline-blokc : 글자 + 상자 요소

5. flex box : 1차원 레이아웃(x축, y축)

6. grid : 2차원 (x축, y축) 행과 열을 동시에 사용

---

float

출처:https://velog.io/@rimu

웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성

float: value;

value

• inherit: 부모 요소에서 상속
• left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
• right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시
• none : 요소를 부유시키지 않음

※ 자식 요소에 float로 정렬하면 높이값을 잃는 것을 해결하는 방법

1. 직접 높이값 부여
2. 넘침 제어 overflow : hidden

---

Flex

레이아웃을 좀 더 간결하고, 쉽게 구현하기 위해 W3C(World Wide Web Consortium)에서 CSS3에 새롭게 추가한

레이아웃 방식,1차원 레이아웃을 만드는 Flex 정렬

출처:https://d2.naver.com/helloworld/8540176

※ 아이템이 수평으로 쌓이면 main축이 가로, 교차축이 세로 / 아이템이 수직으로 쌓이면 main축이 세로, 교차축이 가로이다.

Flex 레이아웃을 만들기 위한 기본 구조

부모

Flex Container 라고 합니다

.Flex_Container {
	display : flex; 
}

자식 

Flex Container의 자식 요소들은 Flex Item라고 합니다.

.Flex_Container .Flex_Item {
	...
}

 

※ 명칭을 알아야 하는 이유 : Flex Container와 Flex Item 에 사용할 수 있는 속성이 다르다.

 

▶ Flex Container에 적용하는 속성

1. display(화면에 보여질 특성) - display를 입력하는 것이 flex의 시작

display: flex;

display: inline-flex; /* inline-flex보다 flex를 주로 사용한다. */

• flex : Block 특성의 Flex Container를 정의
• inline-flex : Inline 특성의 Flex Container를 정의

2. flex-derection

아이템들이 배치되는 주 축을 결정(main축의 방향을 결정하기 위함 <수직 / 수평>)

flex-derection: value;

Value

  1) 수평(main축이 수평)

• row : 행기준 좌에서 우로 진행
• row-reverse : 행기준 우에서 좌로 진행

  2) 수직(main축이 수직)

• column : 열기준 위에서 아래로 진행
• column-reverse : 열기준 아래에서 위로 진행

3. flex-wrap

Flex Item 들의 줄 바꿈 여부 결정

flex-wrap: value;

Value

• wrap(기본값) : Items를 여러 줄로 묶음
• nowrap : 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시)
• wrap-reverse : Items를 wrap의 역 방향으로 여러 줄로 묶음

4. flex-flow

flex-direction과 flex-wrap을 동시에 사용하는 경우

flex-flow: value value2;

 

예시

flex-flow: row wrap;
flex-flow: column nowrap;

→ 이와 같이 한번에 사용이 가능한다

 

※ Midia Query (반응형 웹의 핵심)

→ 프로그래밍 언어의 if() 조건문과 유사한 개념으로 반응형 웹 디자인의 기본이 되는 미디어 쿼리, CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 경우 사용

/*사용방법*/
@midia(조건) {
	css_style
}

5. justify-content

주 축(main 축)으로 아이템을 정렬하는 속성, flex-direction이 수평 정렬인 경우

justify-content: value;

Value

• flex-start : items를 시작점(왼쪽) 기준으로 정렬
• flex-end : items를 끝점(오른쪽) 기준으로 정렬
• center : items를 중앙 정렬
• space-around : 아이템들의 “둘레(around)”에 균일한 간격
• space-between : 아이템들의 “사이(between)”에 균일한 간격

5. align-content (justify-content의 반대 개념) 

교차 축, 여러줄 정렬 방법, flex-direction이 수직 정렬인 경우

align-content: value;

Value

• flex-start : items를 시작점 기준으로 정렬
• flex-end : items를 끝점 기준으로 정렬
• center : items를 중앙 정렬
• space-around : 아이템들의 “둘레(around)”에 균일한 간격
• space-between : 아이템들의 “사이(between)”에 균일한 간격

▶ Flex Items에 적용하는 속성

1. order

Flex Items의 순서를 지정

order: value;

Value

• 0 : 순서가 없다
• 슷지 : 숫자가 적을 수록 순서가 빠르다

2. flex-basis

Flex Items 기본 크기 설정

flex-basis: value;

Value

• auto : 내용(콘텐츠)의 넓이
• 단위 : px 등 단위

3. flex-grow

컨텐츠를 비율에 따라서 늘리기 위해서 사용

flex-grow: value;

Value

• 숫자 : 늘어날 비율을 작성

4. flex-shrink

컨텐츠를 비율에 따라서 줄이기 위해서 사용

flex-shrink: value;

Value

• 숫자 : 감소 비율 작성