CSS 레이아웃 block, inline, display, position

1. block , inline 요소
2. display
3. position

 

1. block , inline 요소

HTML은 block 요소와 inline 요소로 나눌수있다. 간단하게 생각하면 block요소는 콘텐츠의 크기에 상관없이 한줄을 다 차지하는거고, inline 요소는 콘텐츠의 크기만큼의 너비를 차지하는 것이다.

블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.
콘텐츠 모델 : 일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다.
기본 서식 : 기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.

 

2. display

display : CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

display: block; display: inline; display: inline-block; display: flex; display: inline-flex; display: grid; display: inline-grid; display: flow-root; /* box generation */ display: none; display: contents;

block : 요소는 블록 요소 상자를 생성하여 일반 흐름에 있을 때 요소 앞뒤에 줄 바꿈을 생성합니다.
inline : 요소는 앞이나 뒤에 줄 바꿈을 생성하지 않는 하나 이상의 인라인 요소 상자를 생성합니다. 정상적인 흐름에서 공백이 있는 경우 다음 요소는 같은 줄에 있습니다. (컨텐츠 자체만을 꾸며줌, 내부의 물건의 크기에 )
inline-block : (인라인 레벨로 사용가능함, 컨텐츠의 크기에는 상관없이 지정한 block 크기??)
flex : 요소는 블록 요소처럼 작동하고 flexbox 모델 에 따라 내용을 배치합니다 .

3. position

속성 위치 , 요소의 최종 위치를 결정

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

static :문서의 정상적인 흐름에 따라 배치, 기본값
relative : 요소는 문서의 정상적인 흐름에 따라 배치하고 오프셋 자체에 대해 의 값에 기초하여 top, right, bottom, 및 left. 오프셋은 다른 요소의 위치에 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소에 제공된 공간은 위치가 인 경우와 동일 static합니다. ( 상대적으로 ??)
absolute : 요소가 일반 문서 흐름에서 제거되고 페이지 레이아웃에서 요소를 위한 공간이 생성되지 않는다. 가장 가까운 위치에 있는 조상을 기준으로 위치가 지정, 그렇지않으면 초기 포함 블록을 기준으로 배치
fixed : 요소가 일반 문서 흐름에서 제거되고 페이지 레이아웃에서 요소를 위한 공간이 생성되지 않습니다. 그것은 초기 상대 위치 함유 블록 에 의해 설정된 뷰포트 조상 중 하나가있을 때를 제외하고 transform, perspective또는 filter이외의 다른 특성 세트 none(참조를CSS 변환 사양), 이 경우 해당 조상은 포함하는 블록으로 동작합니다. (브라우저와 불일치가 존재하는 것으로 perspective하고 filter블록 형성을 함유 기여.)를 최종 위치 값에 의해 결정되고 top, right, bottom및 left. (윈도우안에서 움직이는것 ??)
sticky : 배치후 스크롤링 해도 고정되어 있음


https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements

블록 레벨 요소 - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN

https://youtu.be/jWh3IbgMUPI