[13강] 문자와 요소 정렬
- text-align
⭐ text-align 속성
: 정렬할 때 사용.
👏 자기 자신이 여유가 있을 때, 즉 자기 자식들이 이동할만큼 크기가 넓을 때와 자기 자식이 inline 일 때만 적용된다.
🌕 text-aligh: center;
➰ 가운데 정렬!
➰ inline 요소인 span에는 써도 의미가 없다.
➰ 자신의 가로 크기가 'span'이라는 텍스트에 맞게 감싸지고 있기 때문에 중심으로 옮길 공간이 없어 의미가 없다!
➰ 바꾸고 싶으면 display 속성을 inline-block으로 바꾸고 width를 설정해주어 가로 크기를 지정해주면 된다.
🌕 text-align: right;
➰ inline 속성인 span의 가로가 부모인 body의 50%이고, 그 50% 중 text-aligh: right으로 가장 오른쪽에 정렬되었다.
⭐ block, inline 요소의 text-align 속성
➰ 텍스트뿐만 아니라 태그들도 text-align으로 정렬이 된다.
➰ 부모는 center지만, a class를 가진 div는 left가 된다.
➡ text-align가 left라 왼쪽 정렬이 된 것이 아니다!
➰ width를 50% 주었어도 변화가 없다!
➡ block 요소는 text-aligh의 영향을 받지 않기 때문이다!
➰ display 속성을 inline-block으로 바꿔주면 div 안에 있는 a class의 네모는 가운데로 오면서, a class의 width는 50%가 되고, 그 50% 안에서 text도 왼쪽 정렬되었다.
➡ inline이므로 부모의 text-aligh 속성에 영향을 받는다!
if) inline-block이 아니라 inline 이면 width 50%가 의미가 없다.
👏 중요
- text-align은 자기 자식들이 inline일 때만 이 자식들을 중심, 왼쪽, 오른쪽으로 배치할지 정할 수 있다.
- block일 때는 width, height이 부모보다 작더라도 text-align의 영향을 받지 않는다.
- 이럴 때는 display를 inline이나 inline-block으로 바꿔야만 한다.
🍒 정리
오늘 드디어 text-align에 대해 배웠다. 이게 진짜 너무 어려웠다. 난 가운데 정렬을 하고 싶은데 계속 옮겨지지도 않고, 정렬이 되어도 가운데가 아니고. 왜 그런가 했더니
<문제점>
- 일단 정렬할 부모?가 inline 요소였다. 그래서 옮길 공간이 없어서 정렬이 되지 않았던 것이다.
- 자기 자식들의 요소가 block요소였다. 그러니 정렬이 되지 않았다.
- block 요소였어도 display를 inline이나 inline-block으로 설정하지 않았었다.
- 설정이 되어있었어도 폭이나 길이 등이 맞지 않아서 정렬이 되었지만 맘에 들게 정렬되지 않았다.
결론은 text-align 특징에 대해 몰라서 생긴 문제들이었다. 그때 문제점을, 이 특징들을 알았더라면 좀 더 손쉽게 해결하지 않았을까하는 생각이 든다. 일단 대충 %와 px 숫자를 가운데에 맞게 고쳐놓긴 했지만, 되게 찜찜하게 완성되어 마음에 들지 않았었다. 이렇게 다 배우고 나서 다시 제대로 정렬을 하면서, 특징, 성질에 맞게 코드를 적으면서 만들어봐야겠다!
