CSS) inline 요소, block 요소 정렬 (text-align, margin, margin-left)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

정렬 관련

 

① inline 요소

- 부모 block 요소의 text-align 속성을 이용하여 정렬

- 정렬 대상 : a, img, span과 h1 ~ h6, p 안의 텍스트

 

② block 요소

- margin 속성 (다른 요소와의 거리)을 이용해서 정렬

---

inline 요소

 

HTML 코드

<div class="inline-wrapper">
    <!-- inline 요소 -->
    <img src="../../sample/image/flower1.PNG" style="width:200px" alt="">
    <br>
    <span>안녕</span>
    <br>
    <a href="#">링크링크</a>

    <!-- block 요소 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus labore magni ipsam sed perferendis molestiae ipsa iusto minus reiciendis dignissimos non, iste neque adipisci rerum quidem. Maxime, et facilis!</p>
    <h2>제목</h2>
</div>

 

CSS 코드

text-align

<style>
    .inline-wrapper {
        border: 1px solid black;
        text-align: center;
    }
</style>

inline 요소는 부모 block 요소의 text-align을 이용하여 정렬해야 합니다.

여기서 <p>태그와 <h2>태그는 block 요소인데, 태그 안의 내용이 정렬된 것이며 <p>태그와 <h2>태그가 정렬(이동)한 것이 아닙니다.

그대로 화면 전체 크기를 차지하되, 태그 내의 내용들이 정렬되는 것입니다.

 

 

center 이 외에 end, left, right, start, end 등이 있습니다.

※start, end는 글씨를 왼쪽부터 쓰는 나라, 오른쪽부터 쓰는 나라들이 있는데 해당 나라들의 방법을 따라간다는 의미입니다.

왼쪽부터 쓰는 나라라면 왼쪽정렬 / 오른쪽부터 쓰는 나라라면 오른쪽 정렬을 지원

 

---

block 요소

 

HTML 코드

<div class="box"></div>

 

CSS 코드

<style>
    .box {
        background-color: springgreen;
        width: 300px;
        height: 300px;
    }
</style>

 

block 요소에 대한 정리를 하기에 앞서, margin에 대한 개념을 짚고 넘어가겠습니다.

 

margin이란?

다른 속성과의 거리 (여백)

 

margin: 20px 15px 10px 5px;

순서대로 top, right, bottom, left에 margin을 주었습니다.

right의 마진은 옆에 다른 속성이 없어서 무시되었으며, 속성이 없다면 부모 요소의 경계가 다른 속성이 됩니다.

 

margin을 이용한 가운데 정렬

margin: 0 auto;

위아래 margin을 0으로 주고, 좌우의 margin을 auto로 주었습니다. (위아래, 좌우의 margin이 같다면 하나로 생략 가능)

auto는 좌우의 margin을 똑같이 계산하여 지정해주므로, 화면 너비를 바꿔도 똑같이 계산해주므로 가운데 정렬됩니다.

 

margin을 이용한 우측 정렬

margin-left

margin-left: auto;

margin-left를 이용하여 좌측의 margin을 계산하여 지정해주어 우측 정렬이 되었습니다.

 

 

@실습

HTML 코드

<div class="test">
    <span>안녕</span>
</div>

 

CSS 코드

<style>
    .test {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        text-align: center;
        line-height: 100px;
        margin: 0px auto;
    }
</style>

한 줄 일 때는 line-height으로 세로 가운데 정렬이 가능하지만, 여러 줄 일 때는 line-height을 이용하면 꼬일 수 있습니다.

 

display

justify-content

align-items

<style>
    .test {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        margin: 0px auto;
        /* text-align: center; */
        /* line-height: 100px; */
        display: flex;
        justify-content: center;    /* 메인축정렬 */
        align-items: center;        /* 크로스축정렬 */
    }
</style>

자식 요소의 배치를 자유롭게 해주는 display: flex 속성과 메인축 정렬 justify-content, 크로스축 정렬 align-items를 이용하여 가운데 정렬을 해줄 수 있습니다.