display 속성은 엘리먼트 요소를 어떤 방법으로 보여줄 것인지를 지정할 수 있는 속성이다.블록 요소: 가로 길이를 모두 차지하며, 다음 요소가 줄바꿈된다.인라인 요소: 자신의 크기만큼 가로 길이를 차지하며, 다음 요소가 줄바꿈 되지 않는다.| 속성 | 뜻 |
|---|---|
| block | 요소를 블록 요소로 지정 |
| inline | 요소를 인라인 요소로 지정 |
| inline-block | 인라인 요소의 크기를 갖지만, 블록 요소의 스타일을 사용할 수 있다. |
| flex | 요소 컨테이너 측에서 하위 아이템들의 배치를 조정할 수 있다. |
| none | 요소를 보이지 않도록 지정 |
display: flex로 지정된 컨테이너에서 하위 아이템들의 배치를 조정할 수 있는 방법| 속성 | 뜻 |
|---|---|
| gap | 하위 아이템들의 간격 (픽셀 등 단위 사용) |
| flex-direction | 아이템들의 정렬 방향 (수직 or 수평, 기본값은 수평) |
| justify-content | 가로축(주 축)의 정렬 방향 (시작점, 중간점, 끝점) |
| align-items | 세로축(교차 축)의 정렬 방향 (시작점, 중간점, 끝점, 높이와 같게) |
<aside>
💡 아이템들의 정렬 방향이 수직일때 (flex-direction: column)
</aside>
position 속성은 엘리먼트 요소를 어떤 방법으로 배치할것인지 지정할 수 있는 속성이다.| 속성 | 뜻 |
|---|---|
| static | 원래 HTML 문서상에서 있어야 하는 위치로 배치 (기본값) |
| relative | 하위 요소에서 absolute 사용시, 자신의 위치를 기준으로 x, y 값에 따른 배치 |
| absolute | 상위 요소를 기준으로 x, y 값에 따른 배치 |
| fixed | 설정된 x, y값에 따라 뷰포트에 고정되도록 배치 (스크롤 되더라도 고정) |
| sticky | 설정된 x, y값에 따라 뷰포트 위치에 도달시에 고정되도록 배치 (스크롤 될때만 고정) |
<aside>
💡 absolute와 fixed 속성은 다른 요소와 겹칠 수 있는 특징을 가지기 때문에, 요소 위에 겹치는 형태의 UI를 제작할때만 사용하는 것이 좋다.
예) 팝업, 모달 등
</aside>
position: static일때는 해당되지 않는다.| 속성 | 뜻 |
|---|---|
| top | 요소의 position 기준에 따라서 위쪽에서 어느정도 떨어질 것인지 지정 |
| left | 요소의 position 기준에 따라서 왼쪽에서 어느정도 떨어질 것인지 지정 |
| right | 요소의 position 기준에 따라서 오른쪽에서 어느정도 떨어질 것인지 지정 |
| bottom | 요소의 position 기준에 따라서 아래쪽에서 어느정도 떨어질 것인지 지정 |