우선은 . 박스들의 나열되는 .. 박스에 속성을 먼저 알아보겟습니다
=======inline 속성===============
1>position:relative= 상대박스(밑으로 떨어지는 속성)
=======block속성===============
2>float:left,right=상대박스(옆으로 붙는다)쓰고난후엔 clear:both로 마무리 필수
3>position:absolute 절대박스(top,left,bottom,right 속성으로 움직인다)
4>inline 속성은 옆으로 붙는다, block 속성은 밑으로떨어진다,
위에 있는 속성들만 달달외우시고 그 속성을 파악하고 이해하는게 오늘에 강의는 중요합니다 ..
오늘은 , 네이버 레이아웃을 잡아 보도록 하겟습니다 ..
먼저 네이버는 5개의 커다란 div 박스로 이뤄 져 있습니다 .
구조는 이렇습니다 .
나열되는 박스이기때문에 relative 박스 이겟죠
그럼 css 는 어떻게 코딩될까요?
먼저 스타일을 선언하셔야겟죠?물론 선언후에 . 스타일을 따로 빼셔서 불러오시는건아시겟죠? ^^
div#schbox{
width:784px;
height:91px;
margin:0px;
padding:0px;
position:relative;
}
div#loginbox{
width:784px;
height:100px;
margin:0px;
padding:0px;
position:relative;
}
div#centeainer{
width:784px;
height:706px;
margin:0px;
padding:0px;
position:relative;
}
div#servicemap{
width:784px;
height:265px;
margin:0px;
padding:0px;
position:relative;
}
div#footer{
width:784px;
height:auto;
margin:0px;
padding:0px;
position:relative;
}
각각에 border 를 집어 넣어 보세요
그럼 구조는 나올겁니다 .
우선 연습해 보시고 눈치가 빠르신분들은 안에 내용까지도 . 연결해서 코딩하실수잇으실겁니다 ^^
그럼 오늘은 . 여기까지 .. 내일 2탄을 준비합니다^^
