1020 레이아웃을 위한 css의 margin, padding, float 속성

이거 진짜 ㄹㅇ 어렵당 ^.^ 

난 심지어 이 수업을 

똑같은 선생님한테 두 번째 듣는 것인데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

혁주쌤 제송.. ㅎ

욜시미 할게유.. 

 

 

* 여백 속성

1. margin

2. padding 

 

 

* margin

1. 바깥쪽 여백(위치 조정)

2. margin-top / margin-right / margin-bottom / margin-left

3. margin : top right bottom left

   margin : top right bottom (same right)

   margin : top/bottom right/left

   margin: all

4. margin : auto

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

   (블럭 요소 가운데 정렬할 때 사용)

   = margin : 0 auto 

5. html4 이후로는(아마도) center라는 속성 대신 margin이 한다.    

   

   

* padding

1. 안쪽 여백(크기가 변한다)

2. margin 사용법과 동일 

3. 웹이 크기 변화를 인식한다.

   (border도 그렇다.)

 

 

* text-align : center

인라인 요소 가운데 정렬 

 

 

개발자 도구 

마우스 오른쪽 버튼을 누르거나 

ctrl+shift+I 누르면 개발자 도구를 열 수 있다.

개발자 도구의 맨 왼쪽 elements 탭을 자주 사용하게 될텐데

능력이 많이 생기면 생길 수록

다양한 탭을 사용하게 될 것이라함. 

 

 

저 개발자 도구가 편리한 이유는 

코딩된 부분을 클릭하면

어디인지 페이지 내에서

확인을 바로 시켜주기 때문이다. 

element탭 맨 왼쪽의 화살표 도구를 클릭하면

반대로도 사용이 가능하다. 

(화면을 눌렀을 때 해당 코딩이 어떻게 돼있는지)

 

 

★★★★★

이거 좀 헷갈리는데 잘 알아둘 필요가 있다!!!

완전 중요빤쓰

1) div.txt{}
div의 class가 txt인 거고
<div class="txt"><p>와라라라라라</p></div>   

2) div .txt {}
div 안에 class가 txt인 곳에 적용
예를 들어서 아래처럼 p class가
div에도 있고 main에도 있다면
"div 안에 있는 p에게 적용해줘~" 할 때
div .txt{}를 사용하면 되는 것.
 
- <div><p class="txt">와랄라라라</p></div>
- <main><p class="txt"></p></main>   

 

 

 

* float

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

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

3. none(float의 기본값: 기본값을 아는 건 매우 중요함. 반응형을 만들 때!) / left / right

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

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

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

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

8. 자식 요소의 길이합이 부모 요소의 길이보다 길면

   부모 요소의 길이를 초과하는 요소들이 아래쪽으로 이동

   (태그 작성 순)

 

 

따라서

float은 언제 쓰느냐.

header를 맨 위에 두고

lnb를 왼쪽에, content를 오른쪽에

footer를 맨 아랫쪽에 둘 때 사용한다.

 

그래서 박스를 만들어보면~

 

웹 페이지에 이렇게 뜨는데,

모두 수직 정렬돼 있는 것을 확인할 수 있다. 

 

 

우리가 원하는 이상적인 레이아웃의 모양은

이런 것이기 때문에 

이제 float 속성을 이용해서

어떻게 만들 수 있는지 확인을 해야한다.

 

 

이렇게 lnb와 content 영역에 float:left를 주고

footer에도 마찬가지로 float:left를 주면 

우리가 원하는 모양을 확인할 수 있다.

 

 

ㅠㅠ

하지만 이 방식의 단점은

화면이 커지면 자연스럽게 lnb와 content의

영역으로 이동한다는 것이다.

(관련 내용은 앞선 float의 특징 8번에 있다.)

 

따라서 추가로 해줘야 하는 것이 있는데..

그것이 바로 clear다. 

여기서부터 매우 어려워지고 복잡해짐스 주의 ㅠ

 

 

 

* clear

1. float 속성 해제

2. left / right / both

clear를 사용하는 이유 

1) 부모의 크기가 바뀌어도 올라가지 않음

2) 다음 태그가 생겨도 올라가지 않음

3) 세 번째 이유 이거 뭐였지 

 

여기 이거 잘못됨.... 수정해야됨.. ㅠㅡㅠ 

이거 gist 수정해야됨

#main{width:800px; margin:auto; height:???} ★★★

div로 한번 더 묶고 class를 줘서(main으로)

float을 신경쓰지 않게 하는 방법이다. 

대신 반드시 높이 정해줘야 한다!!!!!!!!!!!!!

그래서 사용하기 귀찮다.

왜냐하면 콘텐츠 내용이 늘어나면 

또 다시 새로 높이를 적용해줘야 하기 때무네..

 

 

★★ p(position):A(absolute)/F(fixed) > float > margin:A(auto(+width 또는 +p:relative static))

   

 

우선순위 중요

똑같은 속성이 있으면 무조건 나중 것이 적용된다.

margin auto 해놔도 뒤에 margin-top:50px 있으면 뒤에 것이 적용됨. 

따라서 똑같은 효과를 margin:50px auto 0

 

 

 

*가변형 높이값 : 게시판 내용 보기에서 씀 

★ main이 가변적으로 대응할 수 있도록 만드는 방법은?

자식 요소가 float이 되면 자식요소 인식하지 못하는데,

float 된 자식요소를 인식할 수 있게 만드는 방법

~~부모의 높이가 자동으로 변하도록~~ 

세가지 방법이 있다. 

 

 

나 이거 다시 정리하려니까 왜 모르겠지.. ^^

1) 아무것도 없는 빈 박스를 만든다.

(장점: 호환성 세 가지 방법 중에 제일 높음 / 단점: 내용상 필요 없는 태그가 추가됨) 

 

 

 

2) after{content} 가상의 콘텐츠를 만드는 법

속성 inline이기 때문에 block을 만들어줌. (단점: 호환성 낮음)

가상클래스(pseudo class) #다음:  

 

 

 

3) 자식요소가 반드시 float, 부모요소에 height 속성이 없어야 함

두 가지 조건을 만족하면 overflow 뜻이 바뀜

넘치는 부분 감춰가 아니라 float된 애들 읽어로 뜻이 바뀜 

기능이 바뀌는 css속성 거의 없지만 얘는 이렇다. 

 

footer는 main이 생긴 이후에 main에게 영향을 받는다

그 이유는 lnb와 content가 div로 묶이면서 
div=main과 형제관계가 됐기 때문이다