1. position 속성 - relative, absolute, fixed
2. float property
3. inline, inline-block, block
1.Position property
Relative
position: relative는 그 자체로는 의미가 없고 조상태그가 absoulte태그 중심으로 상대적으로 위치를 이동시켜주는 것으로 top,bottom,left,right property 속성과 함께 사용하여 이동 시킬 수 있다.
별도로 속성 선언이 없을시 위치를 계산할때 기본값인 static의 원래 위치부터 계산한다.
부모 요소에 자연스럽게 연결하여 위치를 지정할 때 사용한다. 주로 poistion:absoulte 쓸 때 영역을 잡아주는 역활을 한다.
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}
absolute
position: top,bottom,left,right property을 통해 요소를 위치히 시킬 수 있습니다.
이때 기준이 되는 위치는 가장 가까운 부모 요소 or 조상요소 중 position:relative 요소가 기준이 됩니다. 즉, relative 부모가 있을 시, 부모인 relative가 absolute가 돌아다닐 수 있는 영역을 제한하고 그 기준으로 움직이면 된다고 이해하면 쉽다. 상위 요소를 기준으로 배치하는 방법이라고 요약 할 수 있다.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}
fixed
position: fixed 적용 할시 어떤 브라우저를 쓰더라도 페이지가 스크롤 되더라도 항상 같은 곳에 고정되어 위치한다. 즉, 스크린을 기준을로 배치하는 방법이라고 할 수 있다.
z-index
어느 객체가 앞으로 나오고 뒤로 나올지의 배치 순서를 결정하는 속성으로
z-index는 position(absoulte, reliatve, fixed)속성이 적용된 요소에서 사용할 수 있다.
2.Float property
float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로터리로서 레이아웃 설계하는 과정에서 많이 사용하는 속성이라고 할 수 있다. float 속성은 이전에 레이아웃을 잡는데 정말 많이 사용되던 속성입니다.
하지만 요즘에는 flex 속성을 기반으로 하여 레이아웃을 잡는 경우가 훨씬 많기 때문에 float은 자주 사용 되지 않고 있습니다. float는 사전 그대로 " 떠있다" 로서 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성이라고 할 수 있습니다.
즉, 기본적인 문서배치의 흐름에서 벗어나 요소의 모소리가 페이지 왼쪽 혹은 오른쪽으로 이동시키는 것이라고 할 수 있다.
3.inline, inline-block, block
inline
span 의 태그와 같이 content/text로 크기만큼 자리를 차지하고 한 라인에 붙는 특성이라고 할 수 있다.
block
block 속성은 한 줄을 점유하고 그 다음 속성은 다음 줄로 넘어가는 특성이라고 할 수 있다.
inline-block
inline의 특징과 block의 특징을 모두 가진 요소로서 , 줄바꿈을 이루어지지 않으며 block 처럼 width와 heigth를 지정가능하다. 만약, width와 heigth가 지정하지 않을 경우 , in-line 특성과 같이 컨텐츠만큼 영역을 잡는다.
