position 속성
position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성이다.
position 속성을 이용해 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있다.
static
position을 아무것도 지정하지 않으면 사용되는 기본 값으로 position 속성을 static으로 지정하면 위치가 따로 지정되지 않고 HTML 문서의 흐름에 따라 위치가 정해진다.
relative
position을 relative로 지정하면 해당 요소가 static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있다. 예를 들어 static일 때 왼쪽으로부터 30px, 위쪽으로부터 20px에 위치해있을때 relative로 지정된 요소에 style값으로 top:5px; left:5px;을 적용하면 해당 요소는 왼쪽으로부터 35px, 위쪽으로부터 25px 이동하는 형식이다. 그러므로 position을 relative로 지정하더라도 새로운 위치를 지정하지 않으면 기본적으로 표시된 위치와 같은 값을 갖는다.
absolute
absolute 속성값은 브라우저가 문서의 흐름과 상관없이 요소를 수직으로 놓을지 수평으로 놓을지 등을 top, right, bottom, left 속성값을 이용하여 위치시키는 속성값이다. 여기서 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성값이 static이 아닌 다른 값으로 지정된 요소이다.
fixed
position을 fixed로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있다. 이 속성을 이용하여 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등을 만들 수 있다.
absolute 속성값과 fixed 속성값은 문서의 흐름과 상관없이 위치를 좌표로 결정한다는 점에서 비슷하다고 할 수 있지만 absolute는 position이 relative인 제일 가까운 부모 혹은 조상요소를 기준으로 하고 fixed는 브라우저 창을 기준으로 한다는 점이 차이점이다.
sticky
sticky 속성은 일정 기준점 이상이 되기 전엔 relative 포지션처럼 동작하다 그 이상이 되면 fixed 속성과 같이 동작하게 된다. 그리고 스크롤이 스크롤박스 밖으로 벗어나게 되면 그 위치에서 정지한다.
display 속성
display 속성은 그 값에 따라서 웹페이지를 보고 있는 사용자에게 특정 요소를 어떻게 보여줄지 결정된다. display 속성은 다양한 값을 가질 수 있지만 기본적으로 block,inline,inline-block 속성을 갖는다.
inline
display가 inline으로 설정된 요소는 다른 요소들과 함께 같은 라인에서 표시되며, 주어진 내용을 감싸도록 구성된다.가로와 세로의 크기를 임의로 지정할 수 없고 크기는 오로지 포함하고 있는 내용에 의해서 결정된다.
inline 속성을 기본 값으로 갖는 요소로는 span이 있다.
block
display가 block으로 설정된 요소는 다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지한다. 쉽게 말하면 어떤 특정 구역을 차지한다고 할 수 있다. 가로와 세로 크기를 지정할 수 있으며 가로 크기를 부모요소의 값보다 작게 설정 할 수 있지만 그렇게 할 경우 나머지 부분은 margin으로 채워져서 한줄을 그대로 차지한다.
block 속성을 기본 값으로 갖는 요소는 대표적으로 div와 p 등이 있다.
inline 속성과 block 속성의 차이점
- 요소가 새로운 행에서 시작하는가
- 요소의 크기를 지정할수 있는가
inline-block
display가 inline-block으로 설정된 요소는 block 속성과 inline의 속성을 섞어 놓은 것과 같다. block 속성처럼 가로와 세로 크기를 설정 할 수 있으면서도 새로운 줄에서 시작하지 않고 inline 속성처럼 다른 요소와 같은 라인에 배치되는 장점을 갖는다.
