20220228_HTML/CSS : display, float

 

<style>
	display:block; - 태그를 블록 속성으로 전환(줄바꿈)
	display:inline; - 태그를 인라인 속성으로 전환(가로나열)
	display:inline-block; - 태그를 인라인요소로 만들어주지만(가로나열) 블록요소 옵션을 쓸 수 있도록 허용
	display:none; - 해당요소는 화면에 노출시키지 않음
</style>

 

블록 속성인 li태그를 inline으로 전환하여 가로로 나열

 

인라인 속성인 img를 block으로 전환하여 속성값 부여하고, 세로로 나열

 

display:inline-block으로 네개의 <ul> 를 가로 한 줄로 배치하면서 속성 값을 줘보았다.

 

1) display:inline-block으로 블록을 인라인으로 바꾸거나 2)줄바꿈이 일어나는 block 박스에 float 속성을 지정하면 해당 블록의 좌측 혹은 우측 주변으로 다른 요소들이 한줄에 올 수 있게 된다.

 

display 대신 float: left로 li태그를 한 줄로 나열하였다.

 

float 속성의 기본값은 none이며 해당 요소가 오른쪽에 오느냐 그리고 왼쪽에 오느냐에 따라서 right(한줄로 오른쪽부터 정렬) 와 left (한줄로 왼쪽부터 정렬)값으로 설정할 수 있다. 

float: left; (바디에 1튤립-2제비꽃-3해바라기-4호박꽃 순으로 작성) =&amp;amp;amp;amp;gt; 1,2,3,4순으로 출력 "왼쪽부터 차례로 정렬"

float: right;&amp;amp;amp;amp;nbsp;(바디에 1튤립-2제비꽃-3해바라기-4호박꽃 순으로 작성) =&amp;amp;amp;amp;gt; 4,3,2,1순으로 출력 "오른쪽부터 차례로 정렬"

 

원하지 않는 요소들까지 해당 줄로 올라오는 것을 막으려면 clear 속성을 통해 float 속성을 정리해야 한다. 그러면 clear 속성이 지정된 요소를 포함하여 후속 요소들은 float 효과에서 벗어나게 된다. clear는 left(float:left 속성 정리), right(flaot:right 속성 정리), both(모든 값을 정리)가 있다.

 

세번째 div 박스에 clear:both 적용하기 전

세번째 div 박스에 clear:both 적용 후