[HTML] CSS활용: 레이아웃

1. Position

페이지의 레이아웃을 결정짓는 가장 기본적이고 유용한 속성으로 Position을 들 수 있습니다.

Position은 문서 상에서 특정 요소를 배치해주는 속성입니다.

position의 속성값들은 top, right, bottom, left 속성들의 값을 조절해줌으로써 배치할 위치를 변경 시킬 수 있습니다.

Position이 가질 수 있는 속성값들을 하나하나 살펴보며 Position에 대한 이해를 다지겠습니다.

1) static

<style>
    a{
        position: static;
      }
</style>

Position 프로퍼티의 default값이기에, Position 값을 지정해주지 않는다면 브라우저는 기본적으로 Position값을 static으로 인식합니다.

그렇다면 static값은 어떤 방식으로 요소를 배치할까요??

static값은 요소를 일반적인 문서 흐름에 따라 배치합니다.
즉, 문서 상에서 원래 있었어야 하는 위치에 그대로 배치해줍니다.

static값은 top, right, bottom, left 값들에 영향을 받지 않습니다.

그림으로 살펴보겠습니다. 다음은 Position 속성을 눈으로 확인할 수 있도록 짠 html, css 소스코드 입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Position</title>
</head>
<body>
    <div class="box">
        <div class="red">position: static</div>
        <div class="green">position: static</div>
        <div class="blue">position: static</div>
    </div>
</body>
</html>

body{
    background-color: black;
}

.red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

.green{
    background-color: mediumspringgreen;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

.blue{
    background-color: powderblue;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

이 코드들을 화면으로 출력하면 다음과 같은 모습이 나옵니다.

여기서 분홍색 영역의 Position 속성에 static값을 부여해보겠습니다.

.red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    position: static;
}

이후의 출력 화면은 어떻게 변했을까요?

짠~ 아무것도 변한 게 없습니다.

애초에 Position 속성에 값을 부여하지 않았을 때부터 브라우져는 이미 자동적으로 Position 속성을 static값으로 인식하고 있었기 때문입니다!!

<참고 자료>

See the Pen <a href="https://codepen.io/highandlight/pen/eYyqYzE"> Untitled</a> by HighandLight (<a href="https://codepen.io/highandlight">@highandlight</a>) on <a href="https://codepen.io">CodePen</a>.

2) relative

<style>
    a{
        position: relative;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
</style>

고정적이었던 static과 달리 relative 속성값은 요소를 원래 위치에서 벗어나 사용자가 지정하는 대로 배치할 수 있게 해줍니다.

여기서 중요한 점은 '위치를 이동시킬 때, 무엇을 기준으로 이동시키는가' 입니다.

후에 나올 다른 속성값들과의 차이점을 명확히 파악하기 위해서, 앞서 말한 기준점을 아는 것은 매우 중요합니다!!

relative 속성값의 이동 기준은 원래 있던 위치입니다.

자신이 원래 있던 위치를 기준으로 top, right, bottom, left 속성값을 조정하여 이동할 수 있습니다.

위와 동일할 기존 코드에서, 분홍색 영역의 Position 값을 relative로 지정해 보겠습니다.

.red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    position: relative;
}

코드 작성 후 출력 화면을 보니..

아무 일도 일어나지 않았습니다!!

아까 언급했듯, Position을 통해 요소를 이동시키려면, top, right, bottom, left 속성값을 조정하여 이동시켜야 합니다.
따라서, 이 속성값등을 부여해주지 않는다면, 브라우저는 요소가 모든 방향으로 default값인 0만큼 이동하는 것으로 인식해, 결국은 움직이지 않는 것입니다.

그렇다면, 방향에 대한 속성값을 부여해 볼까요?

분홍색 영역의 상자를 원래 있던 자리에 비해, 위로부터 30px만큼, 왼쪽으로부터 30px만큼 떨어지도록 이동시켜 보겠습니다.

단순히 top 의 값과 left 의 값을 각각 30px로 지정해주면 될 것 같습니다.

.red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    position: relative;
    left: 30px;
    top: 30px;
}

이렇게 수정한다면 출력 화면은...

짜잔~ 기존의 분홍색 영역보다 아래로 30px, 오른쪽으로 30px을 이동한 것을 볼 수 있습니다!!

이처럼 Position의 relative 속성값은 자신이 원래 있던 위치로부터 요소를 이동시켜준다는 것을 알 수 있습니다.

<참고자료>

See the Pen <a href="https://codepen.io/highandlight/pen/gOoNVqo"> Untitled</a> by HighandLight (<a href="https://codepen.io/highandlight">@highandlight</a>) on <a href="https://codepen.io">CodePen</a>.

3) absolute

