개발나라 스용공주

[HTML] position을 활용한 개체 이동 / position의 relative, absolute 본문

WEB/HTML & CSS

[HTML] position을 활용한 개체 이동 / position의 relative, absolute

스용공주 2024. 7. 27. 14:59
728x90
728x90

아래 사진과 같이 노란색 상자 부분을 자유롭게 위치 이동하는 방법에 대해서 알아볼 것이다.

 

핑크색 상자를 중앙배치하는 과정은 아래 링크에 풀이되어져 있다.

https://hwangseoyoung.tistory.com/135

 

[HTML] 개체 중앙에 배치하기 / Justify-content와 align-items

아래 사진과 같이 border로 만든 사각형을 중앙에 배치하는 방법에 대해서 알아볼 것이다. 우선 border를 이용하여 상자를 만들어주고 이를 감싸는 더 큰 범위의 container를 하나 생성해주었다. .pink

hwangseoyoung.tistory.com

 

 

먼저 아래 코드와 같이 노란색 상자들의 부모로 pink를 만들어준다.

이는 핑크색 상자를 생성하는 때에도 사용된다.

그리고 각각의 노란상자를 yellow1, yellow2 등으로 만들어준다.

<div class = "pink">
                <div class = "yellow1">떡볶이</div>
                <div class = "yellow2">평양냉면</div>
                <div class = "yellow3">베이글</div>
                <div class = "yellow4">돈가스</div>
                <div class = "yellow5">짬뽕</div>
                <div class = "yellow6">파스타</div>
            </div>

 

 

 

 

 

pink 클래스 안에 있는 div들은 모두 노란색 상자를 지칭하는 것이므로 아래 코드와 같이 pink div로 묶어서 노란 상자들의 css를 공통적으로 한번에 작성하여 관리해준다.

.pink div {
                text-align: center;
                font-weight: bold;
                display : flex;
                justify-content : center;
                align-items : center;
                margin : 20px;
                border : rgb(255, 255, 95) 1px solid;
                border-radius: 10px;
                width : 75px;
                height : 75px;
                background-color: rgb(255, 255, 95);
                box-shadow: 5px 5px 10px rgb(227, 255, 238);
                position : absolute;
            }

 

 

[ 글씨를 중앙에 배치하기 ]

이때 아래 코드 부분은 글자를 중앙에 오도록 만들어주는 의미의 코드이다.

display : flex;
justify-content : center;
align-items : center;

해당 코드가 없을 때
해당 코드가 있을 때

 

 

[ 상자에 그림자 만들기 ]

box-shadow: 5px 5px 10px rgb(227, 255, 238);

 

 

[ position ]

position속성은 relative와 absolute가 있다.

relative의 경우 개체 자체가 가지고 있던 위치를 기준으로 움직이는 것(상대적)이고 absolute는 모니터 화면을 기준으로 움직이는 것(절대적)이다.

position : absolute;

 

그리고 아래 코드와 같이 각각의 상자마다 위치를 이동 시켜준다.

.yellow1 { top : 100px; left : 700px; }
.yellow2 { top : 150px; left : 550px; }
.yellow3 { top : 150px; left : 850px; }
.yellow4 { top : 250px; left : 550px; }
.yellow5 { top : 250px; left : 850px; }
.yellow6 { top : 300px; left : 700px; }

 

 

 

 

 

 

전체 코드는 아래 코드와 같다.

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            * {
                margin : 0;
                padding : 0;
            }
            h2 {
                text-align: center;
                margin : 10px;
            }
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .pink {
                width : 700px;
                height : 450px;
                background-color: palevioletred;
            }
            .pink div {
                text-align: center;
                font-weight: bold;
                display : flex;
                justify-content : center;
                align-items : center;
                margin : 20px;
                border : rgb(255, 255, 95) 1px solid;
                border-radius: 10px;
                width : 75px;
                height : 75px;
                background-color: rgb(255, 255, 95);
                box-shadow: 5px 5px 10px rgb(227, 255, 238);
                position : absolute;
            }
            .yellow1 { top : 100px; left : 700px; }
            .yellow2 { top : 150px; left : 550px; }
            .yellow3 { top : 150px; left : 850px; }
            .yellow4 { top : 250px; left : 550px; }
            .yellow5 { top : 250px; left : 850px; }
            .yellow6 { top : 300px; left : 700px; }
        </style>
    </head>
    <body>
        <h2>저녁메뉴 추천</h2>
        <div class = "container">
            <div class = "pink">
                <div class = "yellow1">떡볶이</div>
                <div class = "yellow2">평양냉면</div>
                <div class = "yellow3">베이글</div>
                <div class = "yellow4">돈가스</div>
                <div class = "yellow5">짬뽕</div>
                <div class = "yellow6">파스타</div>
            </div>
        </div>
    </body>
</html>

 

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML] 글씨에 줄 긋기 / <del>태그  (0) 2024.07.28
[HTML] 깜빡거리는 글씨 만들기 - 애니메이션을 활용한 글씨 깜빡임 생성  (0) 2024.07.28
[HTML] 개체 중앙에 배치하기 / Justify-content와 align-items  (0) 2024.07.27
[HTML] table의 display 속성  (0) 2024.07.22
[HTML] table에서 칸 병합하기 / colspan, rowspan  (0) 2024.07.12
'WEB/HTML & CSS' Related Articles more
Comments