StudyLog/CSS (3) 썸네일형 리스트형 [CSS] Flexbox inline block의 문제점을 해결하기 위해 flexblock 사용 📌 flexbox 사용 규칙 자식 엘리먼트에는 어떤 것도 적지 않음 자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다. body : div태그의 부모 엘리먼트 body { height: 100vh; margin: 20px; display: flex; justify-content: space-evenly; align-items: center; } div { width: 300px; height: 300px; background-color: teal; } justify-content : main axis에서 작용 (주축) (디폴트) align-items : cross axis에서 작용 (교차축) .. [CSS] margin / border / padding 📌 margin box에서 border(경계)의 바깥에 있는 공간 [CSS] Block / Inline 다른 요소가 옆에 올 수 없는 걸 block 다른 요소가 옆에 올 수 있는 걸 inline 대부분의 요소는 block이고, inline인 것은 많지 않다. (span, a image) 등 div : 대표적인 block 요소 옆에 다른 div가 올 수 없음. span : 대표적인 inline 요소 옆에 다른 요소(a, image)가 올 수 있음 이전 1 다음
