1. position : relative, absolute, fixed
2. display : inline, inline-block, block
3. float
1. position : relative, absolute, fixed
🔑 position 속성을 활용하면 html 요소들의 위치를 지정할 수 있습니다.
🔑 static : default 속성 값이며, 특정한 위치가 지정되지 않습니다.
🔑 relative : 부여된 요소의 기존 위치를 기준으로 top, right, botton, left 등과 같은 속성을 부여해서 요소를 이동시킬 수 있습니다.
🔑 absolute : 부여된 요소의 부모 요소를 기준으로 위치합니다. relative와 마찬가지로 이동시킬 수 있습니다.
(단, 부모 요소의 position 값이 static 일 경우에는 유효하지 않습니다.)
🔑 fixed : viewport 기준으로 이동시킬 수 있습니다. 즉, 화면을 스크롤하여도 요소의 위치는 변경되지 않으며, 보이는 화면 기준으로 항상 같은 곳에 요소가 위치하게 됩니다.
2. display : inline, inline-block, block
🔑 html의 모든 요소들은 기본적으로 block 또는 inline 속성을 갖고 있습니다.
🔑 block : display 값이 block 인 요소들은 기본 너비가 body의 100% 로 설정되기 때문에 화면의 한 줄 전체를 차지합니다. 따라서 block 레벨 요소의 다음에 오는 요소는 자연스럽게 다음 줄에 위치하게 됩니다.
🔑 inline : inline 요소들은 요소 내 content의 길이만큼 너비를 차지합니다. 따라서 width 나 height 와 같은 속성으로 크기를 조절할 수 없습니다.
🔑 inline-block : 요소에 inline-block 속성을 부여할 경우, 그 요소는 block 과 inline 의 속성을 모두 가지게 됩니다. width 나 height 와 같은 속성으로 크기를 조절할 수 있는 점에서는 block 레벨 요소의 속성을 띄며, 한 줄에 여러 요소들을 함께 배치할 수 있다는 점에서는 inline 요소의 속성을 띕니다.
3. float
🔑 float 속성은 신문이나 잡지에서 종종 볼 수 있는 것과 같이, 이미지를 텍스트로 둘러싸게 하기 위한 방법으로 자주 사용됩니다.
🔑 float 의 default 값은 none 이며, left 나 right 값을 부여해서 문서의 왼쪽 또는 오른쪽에 요소를 떠있게 할 수 있습니다.
🔑 float 속성을 적용하고자 하는 요소를 다 배치한 후, 레이아웃을 원래대로 돌리기 위해서는 clear 속성을 사용합니다. float에 부여된 속성 값에 따라 left, right, both 등을 clear의 속성 값으로 부여할 수 있습니다.
"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"
원철님...👍