본문 바로가기
web publishing/CSS

코딩가나다 | CSS - 나

by 윤원용 2022. 10. 3.

두 번째 나의  주제는 네거티브 마진이다.

강의의 시작은 코딩가나다 | CSS - 가에서 사용한 예제 코드를 기반으로 마진(margin)의 값을 조절하며 네거티브 마진을 사용하여 어떤 레이아웃을 구성할 수 있는지 보여주는 걸로 시작한다.

 

body {
    background-color: #ddd;
}

.box {
    background-color: white;
    margin: 600px auto 0;  
    width: 960px;
    text-align: center;
    /* 이 밑으론 디자인 적인 내용 (설명 없음) */
    border-radius: 20px;
    border-right: 5px solid #ccc;
    border-bottom: 5px solid #999;
}

.box h1 {
    color: orangered;
    border-bottom: 10px solid orangered;
    width: 250px;
    margin: 40px auto;
    font-size: 4rem;
}

.box p {
    padding: 3rem;
}

.box-cover {
    margin-top: -500px;
}

negative margin을 이용해 이미지의 시작 위치를 변경한 이미지


먼저 강의를 보면서 본인이 이해한 것부터 이야기하면 네거티브 마진(negative margin)은 마진 값을 음수로 설정하여 브라우저가 HTML을 파싱한 후 Rander Tree를 만들고 layout 작업을 위해 각각의 요소(태그)들에 대한 위치를 계산하는데 네거티브 마진을 사용하여 시작 또는 끝나는 위치를 조정할 수 있다.라고 이해했다. 강의의 내용을 먼저 서술하지 않은 이유는 기본 지식 없이 이해하기엔 의문이 너무 많아서다. 브라우저가 HTML을 해석하는 방식과 원리를 모른다면 negative margin을 완벽히 이해하기엔 부족할 것 같다,

 

다시 강의 내용으로 돌아와 이야기하기 전에 새로운 예제가 필요하다.

<!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>
        negative margin
    </title>
    <link href="./style.css" rel="stylesheet" />
</head>
<body>
    <header class="header">
        <div class="box-wrapper">
            <div class="box">
                A
            </div>
            <div class="box">
                B
            </div>
            <div class="box">
                C
            </div>
        </div>
    </header>
    <section class="contents">
        <h1>
            NewYork City
        </h1>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
    </section>
</body>
</html>
body {
    margin: 0;
    background-color: #ddd;
}

.header {
    height: 300px;
    background-image: url(./banner.jpg);
    background-position: center;
    overflow: hidden;
}

.contents {
    background-color: white;
    width: 860px;
    margin: 0 auto 100px;
    padding: 50px;
}

.box-wrapper {
    overflow: hidden;
    width: 960px;
    margin: 50px auto;
}

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 5px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-family: "arial";
    font-size: 50px;
}

새로운 예제의 기본 화면이다.

A B C가 적혀있는 노란색 박스들 중 B가 적혀있는 박스를 이용하여 negative margin을 설명하기 때문에 B box의 배경색을 변경한다.

<!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>
        negative margin
    </title>
    <link href="./style.css" rel="stylesheet" />
</head>
<body>
    <header class="header">
        <div class="box-wrapper">
            <div class="box">
                A
            </div>
            <div class="box select"> <!-- select class 추가 -->
                B
            </div>
            <div class="box">
                C
            </div>
        </div>
    </header>
    <section class="contents">
        <h1>
            NewYork City
        </h1>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
    </section>
</body>
</html>
body {
    margin: 0;
    background-color: #ddd;
}

.header {
    height: 300px;
    background-image: url(./banner.jpg);
    background-position: center;
    overflow: hidden;
}

.contents {
    background-color: white;
    width: 860px;
    margin: 0 auto 100px;
    padding: 50px;
}

.box-wrapper {
    overflow: hidden;
    width: 960px;
    margin: 50px auto;
}

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 5px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-family: "arial";
    font-size: 50px;
}

.box.select {
    background-color: orangered;
}

B가 적혀있는 박스의 배경색을 변경하여 눈에 띄도록 수정

여기까지 준비가 끝났으면 B box의 margin-left property의 값을 음수로 할당하여 브라우저가 B box의 위치를 계산할 때 원래 시작점보다 음수로 할당한 만큼 앞서 배치하게 된다.

.box.select {
    background-color: orangered;
    margin-left: -50px;
}

B box의 margin-left property에 -50px을 할당

위 이미지에서 새삼 다시 느끼게 된 기본 개념이 있는데 강의에서 설명하기론 B box가 A box보다 앞으로 나와있는 이유를 설명하는데 markup을 보면 A box보다 B box가 밑에 코딩돼있기 때문에 B box가 A box보다 앞으로 튀어나와 있다는 것이다. 여기서 착각할만한 내용이 있는 A box는 보이는 만큼만 그려졌는가??이다. 질문의 답은 크롬 개발자 도구를 활용해 시각적으로 본다면 

크롬 개발자 도구를 활용해 A box가 전부 그려져 있다는 것을 확인

