빅데이터 부트캠프 79일차 (CSS)

float

- 웹 페이지에서 이미지를 텍스트와 어떻게 부유시킬지 설정하는 속성

※ 부유 = 기본적인 문서 배치에서 벗어나 요소의 모서리를 페이지의 왼쪽이나 오른쪽으로 이동시키는 것

- left = 이미지를 페이지 왼쪽, 텍스트를 페이지 오른쪽으로 배치

- right = 이미지를 페이지 오른쪽, 텍스트 페이지 왼쪽으로 배치

 

clear

- float의 영향을 받지 않도록 하는 속성

- float과 마찬가지로 left, right, both 속성 존재

- .clearfix:after{ content: ""; display: block; clear: both }

 

position

- 해당 태그를 어디로 위치시킬지 설정하는 속성

- top, bottom, left, right 등의 위치 속성 요소와 함께 입력

- absolute = 위치상의 부모 요소 기준으로 설정

- relative = 원래 있던 위치 기준 (z-index 적용시 부모 요소에 입력 필수!)

- fixed = 브라우저 창 기준 (스크롤을 해도 위치 고정)

- scroll = 스크롤 영역 기준

- 부모 요소를 기준으로 서로 부모, 자식 요소가 서로 겹친 상태로 표현하게 하려면 부모 요소의 position = relative, 자식 요소의 position = absolute로 설정

- 부모 요소에 대한 크기 설정(width, height 중 최소 하나)이 적용되어야 자식 요소를 그 위에 적용시킬 수 있음

 

flexbox

- 레이아웃을 만들 때 아주 유연하고 동적인 구조를 유지할 수 있는 박스 모델

- display: flex; = flex 사용을 위해 입력하는 기본 설정

- fixed-direction = 행(row) 방향으로 배열할지 열(column) 방향으로 배열할지 설정

- flex-wrap = 항목이 늘어나 부모 너비 이상으로 공간을 차지하는 경우 다음 열에 정렬되지 않고 한줄로 배열되게 설정(nowrap = 기본값), 그렇지 않고 다음줄에 이어서 배열(wrap)

- justify-content: center; = 수평 정렬

- align-items: center; = 수직 정렬

- flex-basis: 0; = 크기를 같은 비율로 설정