III. 박스 모델 - 5. 웹 요소의 위치 지정하기

Hush 2022. 6. 4. 20:37

left, right, top, bottom : 웹 요소의 위치를 정하는 속성

먼저 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 한다. 이때 사용하는 속성이 left, right, top, bottom이다.

즉 position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다.

종류	설명
left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정

다음 예제는 left, right, top, bottom 속성을 사용해서 텍스트 단락을 자유롭게 배치한 것이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            #pos1 {
                position :absolute;
                left: 50px;
                top: 50px;
                width: 200px;
            }
            #pos2 {
                position: absolute;
                right: 100px;
                top: 100px;
                width: 200px;
            }
            #pos3 {
                position: absolute;
                left : 100px;
                bottom : 100px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <p id="pos1">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
        <p id="pos2">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
        <p id="pos3">예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. 예제 텍스트입니다. </p>
    </body>
</html>

position : 배치 방법을 지정

position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하다.

position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.

position 속성의 속성값들은 다음과 같다.

종류	설명
static	문서의 흐름에 맞춰 배치합니다. 기본값입니다.
relative	위칫값을 지정할 수 있다는 점을 제외하면 static과 같습니다.
absolute	relative값을 사용한 상위 요소를 기준을 위치를 지정해 배치합니다.
fixed	브라우저 창을 기준으로 위치를 지정해 배치합니다.
sticky	static과 같이 일반적인 흐름을 따르다가, 스크롤 위치가 임계점에 이르면 fixed처럼 화면에 고정되도록 배치합니다.

다음 예제의 첫 번째 단락과 두 번째 단락의 position 속성값은 각각 static과 relative를 사용했으므로 웹 문서의 흐름에 따라 요소가 위에서 아래로 자연스럽게 배치된다.

세 번째 단락으 position 속성값은 relative이면서 right와 top속성이 지정되었다. 원래는 두 번째 문단 밑에 위치해야 하지만 right, top 속성이 지정되었으므로 원래 위치에서 오른쪽으로 100px 이동하고 위로 50px 올라간 만큼 겹처서 배치됩니다.

마지막으로 오른쪽 위에 있는 검은색 상자는 fixed 값을 사용했으므로 웹 브라우저에서 스크롤 하더라도 항상 같은 위치에 나타납니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            p{
                background: rgb(206, 206, 206);
                width: 300px;
            }
            #static {position: static; }
            #relative-1 {position: relative;}
            #relative-2 {
                position : relative;
                left: 100px;
                top: -50px;
            }
            #fixed {
                width: 100px;
                height: 100px;
                background-color: black;
                position: fixed;
                right: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <p id="static">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
        <p id="relative-1">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
        <p id="relative-2">예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. 예시 텍스트입니다. </p>
        <p id="fixed"></p>
    </body>
</html>

저작자표시 (새창열림)