Display
Block의 대표
div,p,h1,
header,footer,li,table- 한 줄에 한 개
Inline의 대표span,a,img- 한 줄에 여러개
Inline-block의 대표button,select,img
inline 요소를 가진 span을 block 요소를 가진 p 태그처럼 바꾸고 싶다면? CSS 요소를 통해 얼마든지 성질을 바꿀 수 있다!
-
display : block
다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지. -
display : inline
전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.
❗️ 콘텐츠 크기만큼 맞춰 정렬되기 때문에
width, height 속성을 지정해도 무시된다. padding 또한 좌우간격만 반영, 상하간격은 무시됨 -
display : inline-block
inline처럼 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, inline에서 불가능했던 width와 height이나 margin, padding 상하간격 지정이 가능
❗️ 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용 good!
Position
여러 상자를 담는 container가 있고 여러 box가 있다고 하면,
CSS에서 기본으로 지정한 값
- position : static;
이 container를 움직이게 하려면
-
position : relative; 로 바꿔줘야한다
❗️원래 있어야 하는 자리에서 상대적으로 옮겨짐 -
position : absolute;
아이템이 담겨있는 상자안에서 옮겨진다
An element with position: absolute; is ❗️positioned relative to the nearest positioned ancestor
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. -
position: fixed;
상자안에서 벗어나서 페이지상, window에서 움직인다. 웹페이지안에서 움직이게 됨 -
position : sticky;
원래 있는 자리에 있지만, scrolling 되어도 그대로 붙어있음
Float
요즘은 flexbox를 이용하여 web의 레이아웃을 더 많이 짜지만, 전에는 float이 web 레이아웃의 전체를 책임졌다!
예를 들어, 문서에 사진과 글이 함께 있을 때 사진을 왼쪽이나 오른쪽으로 띄어서 정렬하면서 전체 문서를 적절히 배치할 때 쓴다
https://css-tricks.com/wp-content/csstricks-uploads/web-text-wrap.png
float의 속성값으로는,
none- 띄우지 않음(기본값)
left-왼쪽에 띄움
right-오른쪽에 띄움
initial-기본값으로 설정
