웹페이지

CSS STEP 15 - Align

IT의 큰손 2023. 4. 17. 14:52
728x90

★ 태그의 수평 정렬

  • 인라인 태그와 블럭 태그의 수평 정렬
  • 수평 정렬(내용물의 정렬)
  • text-align
    • 1. 인라인 태그
    • 불가능 > 여백(공간)이 없어서 불가능..
    • 2. 블럭 태그 
    • 가능 > 여백(공간)이 있어서.. > text-align 속성은 블럭 태그에서만 적용이 가능하다.
  • 수평 정렬(태그 스스로 정렬) > 불가능(지원하는 속성 없음)
    • 1. 인라인 태그
    • 가능 > 부모(블럭) 태그의 text-align을 사용해서 정렬
    • 2. 블럭 태그
    • 불가능 > 부모영역과 자식 영역이 일치하기 때문에 > 좌우에 공간이 없음.
    • 가능 > margin을 이용 > 좌우 margin을 동일하게 지정(auto)
<div style="background-color: aquamarine; padding : 10px; text-align: center;">
    <span id="span1">인라인 태그</span>
</div>

#div1 {
    width:200px;
    margin-left : auto;
    margin-right : auto;
}

 

■ 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        
            태그의 수평 정렬
            - 인라인 태그와 블럭 태그의 수평 정렬

            수평 정렬
            - text-align
            1. 인라인 태그
                - 불가능 > 여백(공간)이 없어서 불가능..
            2. 블럭 태그 
            가능 > 여백(공간)이 있어서.. > text-align 속성은    
                - 블럭 태그에서만 적용이 가능하다.

            수평 정렬(태그 스스로 정렬) > 불가능(지원하는 속성 없음)
                1. 인라인 태그
                    - 가능 > 부모(블럭) 태그의 text-align을 사용해서 정렬
                2. 블럭 태그
                    - 불가능 > 부모영역과 자식 영역이 일치하기 때문에 > 좌우에 공간이 없음.
                    - 가능 > 좌우 margin을 동일하게 지정(auto)


            
        
        */

        #span1, #div1 {
            background-color: yellow;
        }

        #span1 {
            text-align : right;
        }

        #div1 {
            /* text-align: right; */
            width:200px;
            margin-left : auto;
            margin-right : auto;
        }
    </style>
</head>
<body>
    <h1>인라인 태그</h1>

    <div style="background-color: aquamarine; padding : 10px; text-align: center;">
        <span id="span1">인라인 태그</span>
    </div>
    

    <h1>블럭 태그</h1>

    <div style="background-color: aquamarine; padding : 10px;">
        <div id="div1">블럭 태그</div>
    </div>
    

    
</body>
</html>

 

■ 실행결과

728x90