본문 바로가기

CSS

 (18)
[CSS] display 속성 - Flex : flex-container flex에는 두가지 요소가 있다. flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 ) flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 ) flex-container display : flex flex-direction : row , column , row-reverse , column-reverse flex-wrap : wrap , wrap-reverse flex-flow : row wrap , row , wrap justify-content : flex-start , flex-end , center , space-between , space-around , space-evenly align-items : stretch, flex-start , ..
[css] display 속성 - block / inline / inline-block / none display속성으로 block, inline, inline-block, none 값을 가질 수 있다. 1. block 기본적으로 가로 영역을 100%로 채워, 다음 태그는 줄바꿈이 된 것처럼 보여진다. 줄바꿈 O width와 height속성을 지정 할 수 있다. margin과 padding의 값을 지정 할 수 있다. width와 height속성을 지정해, 다음 블록태그가 그 이전 블록태그의 오른쪽에 배치 될 수 있어도 항상 다음줄에 렌더링 된다. width , height , margin , padding 모두 값을 지정할 수 있는것을 확인했다. 2. inline content의 너비만큼 영역을 차지하기 때문에 달리 줄바꿈이 되지 않고, 다음에 올 요소가 같은 줄에 배치될 수 있다. 줄바꿈X width..

티스토리툴바