화면 정렬
- flex
- position
- grid
그리드는 실무에서 잘 쓰지 않고 어렵기때문에 여기서는 다루지 않을 예정
flex
정렬할때 가장 많이 사용함
flex의 핵심 : 여러 태그를 하나로 묶어서 정렬
A위치의 박스를 B로 옮기고싶음
- 컴퓨터는 대각선으로 이동하지 않음
- 가로를 맞추고 세로를 맞추거나 , 세로를 맞추고 가로를 맞춰서 이동시켜야함.
A,B는 각각 하나의 태그일수도 있고, 여러개의 태그가 묶여있는것 일 수 있음
중요한점은 정렬을 할때 기준과 방향이 필요함
기준을 부모박스라고 하고 속성도 부모박스에 적어줌.
가로 세로 정렬
div로 박스를 3개 만들어주면 div는 블록 요소 이기에 세로로 나열됨
이 상태에서 부모 박스에 display:flex; 옵션을 주게 되면
가로로 정렬이됨
여기서 3개의 자식 박스를 정렬하는 방향을 정할 때에는
두가지 옵션을 사용할 수 있음
가운데 정렬 (row 상태)
- 가로기준
부모 박스 css 속성에 justify-content:center; 옵션을 넣어주면 가로기준 가운데 정렬하게 됨
- 세로 기준
부모 박스 css 속성에 align-items:center; 옵션을 넣어주면 세로기준 가운데 정렬하게 됨
가로, 세로의 가운데 정렬의 기준은 부모 박스의 크기를 기준으로 함
가운데 정렬 (column 상태)
row 상태일 때와는 반대로 가로,세로 명령어가 반대로 적용됨
- 가로 기준
부모 박스 css 속성에 align-items:center; 옵션을 넣어주면 가로기준 가운데 정렬하게 됨
- 세로 기준
부모 박스 css 속성에 justify-content:center; 옵션을 넣어주면 세로기준 가운데 정렬하게 됨
가로 세로별 정렬 명령어
정렬 속성 명령어
Position
박스를 개별적으로 어디에 위치하게 할 것인지 지정해 주는것.
옵션으로는 Absolute, Relative, Fixed가 있음
추가로 static 이 있는데
position을 별도로 선언하지 않았으면 기본값으로 static이되며
각종 위치 속성이 비활성화 되어 아무런 영향을 주지 않음.Absolute와 Fixed의 차이는
fixed를 사용하면 화면의 스크롤을 내리더라도 계속해서 해당 위치에 있게됨.
