박스 위치 선정-relative 속성

imjingu·2023년 7월 5일
0

개발공부

목록 보기
58/481

박스의 각 요소 위치를 정하는 방법
상대위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정
절대위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정

postition 속성
static : 태그가 위에서 아래로 순서대로 배치되며 position 속성을 지정하지 않으면 기본 값으로 지정
relative : 초기 위치 상태에서 상하좌우로 위치를 이동
absolute : 절대위치 좌표를 설정, '부모박스 기준' 으로 좌표를 설정
fixed : 화면을 기준으로 절대 위치 좌표를 설정하며 위치가 고정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            border: 4px solid black;
            margin-left: 30px;
            font-size: 30px;
            line-height: 300px; /* 줄간격 */
            text-align: center;
            position: relative; /* 상대좌표 */
            left: 100px; /* 좌표 인식 가능 */
            top: 100px; /* 좌표 인식 가능 */
        }
    </style>
</head>
<body>
    <div>relative-1</div>
    <div>relative-2</div>
    <div>relative-3</div>
</body>
</html>

0개의 댓글