🔵CSS - margin

jea_i·2022년 2월 7일

목록 보기

7/19

<body>
    <h2>블럭레벨요소에 대해 알아보기</h2>
    <p>
        box는 크기를 가지고 있는 영역을 가리킵니다.
        <br>블럭요소는 한줄을 자신의 영역으로 경계를 지키는 경계박스, 블럭경계
        <br>너비와 높이 혹은 박스모델을 지정했을 때 적용되는 영역을 컨텐츠박스라고 합니다.
    </p>
    <div class="box red">
        TEXT
    </div>
    <div class="box blue">
        TEXT
    </div>
    <hr>
    <h3>margin속성 알아보기</h3>
    <p>
        경계박스와 컨텐츠박스에서 컨텐츠박스 밖으로 생기는 여백을 가리킵니다.
        컨텐츠박스에 너비를 적용하면 정렬상태에 따라 자동으로 여백이 발생합니다.
        이때 자동으로 발생된 여백을 "Auto Margin"이라 부르겠습니다.
    </p>
    <div class="box1">BOX</div>
    <span>
        인라인요소나 경계박스가 제거된 요소에는 
        <br>margin의 값에 auto라는 값이 적용되지 않습니다.
    </span>
    <div class="box2">
        <!-- 한줄에 놓이지만 크기를 지정할 수 없는 요소를 inline-block요소라 하지만 lnline level이라 분류합니다-->
        <img src="img/pic02.jpg" alt="">
    </div>
    <hr>
    <div class="box4">TEXT</div>
    h3>Margin의 중첩과 상쇄</h3>
    <div class="parent">
        <div class="child red"></div>
        <div class="child orange"></div>
    </div>
    <h3>margin의 중첩</h3>
    <p>
        형제로 이웃해있는 요소에게 margin-top, margin-bottom을 각각 지정하면 margin은 중첩되는 현상이 발생합니다.
        <br>따라서 둘 중 한 요소에세 margin을 지정하도록 합시다.
        <br>동생요소에게 margin-top을 적용하도록 하겠습니다.
        <!-- 마진바텀 쓰지마세영 -->
        <br>따라서 우리는 margin-bottom을 지정하는 경우가 없을것입니다.
    </p>
    <h3>margin의 상쇄</h3>
    <p>
        특정요소에세 margin을 지정했는데 지정된 요소가 아닌 다른 요소에 margin이 적용되는 경우
    </p>
    <ul>
        <li>
            <h4>margin-top의 상쇄</h4>
            <p>
                첫번째 자식요소에게 margin-top을 적용하면 부모요소에게 margin-top이 적용되는 현상입니다.
            </p>
            <p>
                해결방법 : 부모요소에게 padding-top을 적용합니다.
            </p>
        </li>
        <li>
            <h4>margin-bottom의 상쇄</h4>
            <p>
                마지막 자식요소에게 margin-bottom을 적용하면 부모요소에게 margin-bottom이 적용되는 현상입니다.
            </p>
            <p>
                해결방법 : 부모요소에게 padding-bottom을 적용합니다.
            </p>
        </li>
    </ul>
</body>

<style>
.box{
    width: 200px;
    height: 100px;
}
.red{
    background-color: #fcc;
}
.blue{
    background-color: #ccf;
}
.box1{
    background-color: #f99;
    /* 경계박스 안의 컨텐츠박스에 너비가 300px 적용됩니다. */
    width: 300px;
    /* margin-right: auto; */
    /* Auto Margin을 왼쪽으로 이동합니다. */
    margin-left: auto;
    /* Auto Margin을 오른쪽으로도 지정한다면? */
    margin-right: auto;
}
span{
    background-color: #99f;
    margin-left: auto;
}
.box2{
    /* 인라인요소나 경계박스가 제거된 요소에 적용할 때 */
    text-align: right;
}
.box2>img{
    width: 200px;
    margin-left: auto;
}
.box4{
    background-color: #f90;
    width: 200px;
    height: 200px;
    margin-left: 50px;
    /* auto margin영역에서는 값이 추가되지 않습니다. */
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: auto;
    margin-left: auto;
    /* 상하 | 좌우 */
    margin: 0 auto;
}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵CSS - boxmodel

다음 포스트

🔵CSS - margin

CSS

🔵CSS - boxmodel

🔵 CSS - float

0개의 댓글

관련 채용 정보