[CSS] Display, Float, Clear, 공간 디폴트 세팅(복습 필요)

display

... .특정 요소의 css 괄호 안에서

block과 inline의 요소의 성격을 바꾸거나 합칠 때 사용한다!

속성값으로는 3개(inline, block, inline-block)이 있다. 

• inline: 인라인 속성 부여
• block: 블록 속성 부여
• inline-block: width, height 설정 가능해짐, 네비게이션 버튼 만들 때 많이 사용된다. 

---

float

 

... .특정 요소의 css 괄호 안에서

선택된 요소를 왼쪽 끝/오른쪽 끝에서부터 정렬시킨다. 

말 그대로 선택자를 띄워서 레이어층을 만드는 것. 

 

특징:

1) float를 사용한 부모의 영향을 받아서 왼쪽/오른쪽 끝이 결정된다 

=감싸고 있는 부모의 크기 안에서만 왔다갔다한다.

=(float를 사용한)자식들보다 부모의 위드값이 더 작으면 레이아웃이 틀어진다.

=부모 크기보다 크거나 같아야 한다.

 

2)연속해서 쓰면 쌓인다. (왼쪽/오른쪽에서부터 차곡차곡)

(짝꿍: clear)

 

레이아웃에 영향을 미치는 속성 - float를 다시 따라서 해보자!

 

---

clear

 

float를 사용하면 그 다음에 오는 애들은 띄워진 레이어층 아래에 배치가 된다 (=겹친다.)

그러니까 이 float를 마지막으로 사용한 태그 바로 다음 태그에 clear를 넣어서 꺼야 함.

보통 clear의 속성은 both값만 사용한다.

(짝꿍: float)

---

브라우저와 공간 사이의 공백 제거하기 (세팅값!)

 

<style>

html, body{ margin:0; padding:0 } /* 아니면 아래 */
* { margin:0; padding:0;}

</style>

 

html과 body태그도 기본적으로 margin과 padding 값을 가지므로 초기화를 해줘야 한다. (디폴트!)

 

[1] 선택하는 방법: 

 1) html body{

 2) * * 의 뜻 : 모든 html 태그를 선택해서 적용 하겠다.

 

[2] 값의 뜻

margin: 0/10 

padding:0/10

(상하좌우 모두 0/10 적용 하겠다.)