2023/12/07🦄 정렬 그것은 내 정신도 정렬
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤
CSS 정렬
1. flex 2. position 3. grid flex
블록 요소는 위에서 아래로. 수직으로 쌓임
인라인 요소 자기가 필요한 사이즈만큼만 배치되고 자동으로 붙기 때문에 배치하기가 어렵다
배치를 좀 더 쉽게 하기 위해 flex를 사용한다
핵심 : 여러 태그를 하나로 묶어서 정렬한다
CSS에 기본값이 있다.
아무것도 입력하지 않을 경우 좌측 상단에 먼저 위치하게 된다
만약 가운데로 옮기고 싶다면?
정렬을 할 땐 방향과 기준이 필요하다.
기준을 보통 부모박스로 하게 되고 flex속성도 부모박스에 적어둔다.
display : flex ; // 옵션 지정되어 활성화된다,
사이즈는 절대적으로 부모박스 사이즈를 기존으로 한다.
flex-direction : column;
박스가 세로로 나열된다
flex-direction : row ;
박스가 수평으로 나열된다
justify-content : center;
부모박스의 가로 기준으로 가운데 정렬
align-items : Center;
부모 박스의 세로 기준으로 가운데 정렬
flex-direction : column을 하게 되면 방향이 조금 달라짐
수직으로 나열된 박스를 가운데로 옮길 시
flex-direction : column; 을 사용하면 안 된다
align-items : center;로 해야 된다
부모박스의 가로를 기준으로 가운데 정렬하기 때문이다
Position
박스를 개별적으로 어디에 위치할 건지 직접 지정해 주는 것이다
static : 기본값, 위치 속성이 비활성화되어 아무런 영향받지 않는다
absolute
박스의 절대적인 위치를 지정하는 방식
위치 속성으로 좌표를 찍어주면 해당 위치에 박스가 생성됨
relative
상위 박스를 기준으로 한 상대적 위치를 지정하는 방식
페이지의 절대적인 위치가 아닌 상위 박스 안에서 위치로 작동
fixed
화면을 기준으로한 절대적 위치를 지정하는 것
absolute는 페이지를 기준으로 함
화면을 기준으로 하는 건 fixed
이만
개발공부 중인 개린이의 포스팅입니다📝