박스나 요소를 원하는 위치에 두고싶다면 position 속성과 , display 속성을 알아보도록 하자 !!

position 속성

(1) position : relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해주고, 요소의 위치를 top, bottom, left, right 속성을 이용해 요소가 상하좌우 얼마나 떨어져 있을지 지정할 수 있습니다. (참고로 top,bottom,left,right 속성들은 position이 relative일 때만 사용가능합니다.)

위에 코드처럼 position : relative 속성을 사용해야만 top, bottom, left, right를 이용해서 위치를 조정할 수 있습니다.

(2)position : absolute

position : absolute는 이름과 같이 절대적인 위치에 둘 수 있습니다 어떤 기준으로 절대적이냐면, 특정 부모에 대해 절대적으로 움직이게 됩니다. 부모중에 position이 relative,fixed,absolute가 하나라도 있다면 그 부모에 대해 절대적으로 움직입니다. 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position : relative를 부여하면 됩니다.

top-20이 쓰여진 박스에 absolute 속성을 주고 right : 30px을 주니 다른 박스들과 같은 위치에서 오른쪽으로 30px만큼 움직였습니다.absolute 속성을 사용하면 앞뒤나온 요소와 더 이상 상호작용을 하지않습니다.

(3)position : fixed

fixed 속성은 요소를 항상 고정된 위치에 배치할 수 있습니다.이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.

헤더를 만들어 고정시켜 보겠습니다. 코드펜에서 스크롤을 내리기위해 div박스도 더 만들어 보겠습니다.

위에 헤더가 고정되어있는게 보이시나요? position: fixed인 요소도 position: absolute인 요소와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않습니다.

display 속성

display 속성이란 화면을 배치하는 것을 도와주는 속성입니다 어떤 속성들이 있는지 알아봅시다!

(1)display : inline

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

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

inline 엘리먼트를 사용할 때 주의할 점은 width와 height 속성을 지정해도 무시됩니다! 왜냐하면 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있기 때문에 margin, padding 속성은 좌우 간격만 반영되고, 상하간격은 반영이 되지않습니다.

(2)display : inline-block

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

inline요소 일 때는 추가되지 않던 속성들이 inline-block 속성을 추가하니까 추가할 수 있게 되었습니다!

(3)display : block

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

inline 요소와는 달리 높이와 넓이를 설정할 수 있었고 엘리먼트 다음에 바로 줄바꿈이 들어가 div1 요소 다음줄에 h11 요소가 존재하는걸 볼 수 있습니다.

위에 나와있는 display 요소 이외에도 요즘 많이쓰이는 flex,none,inline-flex 등이 있는데 다음에 정리해보도록 하고 , 이 정보들로 레이아웃의 고수가 되어보도록하자~😄