HMTL 텍스트 왼쪽 가운데 오른쪽 위 중앙 아래 정렬 방법
오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다.
이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니다. body 안의 태그 요소들을 잘 봐주시길 바랍니다. 그리고 위에서 말씀드렸던 태그의 각각을 하나하나 설명드리겠습니다.
vertical-align: top; → 텍스트 혹은 이미지를 맨 위로 정렬
vertical-align: middle; → 텍스트 혹은 이미지를 가운데로 정렬
vertical-align: bottom; → 텍스트 혹은 이미지를 맨 아래로 정렬
text-align: left; → 텍스트 혹은 이미지를 왼쪽으로 정렬
text-align: center; → 텍스트 혹은 이미지를 가운데로 정렬
text-align: right; → 텍스트 혹은 이미지를 오른쪽으로 정렬
이렇습니다. 이것만 기억하시면 사용하시는데 큰 어려움이 없을 것 입니다. 내부스타일로 class 값을 만들어서 사용도 가능합니다. 이 부분은 편하신 방법대로 진행하시면 될 것 같습니다. 그러면 결과값을 확인해 보겠습니다.
이렇게 보여지게 됩니다. 텍스트도 원하는 위치에 정렬이 가능하고 이미지 또한 적용이 됩니다. 이 태그를 잘 활용하셔서 원하는 위치에 문제없이 옮기시기를 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
