Position 속성과 inline, inline-block, block 레이아웃

1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block

 

Position 태그 및 속성은 웹 문서의 요소들을 어떻게 배치할지를 정하는 속성으로 이용시 텍스트나 이미지 등을 원하는 위치에 배치할 수 있다.

 

CSS를 이용해 문서의 레이아웃을 배치하고, 수정 작업을 해야하는 프론트개발자에겐 화면구현에 있어서 중요한 부분으로 Position 속성을 제대로 알고있어야 레이아웃에 대한 작업이 쉬워진다.

 

Position의 속성은 static, relative, absolute, fixed 가 기본적으로 있으며 비교적 최근에 추가된 sticky가 있다.

 

<style>
    position:static;
  	/* 좌표이동을 하지 않습니다. 
    position 속성의 기본값으로 요소를 나열한 순서대로 배치.
    top, right, bottom, left와 같은 속성은 사용불가하다. */
    
    position:fixed;
  	/* 뷰포트(현재화면)를 기준으로 위치를 고정시킨다. */
    
    position:relative;
  	/* 현재 자신의 위치를 기준으로 이동 style="top:10px; 
    left:5px;"를 적용하면 위에서 10px 왼쪽에서 5px를 이동한다. */
    
    position:absolute;
  	/* 부모 태그를 기준으로 위치 이동 position:relative 가진 태그가 부모 */
    
    position:sticky;
  	/* 특이하게 요소가 스크롤링될 때 효과가 보인다.
    기준점을 넘지 않으면 relative 처럼 동작하다가 넘게되면
    fixed 속성과 같이 동작하게 된다. */
</style>

MDN 에서 더 자세히 알아보기

 

오늘은 메인 키워드인 Position 속성 relative, absolute, fixed에 대해 파보도록 하자 😎

relative

위에 정리한 내용과 같이 현재 자신이 있던 위치를 기준으로 변경이 일어나는 속성이다.

직접 예시를 만들면서 배워보기로 했다.

 

가로, 세로 길이가 각 200px인 박스가 3개가 있다. 이때 BOX2에게 포지션 속성을 relative로 주고 이동시켜보자.

 

top에 0과 left에 200px이란 값을 주자 자신이 있었던 기존의 위치에서 위로 0만큼 왼쪽에서 200px만큼 이동한 것을 볼 수 있다. 이렇게 relative는 자신의 원래 있던 위치를 기준으로 이동하는 것을 볼 수 있다.

 

absolute

요소를 기준으로 위치를 이동하는 속성으로 자신의 상위 부모 요소에서 속성이 relative인 것을 기준으로 잡으려한다. 

만약 부모 요소에 relative가 없다면 상단과 왼쪽 0을 기준으로 잡게된다.

 

이렇게 작성한 예제에서 BOX2에 position속성을 absolute를 주고 top과 left에 각각 20px 값을 줘보았다.

 

결과와 같이 상위 부모 요소중에 relative인 것을 찾지 못해 상단과 왼쪽 0을 기준으로 20px씩 이동한 것을 볼 수 있다.

이제 감싸고 있는 부모<div>에게 position속성을 relative로 줘보자.

 

이번엔 자신의 상위 부모요소 중 속성이 relative인 wrapper를 기준으로 top과 left를 20px씩 이동한 것을 볼 수 있다.

 

fixed

 

박스가 아닌 브라우저(화면)를 기준으로 위치 변경이 일어나며 top, left, bottom, right로 값을 지정하여 위치를 정한다.

fixed를 사용시 block속성의 요소들은 inline요소처럼 내용의 크기가 맞춰지므로 width와 height값을 필요시 사용한다.

 

이번에는 똑같이 가로, 세로 길이가 200px인 박스를 3개를 만들고 position속성이 fixed인 box4를 만들어서 top, right 0값을 주어 우측에 고정시켜보았다. 그럼 아래와 같이 화면에서 정해진 위치에 고정되어 있는 것을 확인할 수 있다.

 

 

---

inline, inline-block, block

CSS에서 display속성은 웹페이지 상 요소들이 어떻게 보여지고 다른 요소들과 상호 배치되는지를 결정하는 속성이다.

그 중 가장 기본적이지만 헷갈리는 inline, block, inline-block을 키워드로 공부해보자.

inline

요소들을 전후 줄바꿈없이 한 줄에 다른 요소들과 나란히 배치되는 속성으로 inline 속성 태그들은 아래처럼

<a>,<i>,<span>,<abbr>,<img>,<strong>,<b>,<input>,<sub>,<br>,<code>,<em>,<small>,<tt>,<map>,<textarea>,<label>,<sup>,<q>,<button>,<cite> 등이 있다.

예를 들어 inline 요소 성질을 가진 태그들을 배치하면 아래와 같이 한줄에 정렬되어 배치되는 것을 확인가능하다.

 

 

이 때 주의사항으로는 width와 height속성을 지정해도 무시한다는 것으로 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하기 때문이다. 또 한 margin과 padding속성은 좌우 간격만 방영되고 상하 간격은 반영되지 않는다.

block

block 요소들은 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지하는 속성으로 태그로는

<address>,<article>,<aside>,<blockgquote>,<canvas>,<dd>,<div>,<dl>,<hr>,<header>,<form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,<table>,<pre>,<ul>,<p>,<ol>,<video> 등이 있다.

얘 또 한 예를 들어 block 요소 성질을 가진 태그들을 이용하면 매번 줄바꿈이 되어 여러줄로 배치된 걸 볼 수 있다.

그리고 block 요소들은 inline과 달리 width, height, margin, padding 속성 모두 반영된다.

 

 

inline-block

이 속성은 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만 불가능하던 width와 height 속성을 지정하고 margin과 padding 속성의 상하 간격 지정이 가능해진 속성이다. 대표적인 것으로는

<button>, <input>, <select> 등이 있다.