가변형 레이아웃을 만드는 세 가지 방법~~~

저번주에 배웠던 수업 내용 정리.

점점 어려워지고 있당..

이 정도는 아무것도 아니어야 하는데~~~~~

흑흑흑흑흑흑~~

 

오늘은 가변형 레이아웃 만드는 세 가지 방법을 정리해볼 것이다.

참고로 나는 이제 html 수업 들은지 1달 반쯤 되가는 초짜기 때문에

포스팅에 오류가 있을 수 있다 ^.^ 

 

내가 들은 수업 내용을 정리하기 위한 포스팅이며,

내 의문사항은 밑줄이 쳐져있댜..

 

저번 내용 정리에서 float의 한계에 대해 

선생님이 말씀하셨다 했는데

이것을 내가 완벽쓰하게 이해를 못했다 ㅠㅠ

 

일단 코드를 보면..

 

 

형제 박스<div id=main>한테 높이값을 주면

지금처럼 연두색 박스가 내려가는
제일 쉬운 방법이긴 하지만, 
고정형 레이아웃에서만 사용이 가능하다는 한계가 있다.

가변형에선 불가능하기 때문에

가변형 레이아웃을 따로 만들어서 사용하는 것이 좋다.

 

 

1. 그냥 빈 상자 만들기

그런데 css 줘야 되니까 class 만들기! 

 

근데 여기서 의문인 게 

#main{margin:0 auto;width:800px;height:300px8}★

왜 높이에 300px8인거임?????? ㅠㅠㅠㅠㅠ

그냥 400px면 되는 거 아닌가 왜 저렇게 썼었지 

기억이 나질 않아효..

 

8은 오타인 것으로 ^^^^^^!!!!!!!

내일 다시 수정하겠음 ㅋㅋㅋㅋㅋ

 

height를 줘버리면 겹쳐버림!!! height를 안 주면 footer 그냥 움직임 
빈박스 만들어서 clear:both 주는 게 제일 쉬운 방법.
하지만 내용상 필요하지 않은 태그를 쓰게 되는 것이 단점.

 

그럼 height를 준다는 건 footer에 주는 걸 의미하는 건가?

아님 main에 주는 걸 의미하는 건가?

늬앙스를 보면 main에 주는 걸 말하는 거 같은데

main에 없어도 딱히 상관은 없고

footer에 height가 없으면 사라진다.

근데 이건 당연한 거 아닌가.. ;ㅅ;

 

 

2. pseudo class 슈도 클래스, 가상 클래스

메인이 끝난 바로 다음에 #main:after{background:}  
또는 #footer:before을 만들어준다. 
위치상으로는 똑같지만 주체가 다름 주의. 
after는 태그 하나를 새로 만들어 쓰는 거랑 같음! 
새로운 태그를 하나로 새로 추가하는 것과 같은 개념이다.  
근데 새로 만들어진 건 인라인 태그!!!!!  
따라서 추가로 display:block 걔는 블록이야~~ 하고 알려줘야 한다!!

근데 이거 footer로 하는 방법은 뭐임??

#footer:before{content:"";display:block;clear:both}

이렇게 해도 가능하다는 거 아님??

외않되..... 

 

 

3. overflow:hidden 

1) 반드시 자식 요소가 float 상태

2) 부모 요소에 height 속성이 없는 경우 

 

float 된 애들 읽어로 내용이 바뀜!!!!!!!!!!!!!
'알아내'로 바뀜

 

 

.box1 li{} 앞에 있는 거 안쪽에 뒤에 꺼가 들어간다는 뜻이다.
line-height는 행간.  
자식들이 float이 돼있으면 부모는 모른다!!!

 

 

4. 추가로~ 반응형 웹은 이렇게 설계한다!

---

새로 배우는 내용이 많아서 

정리하고 이해하는 데 시간이 많이 걸렸다 ㅠㅠ

 

의문사항은 선생님이나 선배에게 물어보는 것으로..... 

아님 댓글로 남겨주셔도 환영.