css position : absolute 프로퍼티로 박스 절대 배치 하기

네 안녕하세요, 이번 포스팅에서는 박스를 절대 배치하는 방법에 대하여 알아보도록 하겠습니다.

절대 배치 역시 상대 배치처럼 많이 쓰입니다.

상대 배치만큼이나 중요한 요소 중 하나이기 때문에 이번 포스팅을 통하여 잘 알아가셨으면 좋겠습니다.

그럼 시작하도록 하겠습니다.

1 - 3. 절대 배치하기 - position : absolute 사용

절대 배치는 조금 이해하기 어려운 부분이 있을 수 있습니다.

일단 상대 배치와 조금 다른 점이 있다면,

상대 배치는 위에서 디테일한 위치를 그냥 잡아서 가지만,

절대 배치는 위에서는 절대 배치를 하겠다 선언을 해주고,

그다음에 body 태그 안에 있는 자식 태그들에게

개별적으로 style 속성을 이용하여 추가적인 절대 위치를 선정해 줍니다.

그래서 좀 더 위치를 디테일하게 잡을 수 있다는 특징이 있습니다.

또한, 상대 배치는 화면의 비율에 따라서 유동적으로 바뀌지만

절대 배치는 좌표가 절대 변하지 않으며,

이 위치를 잡는 속성들은 우리가 다른 것들의 위치를 잡을 때 쓰던 속성인

top, bottom, right, left로 정합니다.

그럼 간단한 예제와 함께 보시죠.

<!DOCTYPE html>
<html lang="ko">
<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>절대 배치</title>
    <style>
    div {
        display : inline-block;
        position : absolute; /* 절대 배치 */
        border : 1px solid lightgray;
    }
    div > p { /* div의 자식 p */
        display : inline-block;
        position : absolute; /* 절대 배치 */
        height : 20px;
        width : 15px;
        background : lightgray;
    }
    </style>
</head>
<body>
    <h3>Merry Christmas!</h3>
    <hr>
    <p>예수님이 탄생하셨습니다.</p>
    <div>
        <img src="media/christmastree.png"
                width="200" height="200" alt="크리스마스 트리">
        <p style="left:50px; top:30px">M</p>
        <p style="left:100px; top:0px">E</p>
        <p style="left:100px; top:80px">R</p>
        <p style="left:150px; top:110px">R</p>
        <p style="left:30px; top:130px">Y</p>
    </div>
</body>
</html>

이렇게 절대 배치에 관한 예제를 작성을 해봤습니다.

여기에서 보실 수 있듯이,

head 태그 내에서는 절대 배치를 하겠다는 선언만 해주고,

그 이후에 body 태그 안에 있는 태그들에서 절대 위치를 배정을 한 것을 볼 수가 있습니다.

보통 절대 위치를 지정할 때는 저렇게 쓰곤 합니다.

그럼 결과 화면을 같이 보시죠.

이렇게 디테일하게 좌표가 잡혀 있음을 보실 수가 있습니다.

그리고 브라우저의 크기가 변해도 태그의 위치는

'절대 위치'이기 때문에 그 좌표가 변하지 않습니다.

여기까지 박스를 절대 배치하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 고정 배치를 하는 방법애 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css float 프로퍼티로 박스 유동적으로 배치하기 (0)	2023.04.24
css position : fixed 프로퍼티로 박스 고정 배치 하기 (0)	2023.04.24
css position : relative 프로퍼티로 박스 상대 배치 하기 (0)	2023.04.24
css position : static 프로퍼티로 박스 정적 배치 하기 (0)	2023.04.24
css display 속성으로 박스의 유형 제어하기 3 - display : inline-block 속성으로 인라인 블록 박스 제어하기 (0)	2023.04.03

개발러 L의 뻔fun한 코딩

css position : absolute 프로퍼티로 박스 절대 배치 하기