마진겹침 현상


결과물


글사이에 20px의 margin을 둔 예제

생활코딩 1

생활코딩 2

마진겹침이 일어나는 현상

생활코딩 3


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="desc" content="생활코딩의 소개자료">
    <title>Title</title>
    <style type="text/css">
        body{border:1px solid blue;}
        p {
            margin:20px;
            border:1px solid red;
        }

    </style>
</head>
<body>
글사이에 20px의 margin을 둔 예제

<p> 생활코딩 1 </p>
<p> 생활코딩 2 </p>
마진겹침이 일어나는 현상
<p> 생활코딩 3 </p>

</body>
</html>

색깔 넣기

결과물

hex (color:#ff0000)
RGB (color:RGB(255,0,0))
Color Name (color:red)


소스코드


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hex {
            color: #FF0000;
        }
        #rgb {
            color: RGB(255,255,0);
        }
        #name {
            color: cadetblue;
        }
    </style>
</head>
<body>

    <div id="hex">
        hex (color:#ff0000)
    </div>
    <div id="rgb">
        RGB (color:RGB(255,0,0))
    </div>
    <div id="name">
        Color Name (color:red)
    </div>
</body>
</html>