Frontend/CSS

10. 위치 지정 (position, display, float, clear)

예린lynn 2024. 7. 5. 01:15
728x90

 

1. position

  1. static
  2. relative
  3. absolute
  4. fixed

static

  • 기본값
  • 문서의 흐름에 맞춰 배치된다.
  • 다른 속성들과 달리 따로 위치를 지정하지 않는다.

 

relative

  • 위치값을 지정할 수 있다는 점을 제외하면 static과 같다.
  • 자신의 상대적 위치(static)을 기준으로 위치 변경 가능
    <style>
      .relative {
        position: relative;
        left: 30px;
        top: 30px;
        border: 3px solid red;
      }
    </style>
    
  <body>
    <!-- position: html 요소의 위치를 정의 -->
    <!-- position: relative; -->
    <!-- top, right, bottom, left 4가지 속성을 같이 사용해서 오프셋을 적용 -->
    
    <h4>position: relative;</h4>
    <div class="relative">
      원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다.
    </div>
  </body>

 

- 실행 결과

position: relative;

원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 된다.

 

 

 

absolute

  • relative값을 사용한 상위 요소를 기준으로 위치 지정
  • 부모 요소에 position: relative 값이 있어야지만 사용 가능
    <style>
      .relative {
        position: relative;
        width: 50%;
        height: 100px;
        border: 3px solid green;
      }

      .absolute {
        position: absolute;
        top: 30px;
        right: 10px;
        width: 50%;
        border: 3px solid red;
      }

      .general {
        width: 50%;
        border: 3px solid blue;
      }
    </style>
  
  <body>
    <h4>position:absolute;</h4>
    <div class="relative">
      position:relative로 설정된 부모 요소
      <div class="general">일반(position:static) 요소</div>
      <div class="absolute">position:absolute로 설정된 요소</div>
    </div>
  </body>

 

- 실행 결과

position:absolute;

position:relative로 설정된 부모 요소
일반(position:static) 요소
position:absolute로 설정된 요소

 

 

 

fixed

  • 다른 요소와 스크롤에 영향받지 않고, 브라우저 창의 상대적인 위치 설정
  • 주로 사이트의 header, 우측 하단의 위로가기 버튼 등에 사용
    <style>
      .fixed {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        border: 3px solid green;
        font-size: 25px;
        color: green;
      }
    </style>
  </head>
  <body>
    <!-- top, right, bottom, left 속성을 이용해서 위치를 지정 -->
    <h4>positon:fixed;</h4>
    <button class="fixed">&uarr;</button>
  </body>

 

- 실행 결과

 우측 하단에 초록색 원이 생긴다. 이때 스크롤을 움직여도 위치는 고정된다.

positon:fixed;

 

 

2. display

none

  • 해당 요소를 화면에 표시하지 않는다.

 

block

  • 인라인 레벨 요소를 블록 레벨 요소로 만든다.
  • 해당 요소의 크기와 관계없이 가로가 100% 전부 차지하게 된다.
  • ex) div, p, h, ul, ol, li, table

 

inline

  • 블록 레벨 요소를 인라인 레벨 요소로 만든다.
  • 요소마다 줄이 바뀌지 않고, 옆(오른쪽)에 이어서 구현된다.
  • 크기(width, height) 지정 불가
  • ex) span, a

 

inline-block

  • block, inline의 중간 형태
  • 줄이 바뀌지 않지만, 크기와 마진을 설정할 수 있다.
  • 주로 수평 네비게이션을 만들 때 사용한다.

- 활용 코드

<style>
        .s1{
            display: inline-block;
            background-color: burlywood;
        }
        .s2{
            background-color: cadetblue;
        }
        .s3{
            background-color: peru;
        }
        </style>
        
        <body>        
         <span class='s1'>menu1</span>
    <span class='s2'>menu2</span>
    <span class='s3'>menu3</span>
    </body>

 

- 실행 결과

menu1 menu2 menu3

 

 

3. float

  • float는 '떠 있다'라는 의미로, 요소가 왼쪽이나 오른쪽 구석에 배치된다.
  • 단, 공간에 따라 요소가 띄워진 후에 다음 요소들이 어떻게 될지 예측하기 어렵다는 단점이 있다.
  • none(기본값. 좌우x), left, right

 

4. clear

  • float 속성을 사용하면, 그 다음 요소에도 자동으로 똑같은 속성이 전달된다.
  • float 속성을 해제하기 위해 사용하는 것이 clear 속성이다.
  • left (float:left 해제), right (float:right 해제), both (모두 해제)

 

 

728x90