WEB/웹개발 기초 강좌

[웹개발] 6. CSS 요소 배치 - position

션 쿠 2021. 9. 13. 21:32

저번 포스트에서는 CSS의 기본적인 문법과 CSS 파일을 HTML에 적용하는 방법을 배웠다.

이번 포스트에서는 CSS를 통해 HTML의 요소를 배치하고 정렬하는 방법을 배울 것이다.

 

HTML의 요소(태그)들을 배치하는 속성에는 3가지가 있으며, 보통 이들을 조합/혼합하여 사용한다.

  • position - 원하는 위치에 배치하는 방식
  • float - 특정 요소가 다른 요소의 좌/우에 배치할 수 있게 하는 방식
  • display - 요소들을 디스플레이 하는 방식

3가지 속성을 혼합하여 사용할 때, 몇몇 속성들은 서로 영향을 줄 수 있다.

이번 포스트에서는 position 속성에 대해서 배운다.

 

position

position 속성은 4가지의 값을 가질 수 있는데, 다음과 같다.

  • static (정적) - 요소를 좌->우, 상->하 순서로 배치한다.
  • relative (상대적) - 요소를 원래 배치(static)를 기준으로 배치한다.
  • absolute (절대적) - 상위 요소 중 가장 가까운 요소를 기준으로 배치한다.
  • fixed (고정된) - 웹 브라우저 화면 전체 (최상위 요소 X)를 기준으로 배치한다.

 

1. position: static;

position 속성의 기본값은 static이다.

즉, position 속성을 따로 지정하지 않으면 position: static; 을 부여한 것과 같은 효과를 가진다.

다시말해 대부분의 요소들은 기본적으로 static한 position 속성을 가지고 있다.

 

static 요소들은 여러 개가 쌓일 때 기본적으로 왼쪽에서 오른쪽으로, 한 줄이 다차면 위에서 아래로 채워진다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML과 CSS</title>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
        <span>span태그</span>
    </body>
</html>
/* index.css */

span {
    margin: 5px;
    background-color: aqua;
    font-size: 32px;
}

위의 코드는 각각 index.html과 index.css의 내용을 나타낸다.

이를 페이지로 열면 다음과 같은 결과가 나온다.

제일 일반적인 배치 방식인 static

2. position: relative;

요소에 position 속성 값을 relative로 부여하면, 그 요소가 static한 상태일 때 배치되어야 할 위치를 기준으로 배치할 수 있다.

말로만 설명하면 어려울 수 있으니 예시로 설명하겠다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML과 CSS</title>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <img src="https://ww.namu.la/s/0826fcb62ab5ffd031695083aa629d99351834b91417a1c9fee4a2a1a4b64bd8287e88163820b02176526fe7006fb51438fbb6f42cb2438497e298e722eac77cde9da7d51d8fa4d36800670013fb43b70d35328129d1f9aec0f9a5ee05ae7fe4">
        <div>고양이 귀여워</div>
    </body>
</html>
/* index.css */

img {
    width: 400px;
}

div {
    font-size: 25px;
    font-weight: bold;
    color: rgb(20, 255, 20);
}

이제 div에 대한 CSS 코드에 다음을 추가해보자.

    position: relative;
    top: -50px;
    left: 200px;

왼쪽이 추가하기 전, 오른쪽이 추가한 이후다.

top 프로퍼티에 -50px를 부여했기 때문에 원래 위치보다 반대 방향인 위로 50px 이동되었고,

left 프로퍼티에 200px를 부여했기 때문에 원래 위치보다 오른쪽으로 200px 이동되었다.

 

수학에서의 평행이동 비슷한 것이라고 생각하면 편하다.

항상 position: relative;는 원래 위치로부터 상대 좌표만큼 이동된다.

 

 

3. position: absolute;

absolute 값은 relative와 상당히 유사하다. 다만 기준으로 하는 부모 요소가 다르다는 점만 다르다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML과 CSS</title>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="A">
            클래스A
            <div class="B">클래스B</div>
            <div class="C">클래스C</div>
            <div class="D">
                클래스D
                <div class="E">클래스E</div>
            </div>
        </div>
    </body>
</html>
/* index.css */

div {
    padding: 30px;
}

.A {
    position: absolute;
    background-color: red;
}

.B {
    background-color: orange;
}

.C {
    background-color: yellow;
}

.D {
    position: relative;
    background-color: green;
}

.E {
    background-color: cyan;
}

위의 예시에서는 HTML에서 class라는 속성이 사용되었는데, CSS 코드에서 div 중에서도 해당 클래스를 가진 div에게만 속성을 따로 부여할 수 있게 해준다.

 

추후 포스트에서 자세히 설명할테니 일단은 저런게 있구나 하고 넘어가자. (색깔은 div를 구분하기 위해 넣었다.)

 

클래스 A div에 absolute 속성을 부여하였고, 클래스 D div에 relative 속성을 부여하였다.

 

클래스 E div를 기준으로 설명할텐데, 클래스 E div에 absolute 속성을 부여했을 때, relative 속성을 부여했을 때 위치 기준을 잡는 요소가 무엇일까?

 

