옵션으로 더 볼 것들

2021.11.07_align

avocadooooo 2021. 11. 7. 16:56

flext 박스

 

중심축에서 정렬하는 것 : justify-content

반대축에서 정렬하는 것 : align-items

 

flex box가 아닌 상황에서 정렬을 하고자 할 때 margin auto를 쓰면 정렬이 가능하다.

div는 블럭요소 이므로 브라우저 상에서 자동으로 한줄을 자동으로 채워주는 margin을 넣어준다.

=> 한줄을 채워주는 역할을 하므로 수평 상으로만 정렬이 가능하다.

 

text-align은 블록요소에 먹히지 않는다.

=> margin: auto 속성을 줘서 센터로 만들어야 함 (수평에서만 정렬 가능)

-> 인라인 요소에는 바로 먹힌다.

 

아무튼 text-align으로는 수직 정렬이 되지 않으니까 다른 방법이 필요하다.

-> transform 사용

    화면 끝에서 자기자신의 사이즈 비율 만큼 이동을 한다.

   

만약 화면 자체로 부터 중간으로 정렬하고자 한다면,

박스의 position을 absolute나 relative로 설정하고 top, left를 각각 50%씩 주면 된다.

** absolue / relative 비교 링크

2021.10.12 - [먹고살기 힘들다] - 2021.10.12

 

그런데 위의 방식으로 하면 박스의 왼쪽 상단 꼭지점이 화면의 정중앙으로 온다. (의도했던건 상자 자체가 정중앙으로 오는 것인데!!!!)

이럴때 위치를 조정할 수 있도록 하는 것이 바로 transform의 translate임!!

 

자식박스를 부모박스안에서 정중앙으로 옮기려고 할 땐

그냥 translate(%,%) 써도 가능하다.

 

텍스트를 중간 정렬하고자 할 때

-> text-align: 수평

-> line-height : 자신이 속한 박스의 높이만큼 부여한다.

    - 그런데 이 경우에는  두 문장을 한박스안에서 수직으로 정렬하고자 할 때, 두번째 문장이 박스에서 벗어난다.

      (자신이 속한 박스의 높이만큼의 길이 내에서 정렬을 하는 것이기 때문)

 

link) font matrix 관련 참고자료 (솔직히 지금으로서는 이해가 잘 안간다.)

https://wit.nts-corp.com/2017/09/25/4903