<div> - block
<span> - inline
[ display : ? ]
inline
- 안에 있는 값의 크기에 맞춰진다.
- 배경색과 크기를 주어도 안에 내용이 없으면 표시가 안 됨
- 아무리 속성 값으로 크기를 주어도 무시 당함
inline-block
- 안에 있는 값과 상관 없이 우리가 준 값에 크기가 맞춰진다.
- 대신 한 줄에 여러 상자가 진열 될 수 있음
block
- 한 줄에 하나씩만 들어가는 상자이다.
[ Position : ? ]
static ( 기본값 )
- html에 정의된 순서대로 자연스럽게 브라우저에 띄워주는 역할을 함
relative
- 원래 있어야 하는 자리에서 지정한 값 만큼 움직여줘야한다.
absolute
- 아이템을 담고 있는 박스를 기준으로 움직인다.
ex) 아이템을 싸고 있는 박스가 컨테이너 라면 컨테이너를 기준으로 움직임
fixed
- window 안에서 움직임
- 그 자리에 계속 붙어 있음
sticky
- 원래 있어야 하는 자리에 있으면서 크롤링이 되어도 원래 그 자리에 붙어 있음
'개발일지 > Front' 카테고리의 다른 글
[html/css] FlexBox (0) | 2022.04.17 |
---|---|
[Bootstrap] input type text 가로 배치 문제 (0) | 2022.04.16 |
[ 부트스트랩 ] 그리드 크기에 따라 숨기기/보이기 (0) | 2022.04.10 |
부트스트랩 이용해서 회원가입 페이지 수정 (0) | 2021.11.21 |
input, list 예제(복습) (1) | 2021.11.03 |