위에 있는 이미지처럼  A box는 다 그려졌고 그 위에 B box가 그려지는 시점에 margin-left property에 음수를 할당했기 때문에 원래 B box의 위치보다 -50px만큼 빨리 그려졌다고 생각할 수 있다.

 

또한 앞에 설명한 이유와 같이 B box의 margin-right property를 -50px로 할당하게 된다면 B box 위에 C box가 위치하게 된다는 것이다.

.box.select {
    background-color: orangered;
    margin-left: -50px;
    margin-right: -50px;
}

B box의 margin-right property에 -50px 할당

이후 margin-top과 margin-bottom에 negative margin을 활용하는 예제를 한 번 더 하지만 본인은 코드와 결과 이미지로만 보여주고 설명은 생략하겠다. 

.header {
    height: 300px;
    background-image: url(./banner.jpg);
    background-position: center;
    overflow: hidden;
    margin-bottom: -100px;
}

header class의 margin-bttom property의 값을 -100px 할당

이후 negative margin을 응용하는 예제이다. 설명이 없는 이유는 앞의 negative margin을 이해했다고 해서 바로 응용할 순 없고 다른 css property를 같이 활용해야 해서다.

<!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>
        negative margin
    </title>
    <link href="./style.css" rel="stylesheet" />
</head>
<body>
    <header class="header">
        <div class="box-wrapper">
            <div class="box">
                A
            </div>
            <div class="box select">
                B
            </div>
            <div class="box">
                C
            </div>
        </div>
    </header>
    <section class="contents">
        <h1>
            NewYork City
        </h1>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p class="map"> <!-- 추가 -->
            map
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
        <p>
            moonlight cream adorable adolescence computer blossom banana twinkle milky banana purity lovable cherish you florence seraphic fascinating lovable pure stella cherish girlish hello destiny flutter pure milky you girlish blossom ideale milky computer girlish purity adolescence fascinating haze milky shine moonlight requiem flutter girlish lovable lucid eunoia purity lucid ice.
        </p>
        <p>
            blossom carnival world fabulous cresent masquerade grapes twilight requiem masquerade ice serendipity moonlight sunrise grapes adorable aurora stella world bijou shine requiem eunoia shine milky world fascinating haze stella masquerade flora laptop marshmallow honey blush apple like lucid apple masquerade iris laptop girlish twinkle girlish destiny stella apple like melody.
        </p>
        <p>
            miracle iris honey vanilla purity way pure stella cresent apple melody baby fascinating eunoia blush like marshmallow flora flora adolescence grapes carnival kitten grapes fascinating flutter ice like charming melody melody charming serendipity lucy apple ice lovable banana florence ideale laptop pure milky vanilla seraphic seraphic milky shine shine moonlight.
        </p>
        <p>
            shine fabulous laptop lucid aurora flora grapes cresent lovable charming ice milky adorable masquerade pure masquerade illusion flora moonlight lucid cherish laptop cresent lucid lovesick heimish blush aurora apple seraphic carnival melody twilight flutter flutter twinkle marshmallow droplet cherish droplet purity flora twilight carnival flora moonlight honey illusion like bijou.
        </p>
    </section>
</body>
</html>
body {
    margin: 0;
    background-color: #ddd;
}

.header {
    height: 300px;
    background-image: url(./banner.jpg);
    background-position: center;
    overflow: hidden;
    margin-bottom: -100px;
}

.contents {
    background-color: white;
    width: 860px;
    margin: 0 auto 100px;
    padding: 50px;
}

.box-wrapper {
    overflow: hidden;
    width: 960px;
    margin: 50px auto;
}

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 5px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-family: "arial";
    font-size: 50px;
}

.box.select {
    background-color: orangered;
    margin-left: -50px;
    margin-right: -50px;
}

.map {
    background-color: white;
    padding: 50px;
    text-align: center;
    margin: 40px 0;
    transition: all 1s;
}

.map:hover {
    margin: 40px -100px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

css의 맨 밑을 보면 .map:hover라는 가상 클래스를 사용하는 내용이 나오는데 hover란 마우스가 해당 요소 위로 올라왔을 때 반응하는 가상 클래스인데 쉽게 말하면 해당 요소에 마우스가 올라왔을 때 css를 변경한다.라고 생각하면 된다.

.map 요소에 마우스 올리기 전
.map 요소에 마우스 올리기 후

리뷰

오늘 강의의 리뷰는 딱히 없다. 왜냐면 설명 자체를 본인이 이해한 내용으로 설명했기 때문이다. 하지만 negative margin을 기반으로 응용할 수 있는 기법은 엄청 많을 것 같다.  이 블로그를 관심 있게 보는 사람이라면 강의에서 설명하는 내용과 본인이 이해한 내용의 차이가 있으면 댓글로 남겨주길 바란다. (의미 있는 내용이라면 커피)

 

빔캠프 화이팅!!!

'web publishing > CSS' 카테고리의 다른 글

코딩가나다 | CSS - 가  (0) 2022.10.02
css 공부를 시작하는 이유  (0) 2022.09.25

관련글

티스토리툴바