· FRONT-END/└ CSS

[ CSS / HTML ] 배치방식 이해

감자도리22 2024. 4. 14. 15:42

환경 : Visual Studio Code

 

 

배치 방식을 이해해보자

 - 출력 결과

화면

 

HTML 태그들은 먼저 작성한 것이 먼저 화면에 표시되는 것이 기본이다.   

이 기본을 바꾸고 싶다면, position 속성으로 제어해야 한다.  

 

 

 

  • position:static  
         └ 기본 배치 방식
         └ 위치를 미세 조정할 수 없다
         └ 먼저 작성한 것이 먼저 배치된다
  • position:relative 
         └ 연관 배치 방식
         └ 위치에 대한 미세 조정이 가능하다(top, bottom, left, right, z-index)
         └ 먼저 작성한 것이 먼저 배치된다
         └ 태그끼리 영역 겹침 현상이 발생할 수 있다 (z-index로 해결 가능)
  •  position:absolute
          └ 절대 배치 방식
          └ 위치에 대한 미세 조정이 가능하다(top, bottom, left, right, z-index)
          └ 작성 순서와 관계 없이 위치를 직접 지정해야 한다
          └ 태그끼리 영역 겹침 현상이 발생할 수 있다 (z-index로 해결 가능)
          └ (★중요★)기준이 되는 영역을 반드시 지정해야 한다(없으면 body로 설정)
          └ 기준 영역은 반드시 position이 static이 아니어야 한다.
  • position:fixed
          └ 화면 고정 방식
          └ 위치에 대한 미세 조정이 가능하다(top, bottom, left, right, z-index)
          └ 작성 순서와 관계 없이 위치를 직접 지정해야 한다
          └ 태그끼리 영역 겹침 현상이 발생할 수 있다 (z-index로 해결 가능)
          └ (★중요★)무조건 브라우저에 표시되는 화면을 기준으로 위치가 정해진다.

 

 

 [ 전체 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배치 방식</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <link rel="stylesheet" type="text/css" href="test.css">
    <style>
        .static-box {
            position: static;
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }

        .relative-box {
            position: relative;
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }
        .relative-box.r1 {
            background-color: rgb(223, 237, 248);
            top: 20px; /*현재 위치의 위(top)에서 20px만큼 떨어뜨려라*/
            left: 20px; /*현재 위치의 왼쪽(left)에서 20px만큼 떨어뜨려라*/
            z-index: 3; /*대상의 배치위치를 3층으로 해라*/
        }
        .relative-box.r2 {
            background-color: #f7ebc4;
            right: 15px; /*현재 위치의 오른쪽(right)에서 15px만큼 떨어뜨려라*/
            bottom: 10px; /*현재 위치의 아래쪽(bottom)에서 10px만큼 떨어뜨려라*/
            z-index: 1; /*대상의 배치위치를 1층으로 해라*/
        }
        .relative-box.r3 {
            background-color: rgb(192, 243, 240);
            bottom: 50px ; /*현재 위치의 아래쪽(bottom)에서 50px만큼 떨어뜨려라*/
            z-index: 2; /*대상의 배치위치를 2층으로 해라*/
        }

        .absolute-box {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }
        .absolute-box.a1 {
            background-color: rgb(223, 237, 248);
            top: 20px;
            left: 20px;
        }

        .fixed-box {
            position: fixed;
            width: 100px;
            height: 100px;
            border: 3px solid black;
        }
        .f1 {
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="container w-500">
        <div class="cell">
            <h1>배치 방식 배우기</h1>
        </div>
        <div class="cell">
            <div class="static-box">static1</div>
            <div class="static-box">static2</div>
            <div class="static-box">static3</div>
        </div>
        <div class="cell">
            <div class="relative-box r1">relative1</div>
            <div class="relative-box r2">relative2</div>
            <div class="relative-box r3">relative3</div>
        </div>
        <div class="cell" style="position: relative;">
            <div class="absolute-box a1">absoulte1</div>
            <div class="absolute-box a2">absoulte2</div>
            <div class="absolute-box a3">absoulte3</div>
        </div>
        <div class="cell">
            <div class="fixed-box f1">fixed 1</div>
            <div class="fixed-box f2">fixed 2</div>
            <div class="fixed-box f3">fixed 3</div>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

개인 공부 기록용입니다:)

728x90