[Today I Learn] 2022.08.03

TIL

• CSS 레이아웃 : Display, Position, Float, Flexbox, Grid 등

- Float

• 박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함한 인라인 요소들이 주변을 감싸도록 함
• 돌멩이(사진 등의 요소)를 주변으로 물(글)들이 감싸 흐르도록 하는 구조
• 요소가 Normal Flow를 벗어나도록 함

- Flexbox

• 주로 활용할 예정
• 행과 열 형태로 아이템을 배치하는 1차원 레이아웃 모델
• main axis : 메인 축(행  방향), cross axis : 교차 축 (열 방향)
• Flex Container (부모 요소)와 Flex Item( 자식요소) 가 있다.
• flex direction에 따라 justify direction, align direction이 달라진다. 
• flex direction은 부모 태그에서 설정. 기본값은 row 방향
• 이전까지의 normal flow를 벗어나기 위해 float와 position을 수단으로 사용 

- bootstrap

2022.08.03 - [Web] - [Bootstrap] 부트스트랩 정리

 

What I did

1. CSS
2. Bootstrap

 

Memo

• 온라인 수업을 하면 집중도가 너무 낮아지는 것 같다. 중간중간 너무 자는 듯 (심지어 낮밤이 바뀌기도..)
  → 대책이 필요해