6-4. CSS 레이아웃 만들기, display, float ⭐⭐

1. display 

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 

display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 때 사용한다. 

 

display 속성값 

1️⃣ block : 인라인 레벨 요소를 블록 레벨 요소로 만든다.

2️⃣ inline : 블록 레벨 요소를 인라인 레벨 요소로 만든다. 

3️⃣ inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. 

4️⃣ none : 해당 요소를 화면에 표시하지 않는다. 

 

 

2. float 

float 속성은 웹 요소를 문서 위에 떠 있게 만든다. 

 

float 속성값 

1️⃣ left : 해당 요소를 문서의 왼쪽에 배치한다. 

2️⃣ right : 해당 요소를 문서의 오른쪽에 배치한다. 

3️⃣ none : 기본값 

 

 

 

3. clear

float 속성을 사용하면 웹의 요소를 왼쪽이나 오른쪽에 배치하게 되고 그 다음에 넣는 요소에도 그 속성이 적용된다. 

이때 그 속성이 적용되지않길 원한다면 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그것이 clear이다. 

 

clear 속성값 

1️⃣ left : float :left를 해제한다. 

2️⃣ right : float:right를 해제한다. 

3️⃣ both : float:left와 float:right 를 해제한다.