박스를 배치하거나 고유의 속성을 바꾸는 display
dispaly는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀때 사용함.
- dispaly : block; 해당 요소를 block속성으로 바꾸거나, none으로 숨긴 요소를 다시 나타냄.
- dispaly : inline; 해당 요소를 inline속성으로 바꿈.
- dispaly : inline-block; 해당 요소를 inline-block속성으로 바꿈.
- display : none; 해당 요소와 영역을 모두 표현하지 않음(숨김).
=> inline 속성인 span을 block속성으로 변경해서 위에서 아래로 보여진다.
=> block 속성인 div는 inline속성으로 변경해서 가로로 보여주고 사이에 공백이 1칸씩 들어간걸 확인할 수 있다.
=> block 속성인 li를 inline-bolock속성으로 변경
영역은 남겨둔채 요소를 숨길 수 있는 visibility
display:none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨긴다. 하지만 영역은 남겨두고 싶을 때 visibility를 사용할 수 있다.
- visibility:hidden; 요소가 차지하고 있던 영역은 그대로 두고 요소만 숨김.
- visibility:visible; 요소가 차지하고 있는 영역과 요소를 그대로 보여줌. 기본값.
display:flex ★★★★★
부모박스(container)안의 자식박스(item)를 정렬하는 속성.
flex를 적용하는 순간부터 자식박스는 가로로 정렬됨.
이때 자식박스의 가로 넓이 총 합이 부모박스의 넓이를 넘게 되면
자식박스의 사이즈가 자동으로 줄어들며 부모를 채움.
컨테이너에 flex가 적용되면 해당 자식들을 다양하게 정렬하는
하위 정렬 속성들을 함께 사용할 수 있다.
★중요!!! display:flex 속성은 부모박스에 적용해야 하며, 이에 따른 하위 정렬 속성들도 부모박스에 적용해야 함.
=========<하위 정렬 속성>=========
1. justify-content
부모박스 안의 자식박스들을 가로로 정렬할 때 사용하는 속성.
-
justify-content : flex-start;
:기본값으로 부모박스 안의 자식들을 왼쪽에서 오른쪽으로 정렬함.
-
justify-content : flex-end;
:부모박스 안의 자식들을 오른쪽에서 왼쪽으로 정렬함.
-
justify-content : center;
:부모박스 안의 자식들을 가운데로 정렬함.
-
justify-content : space-between;
:부모박스 안의 자식들을 양쪽을 기준으로 같은 간격으로 정렬함.
-
justify-content : space-around;
:자식박스의 양옆으로 동일한 간격으로 정렬함.
=> box1과 box2의 빨간색으로 표시한 것 참고!
-
justify-content : space-evenly;
:부모박스 안의 자식박스들을 고르게 동일한 간격으로 배치함.