absolute 속성값은 Position의 속성값 중 가장 이해하기 복잡하고 조심스럽게 사용해야 하는 속성값입니다.

앞서 relative 속성값이 자신의 원래 위치 상태를 기준으로 부여된 픽셀만큼 움직였다면, absolute는
Position:static 속성을 가지고 있지 않은 부모 요소를 기준으로 움직입니다.
만약 부모 요소 중 Position이 relative, absolute, fixed인 태그가 없다면, 가장 위의 태그인 태그가 기준이 되는 것입니다.

위의 분홍색 영역의 Position에 absolute값을 부여해보겠습니다.

 .red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    position: absolute;

}

출력된 화면을 보니..

....!!

뜬금 없이 갑자기 초록색 영역이 사라졌습니다!

우선 분홍색 영역의 위치 속성값을 아까와 동일하게 조금 수정해 보겠습니다.

 .red{
    background-color: pink;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;

    position: absolute;
    top: 30px;
    left: 30px;
}

아래는 그 출력 결과입니다.

사실 알고 보니, 초록색 영역은 분홍색 영역 뒤에 숨겨져 있었다는 것을 알 수 있었습니다.

쉽게 말해, 분홍색 영역은 부모 영역(이 경우는 body 태그)의 손에서 벗어났고, 부모 요소는 이 자유로워진 분홍색 영역을
없는 사람 취급하여 뒤에 붙어있던 초록색, 파란색 영역들이 한 칸씩 앞으로 밀린 것입니다.

이를 통해 absolute의 아주 중요한 특징을 알 수 있습니다.

그것은 바로 absolute로 설정되어 있는 요소들은 웹페이지 상에 배치될 때에 기존 부모 요소 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 된다는 것입니다.

대부분의 경우, 가장 가까운 상위 요소인 부모요소를 기준으로 위치값을 적용해야하기 때문에, 어떤 요소의 Position 속성을 absolute로 지정했다면, 부모 요소의 Position 속성을 relative로 지정해주는 것이 일반적입니다!

<참고자료>

See the Pen <a href="https://codepen.io/highandlight/pen/KKZOKWa"> Untitled</a> by HighandLight (<a href="https://codepen.io/highandlight">@highandlight</a>) on <a href="https://codepen.io">CodePen</a>.

3) fixed

평소 모니터 화면을 위, 아래로 스크롤할 때, 스크롤 정도에 상관 없이 브라우저 상의 특정 부분에 고정되어(fixed) 움직이지 않는 UI를 보신 적이 있으신가요?

주로 앱이나 웹사이트의 로고를 구현할 때 유용하게 쓰이는 기법인데요, Position 속성을 fixed로 지정한다면, 이렇게 특정 요소를 항상 고정된 위치에 배치할 수 있습니다.

아래는 제가 간단히 만든 가상의 쇼핑 웹사이트입니다.

이 단순한 한 페이지가 스크롤이 필요할 만큼 길어진다면, 맨 위의 웹사이트 로고와 밑의 팝업창은 함께 올라갈까요?

페이지를 스크롤해야 할 만큼 페이지가 길어야 하기에, 항목 여러개를 추가해 주어 확인해보겠습니다.

See the Pen <a href="https://codepen.io/highandlight/pen/OJzKJGR"> Untitled</a> by HighandLight (<a href="https://codepen.io/highandlight">@highandlight</a>) on <a href="https://codepen.io">CodePen</a>.

페이지를 스크롤하더라도, 맨 위의 홈페이지 로고와 밑의 팝업창은 윈도우 내에서 그 절대적인 위치를 유지하고 있는 것을 확인 할 수 있습니다.

정리
Position: 윈도우 내에서 요소의 상대적, 절대적 위치를 변경시킬 수 있는 속성
각각의 Positio 속성값에 대해서는 top, right, bottom, left 네 속성의 속성값(default: 0)을 조정하여 위치 조정.

1) Static: 가장 기본적인 default값으로, static값을 적용시 아무 변화도 발생하지 않음.
2) relative: 자신이 원래 있던 위치를 기준으로 위치를 변경시킬 수 있는 속성값.
3) absolute: 자신의 기존 부모에 귀속되지 않고 독립적인 배치 문맥을 통해 위치를 변경시킬 수 있는 속성값.
4) fixed: 윈도우 내에서 절대적인 고정된 위치를 유지하게 해주는 속성값.

저작자표시

'Web) HTML & CSS' 카테고리의 다른 글

[HTML&CSS]: 번외) Semantic Code (0)	2022.04.30
[HTML&CSS]4. CSS: inline, block, inline-block (0)	2022.04.30
[HTML&CSS] 2. CSS의 기본 (0)	2022.04.25
[HTML&CSS]1. HTML의 기본 (0)	2022.04.25

[HTML&CSS] 3. CSS: Position