본문 바로가기
html

CSS의 absolute position 및 애니메이션 작동 메커니즘 이해

by Antonio Bae 2023. 6. 9.

 

특정 HTML 요소를 상위 요소를 기준으로 배치시키기 위해서 사용하는 absolute position에 대해서 알아보겠습니다.

HTML 요소 배치 관련 CSS 속성

CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 기본값은 static이며 relative나 absolute, fixed 등으로 변경이 가능합니다. 이번 포스팅에서 중점적으로 다룰 position 속성값은 absolute 입니다.

position 속성을 static이 아닌 다른 값으로 설정했을 때, 함께 사용하는 포지셔닝 관련 CSS 속성 있습니다. 대표적으로 top, left, bottom, right 등을 들 수 있는데, 웹페이지 상에서 엘리멘트의 오프셋(offset)을 지정하기 위해 사용됩니다. 예를 들어, top은 위에서 얼마나, left는 좌측에서 얼마나, bottom은 아래에서 얼마나, right는 우측에서 얼마나 떨어져야 하는지를 결정합니다.

absolute position의 특징

position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.

  • 부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
  • 따라서, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
  • 단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

많은 분들이 마지막 특징을 햇갈려하는데 아래 예제를 통해 구체적인 작동 매커니즘을 살펴보겠습니다.

absolute position의 적용

어떤 엘리먼트의 position 속성을 absolute로 적용하였 때, 위에서 언급한 특징이 어떻게 발현되는지 이해하는 것이 매우 중요합니다.

예를 들어, 다음과 같이 두 개의 자식을 갖는 부모 엘리먼트가 있다고 가정을 해보겠습니다.

<div class="parent">
  Parent
  <div class="child">Child #1</div>
  <div class="child">Child #2</div>
</div>

그리고 각 엘리먼트를 보기 편하도록 parent와 child 클래스에 간단한 스타일을 적용하였습니다.

.parent {
  border: 2px solid blue;
  color: blue;
  background: lightskyblue;
  padding: 1rem;
}

.child {
  border: 2px dotted red;
  color: red;
  background: lightpink;
  padding: 1rem;
}

아직까지는 position 속성을 건들지 않았기 때문에, 부모와 자식 엘리먼트 간의 일반적인 배치 흐름을 가지게 됩니다.

그 다음, position 속성을 absolute로 변경하기 위해서 abs라는 클래스에 대한 스타일을 추가로 정의합니다.

.abs {
  position: absolute;
}

그리고 두 번째 자식 엘리먼트에 이 abs 클래스를 적용하는 순간,

<div class="child abs">Child #2</div>

부모 엘리먼트는 이 자식 엘리먼트를 테두리 밖으로 밀어내며 마치 없는 자식(?) 취급을 하게 됩니다.

그런데 여기서 밀려난 자식 엘리먼트는 왜 원래 자리에 멀뚱히 남아 있을까요? 그 이유는 offset 속성을 명시하지 않으면, 기본값인 auto가 적용되는데, 그러면 원래 position 속성이 static이었을 때의 위치와 일치하도록 offset 속성값이 자동 지정되기 때문입니다.

.abs {
  position: absolute;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

top과 left 속성값을 각각 0과 10px로 수동 지정해주면,

.abs {
  position: absolute;
  top: 0;
  left: 10px;
}

두 번째 자식 엘리먼트는 브라우저 상단에 딱 붙고, 좌측으로 부터는 10px 떨어진 지점에 배치됩니다.

자, 이 상태에서 인라인 스타일을 통해 부모 엘리먼트의 position 속성을 relative로 변경해보겠습니다.

<div class="parent" style="position: relative">
  <!-- 생략 -->
</div>

그러면, positioning context가 전체 화면(viewport)에서 부모 엘리먼트로 변경되어, top과 left 속성이 적용 됨을 알 수 있습니다.

 

css 그림자 넣기

https://cssgradient.io/

 

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

사이트로 들어가서 원하는 색상을 선택하고 코드 복사를 해서 붙혀줍니다.

 

 

동작예제

 

<!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>
        .outBox {
            width: 300px;
            height: 300px;
            border: 3px solid blue;
            position: absolute;

        }
        .cirBox{
            width: 50px;
            height: 50px;
            background-color: skyblue;
            border-radius: 50%;
            position: absolute;
            /* 부모에도 position이 있어야 같이 작동을 하는 매커니즘 */
            left: 40%;
            top:  30%;
            animation: ball 5s linear infinite;
            /* linear는 균일하게 움직임을 만들어줌 */
        }
        .shadowBox{
            width: 50px;
            height: 30px;
            background-color: goldenrod;
            border-radius: 50%;
            margin-top: 70px;
            background: rgb(32,5,11);
            background: radial-gradient(circle, rgba(32,5,11,1) 0%, rgba(243,251,63,0) 100%);
            animation: shadowBox 5s linear infinite;
        }

        @keyframes ball {
            0% { top: 0%;}
            50% { top: 80%}
            100% {top: 0%}
        }

        @keyframes shadowBox {
            0% { width: 45px; height: 30px;}
            50% { width: 55px; height: 10px;}
            100% {width: 45px; height: 30px;}
        }
        /* 애니메이션 만들거야 시작 0%, 끝 80%, 다시 0%로 돌아와 */
    </style>
</head>

<body>
    <div class="outBox">
        <div class="cirBox">
            <div class="shadowBox"></div>
        </div>
    </div>

</body>

</html>

 

 

 

 

움직이는 박스 만들기

0609test02.html - html_bae - Visual Studio Code 2023-06-09 12-10-35.mp4
2.38MB

 

 

<!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>
        .outBox {
            width: 300px;
            height: 300px;
            position: relative;
            left: 100px;
            top: 100px;
            border: 3px solid black;
            animation: scaleBox 3s linear infinite;
        }

        @keyframes scaleBox{
            0%{transform: scale(1);}
            50%{transform: scale(1.3);}
        }

        .comm{
            width: 70px;
            height: 10px;
            border-radius: 50%;
            background-color: gray;
            position: absolute;
            left: 40%;
            top: 40%;
        }
        .box1{
            transform: rotate(0deg);

        }
        .box2{
            transform: rotate(45deg);
        }
        .box3{
            transform: rotate(90deg);
        }
        .box4{
            transform: rotate(135deg);
        }
    </style>
</head>

<body>
    <div class="outBox">
        <div class="comm box1"></div>
        <div class="comm box2"></div>
        <div class="comm box3"></div>
        <div class="comm box4"></div>
    </div>
    
</body>

</html>

마치면서

지금까지 absolute position의 중요한 특징과 간단한 예제를 통해 absolute position이 웹페이지에서 어떻게 작동하는지 살펴보았습니다. 이러한 absolute position의 재미있는 작동 방식은 실제 UI 디자인에 다양하게 활용됩니다. 실전에서 absolute position을 응용하는 방법에 대해서는 추후 포스팅를 통해 다뤄보도록 하겠습니다.

 

 

 

 

 

 

저작자표시 (새창열림)

'html' 카테고리의 다른 글

html 레이아웃 만드는 방법  (0) 2023.06.11
다운로드 바 만드는 방법  (0) 2023.06.08
html 하단바 만드는 방법  (0) 2023.06.07
vscode 단추 만드는 방법 및 CSS 이모티콘 활용하는 방법  (0) 2023.06.02

관련글

티스토리툴바