ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 스타일 요소 - 글자 가운데 정렬하기
    HTML 2024. 12. 6. 00:27
    <html>
        <head>
            <title>2024-12-03-火</title>
        </head>
        <body>
            <h1>Language-weaver</h1>
            <p>Language-weaver</p>
        </body>
    </html>

     
    아무 스타일 적용도 하지 않았을 때, 기본적으로 글자는 왼쪽 정렬 됩니다.
    오른쪽 정렬이나 가운데 정렬을 하고 싶을 때는 정렬 속성을 사용해야 합니다.
     
     

    <html>
        <head>
            <title>2024-12-03-火</title>
        </head>
        <body>
            <h1>Language-weaver</h1>
            <p>Language-weaver</p>
            <p style="text-align: left">Language-weaver2</p> 
            <p style="text-align: center">Language-weaver3</p> 
            <p style="text-align: right">Language-weaver4</p> 
        </body>
    </html>

     
    이렇게 정렬 속성을 지정하면, 글자의 가운데 정렬과 왼쪽 정렬도 가능합니다.
     

    글자의 가운데 정렬 속성속성 설명
    style="text-align: left"왼쪽 정렬 (기본값)
    style="text-align: center"가운데 정렬
    style="text-align: right"오른쪽 정렬

     
     
    주의할 점으로,
    text-align 속성은 <span> 태그와 같은 인라인 속성을 가진 태그에서는 동작이 안 된다고 하니
    인라인 태그를 사용하게 될 경우에는 부모 태그에 부여하면 되겠습니다.
     
     

    'HTML' 카테고리의 다른 글

    img 태그 - src, width, height, title, alt 속성  (0) 2024.12.03
    "button" 태그 - type 속성, onclick 속성  (0) 2024.12.02
    "a" 태그 - href 속성, target 속성, title 속성  (0) 2024.12.01
    html 기본 구조  (0) 2024.11.29
    태그  (0) 2024.11.27
Designed by Tistory.