position 속성과 inline, inline-block, block 에 대해서

김재도·2022년 3월 2일

1. position 속성

position 속성은 태그를 어떻게 위치시킬지를 정의합니다.
이번에는 position 속성들 중 relative, absolute, fixed에 대해서 알아보겠습니다.

relative

원래 있던 위치를 기준으로 좌표를 지정합니다. 자식 태그가 absolute 속성일 때 영역을 잡아주는 역할입니다.
absolute

절대 좌표와 함께 위치를 지정해 줄 수 있습니다. left, top, right, bottom 값으로 전 화면을 아무런 제약 없이 쓸 수 있는 것. 부모 태그가 relative 속성일 때 부모의 영역안에서 좌표를 지정합니다.
fixed

스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.(block은 밑에서 다루겠습니다.)

예제

relative, absolute, fixed 속성을 가진 div를 만든 후 출력해보겠습니다.

<style>
    .relative {
        width:400px; 
        height: 2000px; 
        position: relative; 
        background-color: green;
        font-size: 20px;
        color:white;

top:200px;
}
.absolute{
width:100px;
height: 50px;
position:absolute;
background-color: yellow;
top:10px;
right:0;
font-size: 20px;
color:black;
}
.fixed{
width:50px;
height:20px;
font-size: 20px;
color:white;
background-color: aqua;
position: fixed;
top:0;
left:600px;
}

<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed">fixed</div>

출력화면

출력화면을 보면 relative는 원래 있던 위치를 기준으로 top 200px; 만큼 이동하였고 absolute는 절대적인 위치인 right 0 , top 10px에 위치하고 있습니다. fixed는 최좌측 상단을 기준으로 top 0 left 600px에 위치하고 있습니다.

이번에는 absolute div가 relative div 안에 들어있을 때 결과를 확인해보겠습니다.

	<div class="relative">relative 
  <div class="absolute"">absolute</div>
  </div>

absolute div가 relative div 안에 들어있을 때 absolute는 부모인 relative의 영역 안에서 움직입니다.

이번에는 fixed가 잘 고정되는지 확인해보겠습니다.

스크롤을 내려도 fixed는 top 0 left 600px에 잘 고정되어있는 것을 확인할 수 있습니다.

2. inline, inline-block, block

html의 태그들은 크게 block 요소와 inline 요소로 나눌 수 있습니다.

block

display 속성이 block으로 지정된 엘리먼트는 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 다 차지합니다. 대표적인 block 엘리먼트로 div이나 p, h1 태그 등을 들 수 있습니다.

예시
```
<style>
     .first{
      background-color: aqua;
     }
     .second{
      background-color: yellow;
     }
  </style>
</head>
<body>
  <div class="first">1</div>
  
  <div class="second">2</div>
</body>
```
display 속성을 block으로 가지는 div 엘리먼트는 위와 같이 한 줄을 다차지하고 다음 엘리먼트를 밑으로 밀어냅니다.
inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 span이나 a, em 태그 등을 들 수 있습니다.

예시

<style>
    .first{
        background-color: aqua;
        width:100px;
    }
    .second{
        background-color: yellow;
        width:100px;
    }
    </style>
</head>
<body>
    <span class="first">1</span>
    
    <span class="second">2</span>
</body>
</html>

display 속성을 inline으로 가지는 span 엘리먼트는 위와 같이 줄바꿈 없이 한 줄에 나란히 배치됩니다. 그러나 위에 코드 중 span 태그를 width 100px로 만드려는 코드가 적용되지 않습니다. 왜그럴까요? inline 속성인 span은 block 처럼 한 줄을 차지하기 않기 때문에 width 값을 줄 수 없습니다. 그럴 때 사용하는 것이 inline-block 입니다.

inline-block
display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 block 속성처럼 가능해집니다. 대표적으로 button이나 input, select 태그가 있습니다.
예시

<style>
    .first{
        background-color: aqua;
        display:inline-block;
        width:100px;
    }
    .second{
        background-color: yellow;
        display:inline-block;
        width:100px;
    }
    </style>
</head>
<body>
    <span class="first">1</span>
    
    <span class="second">2</span>
</body>
</html>

위 결과에서 보이듯이 span 태그를 inline-block 속성으로 바꿔주자 width 100px이 적용되었습니다.

마무리

웹을 만들다보면 정말 자주 쓰이는 css인 position, inline, inline-block, block에 대해 알아보았습니다. 저도 블로그를 쓰며 공부하기 전 relative와 absolute 부분이 조금 헷갈렸었는데 확실히 사용하는 엘리먼트와 속성을 정확히 알고 사용해야 더 빠르고 효율적인 코드를 짤 수 있다는 걸 느낀 것 같습니다.