좌측이 relative일 경우, 우측이 absolute일 경우이다.

클래스 E div가 relative일 때

자기 자신이 position: static;일 경우에 대해 자기 자신을 기준 요소로 잡는다.

 

클래스 E div가 absolute일 때

부모 요소가 static이 아니라면 그 부모 요소를 기준 요소로 잡는다.

부모 요소가 static이라면 그 부모 요소의 부모 요소가 static이 아닌지 보고 아니라면 계속 타고 올라가며 static이 아닌 요소를 찾는다.

그래도 없다면, 최상위 요소인 <html>요소(태그)가 기준 요소가 된다.

*여기서 부모 요소란, 해당 요소를 포함하고 있는 요소(감싸고 있는 태그)를 나타낸다.

조상은 부모 요소부터 부모의 부모 요소 ... 최상단 요소까지의 요소를 나타낸다.

 

위의 예시에서는 바로 위의 부모 요소인 클래스 D div가 static이 아닌 position이므로 기준 요소가 된다.

클래스 E div의 css에 다음을 추가해보자.

    position: absolute;
    top: 120px;
    left: 50px;

기준 요소인 클래스 D를 기준으로 이동된 모습

top과 left는 각각 기준 요소의 최상단 부분과 좌측 부분을 기준으로 하며,

bottom과 right는 각각 기준 요소의 최하단 부분과 우측 부분을 기준으로 한다.

 

position: relative;와 position: absolute;는 실제로 많이 사용하는 속성이지만 필요할 때만 사용하도록 한다.

남용하면 요소들의 배치가 매우 더러워질 수도 있다.

 

 

 

4. position: fixed;

position이 fixed인 요소는 absolute와 매우 비슷하다.

우선 똑같이 기준 요소를 부모 중에 찾으며 (찾는 방식이 동일), 그 기준 요소에 대해 배치하는 방식도 같다.

다른 점이 있다면, absolute 요소는 그 자리에 머물러 있지만 fixed 요소는 그 페이지를 스크롤해도 같은 위치에 머물러있다는 점이다.

 

다음 예시에서 차이를 보자.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML과 CSS</title>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="A">
            클래스A
            <div class="B">클래스 B</div>
            <div class="C">클래스 C</div>
            <div class="D">
                클래스 D
                <div class="E">클래스 E</div>
            </div>
        </div>
    </body>
</html>
/* index.css */

div {
    padding: 30px;
}

.A {
    background-color: orange;
    height: 2000px;
}

.B {
    background-color: yellow;
}

.C {
    background-color: green;
}

.D {
    background-color: cyan;
}

.E {
    position: fixed;
    background-color: rgb(250, 0, 250);
}

일부러 상위 요소인 A 클래스 div를 세로로 길게 만들어 스크롤 가능하게 만들었다.

위의 결과 페이지에서 스크롤을 하면 E 클래스 div가 어떻게 배치되는지 알 수 있는데, absolute와의 차이를 알고 싶다면 E 클래스 div의 position을 absolute로 바꾸어 해보면 어떤 차이가 있는지 알 수 있을 것이다.

position: fixed; 요소는 페이지 기준으로 고정되어있다.

 

5. position: sticky;

position이 sticky인 요소는 fixed와 absolute를 합친 느낌과 비슷하다.

 

다만 기준 요소를 정하는 방식이 fixed/absolute와는 조금 다르다.

 

fixed/absolute가 기준 요소를 고를 때 static이 아닌 가장 가까운 조상을 고르는 것이었다면,

sticky 요소는 조상 요소 중 '스크롤이 가능한 요소'를 기준으로 잡는다.

 

또한 기준 요소가 스크롤될 때 sticky 요소는 페이지에 계속 보이려고 안간힘을 쓰는 듯한 배치를 보여주는데,

다음 예시를 보고 이해해보자.

 

<!DOCTYPE html>
<html>
    <head>
        <title>HTML과 CSS</title>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="A">
            클래스A
            <div class="B">
                클래스 B
                <div class="C">클래스 C</div>
            </div>
        </div>
    </body>
</html>
/* index.css */

div {
    padding: 30px;
}

.A {
    background-color: orange;
    height: 300px;
    overflow-y: scroll;
}

.B {
    background-color: yellow;
    height: 1200px;
}

.C {
    position: sticky;
    top: 20px;
    background-color: green;
}

강제로 스크롤 영역을 만들어야 했기에, A 클래스 div의 높이를 300 픽셀로 고정시켜놓고, 그 안에 있는 B 클래스 div의 높이를 1200 픽셀로 높게 설정하여 A 클래스 div를 스크롤 가능하게 만들었다.

 

이 때 C 클래스 div가 sticky이면 기준 요소가 A이므로, B 클래스 div의 스크롤을 내리면 C 클래스 div가 위에 붙어서 내려오는 것을 볼 수 있다.

sticky 요소는 필요할 때마다 적절히 사용하자.

경험상 많이 사용하진 않는다.