TIL - 2023.11.03

Float

수평정렬, block 형태

float: left로 왼쪽 수평 정렬을 했는데 요소들이 컨테이너 밖으로 튀어나왔다. 이런 경우에는 해제(clear)를 해줘야 한다

 

해제(clear) 하는법

 

• float를 부여했다가 해제를 시작할 요소에 clear 속성을 부여한다                                                                                   (그러나 사용하지 않을 요소를 구조적으로 만드는 것은 비효율적이다)

• container에 overflow: hidden => float과 관련이 없다(근본적인 해결 방법이 아니다)
• 컨테이너에 가상 요소 선택자 ::after를 이용 (가상 요소 선택자는 content가 필수로 있어야 한다)

• clearfix가 부여된 컨테이너에는 float을 사용하는 요소들만 있어야 한다

---

Position

position은 body 기준으로 위치한다

static을 제외한 relative, absolute, fixed, stick를 parent에 넣으면 child 위치의 기준이 된다

조상 요소가 여러개인 경우 가장 가까운 조상 요소에 position 속성이 있는지 확인한다

 

쌓임 맥락(Stacking Context)

MDN 쌓임맥락

z-index로 요소를 위로 쌓는데 z-index를 사용하지 않고 요소를 위로 쌓는법이 있다

z-index는 position이 static을 제외한 relative, absolute, fixed, sticky에서 실행된다(모든 요소에서 실행 가능하지 않음)

---

Flex

1차원 레이아웃 구조 작업(수평/수직 정렬)

 

display: 속성

• flex 
  • block와 비슷하다
  • 수직, 가로로 늘어난다

• inline-flex
  • display: inline과 비슷하다
  • 수평, 가로는 줄어들려고 한다(item의 각각의 넓이만큼 공간을 차지함)

flex container(부모)

1. flex-direction 속성

• 각각의 item들이 어느 방향(x, y)으로 정렬될 건지 결정해주는 속성
• 기본 적으로 row의 값을 가지고 있다
• 주축, 교차축 : row의 주축: x축, column의 주축 : y축
• row: 행(줄), 수평 정렬
  • row-reverse: row는 왼쪽에서 오른쪽이지만 row-reverse는 오른쪽에서 왼쪽

• column: 열(칸), 수직 정렬
  • column-reverse: column은 위에서 아래이지만 column-reverse는 아래에서 위

2. flex-wrap

• 각각의 item들이 줄바꿈 처리가 될 수 있는지 설정할 수 있다
• nowrap(기본값): 컨테이너 길이가 넘어도 줄바꿈이 되지 않는다

• wrap(줄바꿈 가능): 칸이 없으면 줄바꿈 처리가 된다

• wrap-reverse: 줄바꿈 처리가 반대로 된다

3. justify-content 속성

• flex-start

• flex-end

• center

• space-between

• space-around

4. align-items 속성

• stretch: 기본값
• baseline: 문자 기준선
• flex-start

• flex-end

• center

5. align-content 속성

flex-start

flex-end

center

• space-between

• space-around

flex item(자식)

1. flex-grow 속성

• 증가되는 너비의 비율
• 기본 너비를 제외한 나머지 넓이의 비율을 맞춘다

 

2. flex-shrink 속성

• item의 width가 container보다 클 때 각 item의 width가 container의 width에 맞춰서 줄어든다
• flex-shrink: 0을 추가해주면 container의 범위를 벗어난다 (감소 너비 비율을 없앤다)

3. flex-basis 속성

• 기본 속성은 flex-basis: auto로 되어있다.

• auto가 아니면 지정한 width, heigth 값을 사용할 수 없다

 

flex 단축 표현으로 flex-basis, flex-grow, flex-shrink를 표현할 수 있다
flex 단축 표현에서 생략된 값은 기본값이 들어가지만 flex-basis는 auto가 아닌 0이 들어가서 따로 설정해주어야 한다

/* flex: grow shrink basis*/
flex: 1 1 0;
/* 위의 flex 단축 표현은 아래와 같다 */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

 

4. order 속성

• html을 수정하지 않아도 화면에 나타나는 순서를 관리할 수 있다

5. align-self 속성

• 개별적으로 flex를 설정할 수 있다'

inline-flex item(자식)

1. gap 속성

---

Grid

2차원 레이아웃 구조

grid

inline-grid

가로를 최대한 줄이려고한다

grid container(부모)

1. grid-template 속성

• grid-template-rows / grid-template-columns /grid-template-areas(영역 지정)
• fr단위: 공간 비율을 나타낸다, container를 꽉 채우고 싶은 경우 사용, 너비 값이 정해져 있어야 한다
• repeat(횟수, 단위): 똑같은 단위를 여러 횟수 필요한 경우 사용하는 함수

grid-template-rows: 50px 50px;
grid-template-columns: 1fr 1fr 1fr;
/* repeat 함수 */
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 1fr);

2. grid-auto 속성

• grid-auto-rows, grid-auto-columns를 이용해서 암시적으로 행과 열의 크기를 지정할 수 있다

 

명시적 크기 지정(5, 6, 7의 크기가 작음)

암시적으로 크기 지정하여 크기를 똑같게 맞춤

3. grid-auto-flow 속성

• dense: 빈 공간이 발생한 경우 빈 공간을 채운다
• row: 기본 값, 행 축을 기준으로 쌓인다
• column: 열 축을 기준으로 쌓인다
• row dense / column dense: 쌓이는 순서 중간에 빈 공간이 있으면 채운다

4. justify-content 속성

• 행 축을 기준으로 정렬(수평)
• start: 행 축이 시작 지점을 기준으로 정렬한다

• end: 행 축이 끝 지점을 기준으로 정렬한다

• center: 행 축 가운데 기준으로 정렬한다

• space-between: 첫번째 열은 시작점에, 마지막 열은 끝 지점에 붙어 균등하게 정렬한다

• space-around: 왼쪽과 오른쪽에 여백들을 균등하게 분배해서 정렬한다

• space-evenly: 행 축에서 모든 여백을 균등하게 분배해서 정렬한다

5. align-content 속성

• 열 축을 기준으로 정렬(수직)
• start: 열 축이 시작 지점을 기준으로 정렬한다

• end: 열 축이 끝 지점을 기준으로 정렬한다

• center: 행 축 가운데 기준으로 정렬한다

• space-between: 첫번째 행은 시작점에, 마지막 행은 끝 지점에 붙어 균등하게 정렬한다

• space-around: 왼쪽과 오른쪽에 여백들을 균등하게 분배해서 정렬한다

• space-evenly: 열 축에서 모든 여백을 균등하게 분배해서 정렬한다

6. justify-items 속성

• container 안에 있는 item들의 위치를 행 축을 기준으로 정렬
• start: 각 cell 내부에서 행 축에 시작점으로 item이 정렬

• end: start: 각 cell 내부에서 행 축에 끝점으로 item이 정렬

• center: item이 cell 안에서 행 축으로 가운데 정렬한다

7. align-items 속성

• container 안에 있는 item들의 위치를 열 축을 기준으로 정렬
• start: 각 cell 내부에서 열 축에 시작점으로 item이 정렬

• end: start: 각 cell 내부에서 열 축에 끝점으로 item이 정렬

• center: item이 cell 안에서 열 축으로 가운데 정렬한다

8. gap 속성

• grid-gap / gap 으로 사용
• container안에 item 사이에 간격을 설정한다