margin

치로·2024년 8월 13일
CSS

1. margin 겹친 현상

  • margin 겹친 현상은 상하 margin값이 어떤 상황에서 사리지는 상황을 의미
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            border: 1px solid tomato;
            margin: 100px;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <h1>Hello World</h1>
</body>
</html>

2. margin의 적용 원리

  • 움직일 수 없는 요소를 밀어내어 스스로의 위치를 변경시키거나 다른 요소를 밀어내는 특성을 갖기 때문에 위치와 관련된 속성
  • 바꾸어 말하면 margin 속성은 요소의 위치를 변경시키면서 주변 요소에게 영향을 주게 됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#box1 {
            background-color: tomato;
            width: 200px;
            height: 100px;
            /* 음수 값을 지정할 경우 주변 요소를 끌어당김 벼과 인접한 경우 자신이 화면을 벗어남*/
            margin: -30px;
        }
        div#box2 {
            background-color: powderblue;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="box1">박스1</div>
    <div id="box2">박스2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #menu {
            width: 100%;
            height: 200px;
            background: tomato;
            /* 부여된 값만큼 밖으로 벗어남 */
            margin-top: -180px;
        }
        /* 마우스가 올라간 경우, margin 값 복구 */
        #menu:hover {
            margin-top: 0px;
            background-color: orange;
            /* 애니메이션 css 코드 */
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div id="menu">메뉴 영역</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#parent {
            background-color: tomato;
            width: 800px;
            height: 500px;
            border: 5px solid red;
            /* 중앙 정렬 */ 
            margin: 0 auto;
        }
        div#child {
            background-color: powderblue;
            padding: 10px;
            border: 5px solid blue;
            width: 500px;
            /* 중앙정렬 : 자식을 부모의 중앙에 위치 시키기 */
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">박스2</div>
    </div>
</body>
</html>
profile
치로
이전 포스트

중첩된 <div> 간의 크기 관계

다음 포스트

display 속성

0개의 댓글