안녕하세요. 혀코입니다.
이번 시간에는 CSS의 inset 속성을 사용해서 부모노드로부터 일정 간격을 띄어서 자식노드를 표시하는 방법에 대해서 알아보겠습니다.
inset 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>Document</title>
<style>
html {
height: 100%;
}
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.parent {
position: relative;
width: 500px;
height: 300px;
background-color: blueviolet;
}
.child {
position: absolute;
inset: 2em;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
우선 parent 노드를 웹사이트 가운데 위치하게 하기 위해서 html과 body에 height을 100% 주고, body의 display 속성을 flex로 지정하고 flex-direction과 align-items를 center로 지정했습니다. 이렇게 하면 parent 노드가 웹사이트 중앙에 위치하게 됩니다.
parent 노드에 가로값과 세로값을 주고 확인하기 쉽게 배경색도 세팅했습니다. child 노드에 inset 값을 2em 줘서 parent 노드로부터 안쪽으로 2em 정도 띄어져 위치하도록 했습니다. 이 경우 웹사이트에 child 노드가 표시가 안되며, parent 노드에 position 값을 relative로 지정하고 child 노드의 position 값을 absolute 값을 지정해야만 inset 속성값이 적용되어 child 노드가 parent 노드 안쪽에 위치하는 것을 확인할 수 있습니다.
inset 속성(property)도 margin과 padding 처럼 top, right, bottom, left의 값을 한꺼번에 지정할 수 있으며, % 및 em, px 값을 자유롭게 사용할 수 있습니다.
위 예제처럼 값을 하나만 지정할 경우, top, right, bottom, left에 동일한 값이 적용되어 child 노드가 중앙에 위치하게 할 수 있으며, 각기 다른 값을 지정할 경우 각 값에 따라 parent 노드로 부터 떨어진 위치에 child 노드가 표시되는 것을 확인할 수 있습니다.
이렇게 CSS의 inset 속성을 사용해서 부모노드로부터 일정 간격을 띄어서 자식노드를 표시하는 방법에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글