display2 [CSS] Flexbox / container / item / vh / % / display / flex-direction / flex-wrap / justify-content / align-items / Flexbox의 구조는 외곽의 큰 box를 "container"라고 하고, 내측의 박스들을 각각 "item"이라고 하자. container에 적용할 수 있는 속성 display flex-direction flex-wrap flex-flow justify-content aligj-items align-content item에 적용할 수 있는 속성 order flex-grow flex-shrink flex align-self 최상위 div class "container"를 만들었고, 하위에는 1 ~13 까지의 div class "item" 만들었다. //CSS .container { background-color: beige; height: 100%; } .item { width: 50px; height: .. 2022. 9. 20. [CSS] - display / position / inline-block / static / relative / absolute / fixed / sticky See the Pen css block / inline by hbkuk (@hbkuk) on CodePen. div 태그와 span 태그의 display 타입을 각각 반대로 변경한다면? div { background-color: red; display: inline; } span { background-color: blue; display: block; } div 태그의 display: inline-block으로 변경한다면? // block element가 한줄에 한개씩 display: block; // block element가 한줄에 다 배치 display: inline-block; 한줄에 하나씩 배치되지 않고 1줄에 배치 See the Pen Untitled by hbkuk (@hbkuk) on C.. 2022. 9. 20. 이전 1 다음