1. Display
가. block
한줄전체를 다 차지 하기때문에 한줄에 하나씩 배치된다.
width를 부여하면 해당width만큼 차지하게 만들수있다.
대표적인 태그
<div>
<p>
<h1>
<div>안녕하세요</div><div>안녕하세요</div>->
나. inline
자기 컨텐츠 만큼만 차지하기 때문에 다른 요소와 같이 한줄에 표시된다.
줄바꿈없이 옆으로 나란히 배치 된다.
주의사항 : width,height 및 상하조절 적용🙅
대표적인 태그
<span>
<a>
<em>
<span>안녕하세요</span><span>안녕하세요</span>-> 안녕하세요안녕하세요
다. inline-block
inline 특징처럼 한줄에 배치가 된다.
width,heiht 및 상하간격 조절 🙆
2. position
가. static
기본값이다.
나. relative
상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다.
다. fixed
fixed된 엘리먼트는 viewport에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 항상 같은 곳에 위치한다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.
라. absolute
absolute는 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 부모 엘리먼트에 상대적으로 위치가 지정된다.
절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.
3. float
float을 사용하는 이유는 블럭요소들을 가로로 배치하기 위해서 사용한다.
float 사용 후 문제 발생 시 해결 방법
1. 상속되는속되는 속성은 clear 속성으로 해제 시켜줄 수 있다.
2. 부모 태그에 overflow: hidden; 을 준다.
