오늘은 저번 시간에 잠깐 나왔던 가운데 정렬에 대해서 제가 주로 쓰는 방법을 소개합니다!!
순서는 1) 글씨 가운데 정렬, 2) flex 가운데 정렬, 3) tranform 가운데 정렬
이렇게 보도록 할게요~!
각각 써야할 순간이 정해져있는? 느낌이라 유용하게 사용할 수 있을거에요!
1. 글씨 가운데 정렬
<h1 className={s.header}>제목!!!</h1>
기본적으로 위와 같이 쓴다면 좌측부터 글이 작성될텐데 글씨를 가운데 정렬하기 위해선 css를 아래처럼 해주면 돼요!
.header {
text-align: center
}
이렇게 정렬되는 모습을 볼 수 있어요!!
하지만, 글씨가 아닌 영역이라면 위와 같은 방법으로는 가운데 정렬이 안돼요
<div className={s.header}>
<div className={s.box}>영억1</div>
<div className={s.box}>영역2</div>
</div>
// module.css
.header {
text-align: center;
}
.box {
width: 4rem;
height: 4rem;
background-color: green
}위와 같이 박스 영역 자체가 가운데 정렬이 되도록 하고 싶을 땐, 저는 주로 flex를 활용하여 주로 사용해요!
제가 생각하는 flex는 그냥 자유자재라고 생각이 들어요
원하는 방향, 크기, 순서, 위치로 움직일 수 있거든요!
flex-direction, flex, align-items, justify-content 등을 이용해서 움직일 수 있어요!
가운데 정렬을 주로 justify-content와 align-items 두가지로 구현이 가능한데요!
먼저는 좌우 가운데 정렬을 보겠습니다.
아래처럼 justify-content : center;를 이용하면 좌우기준 가운데 정렬을 구현할 수 있어요
header {
display: flex;
justify-content: center;
}
.box {
width: 4rem;
height: 4rem;
background-color: green
}이렇게 좌우 기준 가운데 정렬이 가능해요!
근데 한가지 문제점이 있죠? 위에 이미지에선 div태그가 아래로 쌓이지만 flex를 default가 가로 방향으로 쌓여져요! 그래서 가로기준으로 flex박스가 쌓이면서 가운데 정렬됨을 확인할 수 있어요!
그러면 여기서 세로로 쌓고 싶다면 flex-direction 을 활용하여 세로로 flex-box를 정렬할 수 있게 돼요!
header {
display: flex;
flex-direction: column;
justify-content: center;
}만약 이렇게 flex-direction을 column 으로 쌓게하면 가운데 정렬이 된다고 생각하는데 여기서도 또 문제가 생겨요..
justify-content와 align-items는 flex-direction방향을 기준으로 정렬을 시켜주는데요
위에서 말했던 justify-content : center;는 좌우가 쌓는 방향의 기준으로 좌우방향으로 정렬을 시켜주고,
align-items는 상하로 정렬을 시켜주는데
위의 경우는 column 방향으로 쌓고 컬럼기준 상하 방향이 화면에서는 좌우이기 때문에
header {
display: flex;
flex-direction: column;
align-items: center;
}이렇게 구현을 해줘야지 원하는 방향인 좌우 기준 가운데 정렬이 완성될 수 있어요
즉, flex-direction의 방향에 따라 justify-content와 align-items의 방향이 결정된다고 생각하셔야 해요!!
이렇게 flex박스의 가운데 정렬을 마쳐보도록 하겠습니다!
생각보다 내용이 길어서 다음에 이어서 transform : translate()를 활용한 가운데 정렬 구현으로 찾아보겠습니다!!
다음 포스팅은 FE Developer - CSS, 퍼블리싱 적당히는 알자(8) : 가운데 정렬(2) text-align / flex / transform:translate()