잡동사니에도 사랑을

[21.09.17] exam06(05_cssPositioning) - 상대 배치 본문

JAVA_EE/CSS

[21.09.17] exam06(05_cssPositioning) - 상대 배치

luvforjunk 2021. 9. 17. 18:51
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

div {

        display:inline-block

        width: 50px;

        height: 50px;

        border: 1px solid lightgray;

        text-align: center;

        color: white;

        background: red;

}

#down:hover {

        position: relative;

        left: 20px;

        top: 20px;

        background: green;

}

#up:hover {

        position: relative;

        right: 20px;

        bottom: 20px;

        background: green;

}

</style>

</head>

<body>

        <h3>상대 배치, relative</h3>

        <hr>

        <div>T</div> div는 블럭 단위로 움직임

        <div id="down">h</div>

        <div>a</div>

        <div>n</div>

        <div id="up">k</div>

        <div>s</div>

</body>

</html>

 

결과창1
결과창2

728x90
반응형