DATA101

[HTML] 글자/텍스트 정렬: 가운데 정렬, 왼쪽 정렬, 오른쪽 정렬 본문

SW 개발/HTML & CSS

[HTML] 글자/텍스트 정렬: 가운데 정렬, 왼쪽 정렬, 오른쪽 정렬

DATA101 2023. 4. 12. 20:39
728x90
반응형

📝 들어가며

본 포스팅에서는 HTML에서 텍스트 정렬 방법을 소개합니다.


📚 목차

0.  기본값
1.  가운데 정렬
2.  우측 정렬
3.  좌측 정렬

0.  기본값

p 태그를 통해 텍스트를 삽입하면 아래의 그림 1과 같습니다.

<p style="color: white;">Hey Tech</p>

그림 1. 기본값

1.  가운데 정렬

가운데 정렬은 아래와 같이 style > text-align에서 center로 옵션값을 주면 됩니다 (그림 2).

<p style="text-align: center; color: white;">Hey Tech</p>

그림 2. 가운데 정렬

2.  오른쪽 정렬

오른쪽 정렬은 right로 옵션값을 주면 됩니다 (그림 3).

<p style="text-align: right; color: white;">Hey Tech</p>

그림 3. 오른쪽 정렬

3.  왼쪽 정렬

오른쪽 정렬은 left로 옵션값을 주면 됩니다 (그림 3).

<p style="text-align: left; color: white;">Hey Tech</p>

그림 4. 왼쪽 정렬


포스팅 내용에 오류가 있다면 아래에 👇👇👇 댓글 남겨주시면 감사드리겠습니다.
그럼 오늘도 즐겁고 건강한 하루 보내시길 바랍니다 :)
고맙습니다.

728x90
반응형