[CSS] 레이아웃(display, visibility, float, clear, position )

##1. display 속성

요소의 렌더링 박스 유형을 결정하는 속성 (기본값: 요소마다 상이함)

 

< 속성 값 >

none	요소가 렌더링 되지 않음
inline	inline level 요소처럼 렌더링
block	block level 요소처럼 렌더링
inline-block	inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다

• 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재
• inline level 요소 사이의 공백과 개행 처리: lnline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들임.
• 따라서 inline과 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가진다.

 

display와 box model의 관계

display	width	height	margin	padding	border
block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ
inline	X	X	좌/우	ㅇ(설명)	ㅇ(설명)
inline-block	ㅇ	ㅇ	ㅇ	ㅇ	ㅇ

block은 한행을 모두 차지함.

inline-block은 같은행에 여러가를 차지하나 인라인 개행하지 않으면 띄어쓰기가 붙음(개행시 여백이 나타남, 4px)

inline의 경우 width와height값은 적용이 되지만 영향은 안 받음

 

---

##2. visibility

요소를 어떻게 숨길 것인지 결정하는 것

 

< 속성 값 >

visible	화면에 표시
hidden	화면에 표시되지 않음(박스영역 유지, 공간은 차지함)
collapse	셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)

 

display: none과 차이점

• display: none -> 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
• visibility: hidden -> 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

---

##3. float

 

• 요소를 보통의 흐름에서 벗어나 띄워지게 함
• 주변 택스트나 인라인요소가 주위를 감싸는 특징이 있음
• 대부분 요소의 display 값을 block으로 변경함 (display 값 변경 예외: inline-table, flex 등)
• float을 해제하려면 float: none 처리

 

---

##4. clear

clear: float 속성을 통해 태그를 부유시킨 후 문서의 흐름을 중간에서 제거하기 위해 사용

 

none	요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음
left	요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨
right	요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨
both	요소가 지난 left/right 부동체를 해제하기 위해 아래로 이동됨

 

💡그렇다면, clear는 어디에 주어야 하는지?

형제요소의 마지막 형제에 clear: both를 적용시켜 흐름을 끊어주어야 함.

또한, 형제의 부모에게 overflow:hidden을 통해 정확한 영역을 주어야 한다.

 

clear태그를 삽입해야 하는 불편함이 있어 가상클래스 선택자를 이용하면 불편함을 해결할 수 있다.

clearfix::after: {
	   content: "";
 	   display: block;
 	   clear: both;
}

---

##5. position & offset

position: 요소의 위치를 원하는 곳으로 이동시킬 때 사용

static(기본값)	부모-자식간 만들어진 부모를 따라 이동하지만 offset값은 적용되지 않는다. *부모에 의한 위치는 절대적이므로 자식 위치 변경되지 않음
relative	부모를 기준으로 offset값 이동(종속됨)
absolute	*자식의 offset값 지정하지 않을 경우 : 부모의 위치 기준으로 이동 *자식의 offset값 지정시 : html 기준으로 이동 📌단 자식에 absolute 지정시 부모와 손절. 크기지정이 어려워져서 콘텐츠 영역 만큼만 사용하고 따로 크기를 지정해줘야 함 ------------------------------------------------------------------------------------------------------- 조상 또는 부모에 relative가 있으면 자식은 조상, 부모를 따라감. 부모가 absolute면 자식은 부모를 기준으로 함
fixed	offset값 지정하지 않으면 absolute와 마찬가지로 부모와 손절함. 부모나 조상의 position값에 영향받지 않는다. (스크롤을 내리면 브라우저를 따라온다)

흐름순행: static, relative

흐름역행: absolute, fixed

 

 

---

참고자료

 

https://developer.mozilla.org/ko/docs/Web/CSS/clear

https://saimplay.tistory.com/97