코딩공부)HTML_웹표준 12일차 margin/padding/float/clear2

레이아웃 직접적 상관

Position

Float

*여백 속성

1.margin(콘텐트 박스의 바깥쪽 여백) 박스의 위치가 바뀐다.

2.padding(콘텐트 박스의 안쪽 여백) 박스의 크기가 바뀐다.

Box Model

border와 padding은 width에 더해진다

padding-left:100(Content area:1000)padding-right:100 = 1200(브라우저가 박스를 처리하는 방법)

*margin

1.바깥쪽 여백(위치)

2.margin: top right bottom left

  margin: top right bottom left (same right)

  margin: top/bottom right/left

  margin:all

  margin:auto

3.margin:auto = margin 0 auto

 상하 여백 0,좌우 여백 동일

 (블록 요소 가운데 정렬)

 text-align:center

 인라인 요소 가운데 정렬

 - text-align : center와 차이는 -  div는 블록요소 text-align은 인라인요소

margin-top:10px

margin-right:20px

margin-bottom:30px

margin-left:40px

=margin:10px(위) 20px(오른쪽) 30px(아래) 40px(왼쪽) (12시 기준 시계방향)

값이 3개라면

= margin: 10px(위) 20px(오른쪽) 30px(아래) -> 왼쪽도 20px이라는 뜻

생략된 값과 같은 값

값이 2개라면

= margin: 10px(위,아래) 20px(오른쪽,왼쪽)

*padding

1. 안쪽 여백(크기)

2. margin 사용법과 동일

padding-top:10px

padding-right:20px

padding-bottom:30px

padding-left:40px

=padding: 10px(위) 20px(오른쪽) 30px(아래) 40px(왼쪽) (12시 기준 시계방향)

값이 3개라면

=padding: 10px(위) 20px(오른쪽) 30px(아래) -> 왼쪽도 20px이라는 뜻

 생략된 값과 같은 값

값이 2개라면

= padding:10px(위,아래) 20px(오른쪽,왼쪽)

*flaot

1. 선택된 요소를 위로 띄우는 속성

2. 위로 이동하면서 생긴 빈 자리에 다른 요소가 이동

3. left/right(~쪽으로 줄맞춰)

4. 요소의 레벨이 inline-block 형식으로 변경

5. 형제와 부모 관계의 요소들끼리만 적용

6. 수직 구조의 요소를 수평 구조로 변경

7. 수평으로 나열될 모든 요소에 flaot 속성 적용

(content가 lnb랑 나란히 있을려면 둘다 float:left를 줘야함

*옆으로 나란히

8.자식 요소의 길이합이 부모 요소의 길이보다 길면 부모 요소의 길이를 초과하는

요소들이 아래쪽으로 이동(태그 작성 순)

1.왼->오 순서 수직->수평(차례대로)

- 실습(레이아웃 배치)

- 영역이 아래로 나열되는 이유: 행 전체 사용하는 block요소라서

  margin은 -값 사용할 수 없음

*block 태그들은 기본적으로 수직배치

배열 맞출 때 - flaot 씀

flaot(상속) : 부모의 속성을 물려받는다 - 모든 속성에 다있음

부모가 가지고 있으면 똑 같은 걸로해

포함 단계가 1단계

(부모태그:부모요소)<div><div>(자식태그;자식요소)</div></div>

포함단계(이동 거리)가 2단계 이상이 넘어가면 부모-자식(x)

조상/후손

<div>

 <p>

  <a></a>

 </p>

</div>

<div></div>

<div> 형제요소

기본값은 none

flaot

div(flaot)

*clear

1.flaot 속성 해제

2.left/right/both*(거의 이것만씀)

flaot/clear의 차이

- float는 사이즈 줄이면 footer다시 올려짐

(공간이 없으니까 밑으로 떨어진거였다. 전체화면크기를 줄이면 옆으로 붙어버림)

-clear는 사이즈줄여도 위치가 같음

flaot준 lnb,content가 위로뜨고 그빈공간 전체를 차지함

다른 요소가 오더라도 위로 올라가지 않게함

css는 상생관계(효과의 종류보다 css속성들간의 관계를 이해해야 한다)

flaot는 margin:auto보다 우선순위가 높다.

float이 있으면 margin:auto사용 할 수 없다.

margin:auto는(+width)와 같이 써야함

inline요소는 위치와 크기를 가질수없다.

flaot는 높이값을 갖지 않는다(?)

자식요소 flaot상태

부모에 height가 없을 때

overflow는 기능이 바뀐다 -> 자식요소들의 기능을 인식해라

lnb,content에 margin:auto 적용안됨 -> flaot때문(flaot때문에 가운데 정렬 안됨 -> flaot쓰면 margin:auto못씀)