[CSS] Css Position, Grid, Flex (240627)

1. 회원가입에 grid, flex 적용해서 개선해보기.

좌 : 교안 / 우 : 본인

배운 내용 정리

 

Position

CSS에서 position 속성은 HTML 요소의 페이지 레이아웃 내 위치를 지정할 수 있게 해줍니다. 요소를 정밀하게 배치하는 데 강력한 도구입니다.

Position의 종류

1. Static: 기본 위치 지정입니다. 요소는 문서의 정상 흐름에 따라 배치됩니다.
2. Relative: 자신의 정상 위치를 기준으로 배치됩니다.
3. Absolute: 가장 가까운 위치 지정 조상(Static 제외)을 기준으로 배치됩니다.
4. Fixed: 브라우저 창을 기준으로 배치됩니다.
5. Sticky: 사용자의 스크롤 위치에 따라 배치됩니다.

Z-Index

z-index 속성은 요소의 쌓임 순서를 결정합니다. 더 높은 값은 해당 요소가 더 낮은 값의 요소 앞에 나타나게 합니다.

Flexbox

Flexbox는 행 또는 열에 아이템을 배치하기 위한 일차원 레이아웃 방법입니다. 인터페이스 내 공간을 배분하고 유연하게 만드는 데 탁월합니다.

주요 속성

1. Display Flex: 컨테이너에서 flexbox를 활성화합니다.
2. Flex Direction: 주 축의 방향을 정의합니다(행 또는 열).
3. Justify Content: 주 축을 따라 아이템을 정렬합니다.
4. Align Items: 교차 축을 따라 아이템을 정렬합니다.
5. Flex Wrap: 아이템을 여러 줄로 나눌지 여부를 지정합니다.

Grid

CSS Grid Layout은 웹을 위한 이차원 레이아웃 시스템입니다. 행과 열을 사용하여 웹 페이지를 설계할 수 있어 복잡한 레이아웃을 더 관리하기 쉽게 만듭니다.

주요 속성

1. Display Grid: 컨테이너에서 그리드 레이아웃을 활성화합니다.
2. Grid Template Columns and Rows: 그리드의 구조를 정의합니다.
3. Gap: 그리드 아이템 간의 간격을 지정합니다.

Grid Areas

그리드의 특정 영역을 정의할 수도 있습니다.