2023/12/07🦄 정렬 그것은 내 정신도 정렬

 

---

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

---

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

 

이만

개발공부 중인 개린이의 포스팅입니다📝