웹 기초 스터디 6주차 WIL6

1. Flexbox Layout

Flexible Layout

아이템이 배열될 방향인 주축을 정할 수 있다.

justify-content: main axis

align-item: cross axis

암기팁) 저주콘서트, 크로스-라인

연습) https://flexboxfroggy.com/#ko

Flexbox Froggy

2. Box model

Content - The content of the box, where text and images appear / 컨텐츠 영역, 글과 이미지 등
Padding - Clears an area around the content. The padding is transparent / border와 content 사이의 간격, border의 내부 여백
Border - A border that goes around the padding and content / 여러 종류의 테두리가 있으나 자주 사용되지는 않는다

Margin - Clears an area outside the border. The margin is transparent / 요소와 요소 사이의 여백

(source: https://www.w3schools.com/css/css_boxmodel.asp)

tip) devtools를 사용하면 박스 모델을 볼 수 있다

 

더 알아보면 좋을 것들: CSS grid layouts, can i use?