div 태그 레이 아웃
지난 시간에 table태그로 테이블 안에 테이블 넣기를 해 보았습니다.
그런데 태이블 태그로는 정확한 포지션을 잡기가 상당히 어렵 다는 걸 알게 되었습니다.
그래서 정확한 위치에 원하는 크기의 도표를 삽입 할수 있는 div태그로 레이 아웃을 만들어 보도록 합니다.
오늘도 마찬가지로 stylesheet로 ccs를 적용 하도록 하겠습니다.
스타일시트 부터 만들어 보겠습니다.
<style>
.wrap {
}
.1dv {
}
.2dv {
}
.3dv {
}
.4dv {
}
.5dv {
}
</style>
앗 실수 입니다.!
이렇게 숫자가 들어가는 클래스 네임 스타일링은 안된다는 걸 깜빡 했네요
아래 다시 스타일링 하도록 하고 html 코딩 부터 합니다.
html 코딩
<div class="wrap">
<div class="dva">홈페이지</div>
<div class="dvb">네비게이션</div>
<div class="dvc">본문</div>
<div class="advc">광고1</div>
<div class="bdvc">사이드바</div>
<div class="dvd">광고2</div>
<div class="dvf">광고3</div>
<div class="dvg"></div>
</div>
자 이렇게 div태그마다 클래스 를 지정 해 주었습니다.
이제 ccs를 적용 해 보겠습니다.
<styl>
.wrap {position:relative; left:0; top:10px;
border:2px solid green;
width:430px; height:580px; margin:0;
}/*wrap*/
.dva {position:absolute; left:0; top:0; padding-top:23px;border:1px solid green; font-size:16pt; text-align:center;width:430px; height:60px; margin:0; background:pink;
}/*홈*/
.dvb {position:absolute; left:0; top:60px; border:1px solid green; ; font-size:16pt; text-align:center;
width:430px; height:50px;; margin:0; background:yellow; padding-top:15px;
}/*네비*/
.dvc{position:absolute; left:0; top:110px; padding-top:200px;
border:1px solid green; ; font-size:16pt; color:red; text-align:center; width:300px; height:250px; margin:0; background:skyblue;
}/*본문*/
.advc{ position:absolute; left:0px; top:110px;
border:1px solid green; font-size:16pt; text-align:center;
width:150px; height:100px; background:orange; padding-top:40px;
}/*광고1*/
.bdvc{ position:absolute; left:300px; top:110px;
border:1px solid green; font-size:16pt; text-align:center; padding-top:70px;
width:130px; height:150px; background:pink;
}/*사이드바1*/
.dvd{ position :absolute; left:300px; top:250px;
border:1px solid green; font-size:16pt; text-align:center; padding-top:40px;
width:130px; height:150px; background:orange;
}/*광고2*/
.dvf{ position:absolute; left:0; top:510px;
border:1px solid green; font-size:16pt; text-align:center; padding-top:20px;
width:300px; height:50px; background:orange;
}/*광고3*/
.dvg{ position:absolute; left:300px; top:380px;
border:1px solid green; font-size:16pt; text-align:center; width:130px; height:200px; background:pink;
}/*사이드바2*/
</style>
결과 에서 보통 블로그의 홈 모양 처럼 포지션에 맞게 정확 하게 완성이 되었습니다.
그런데 모바일 에서 앱으로 열었을때 모양이 많이 달라 져 버린걸 알게 되었습니다.
만약 위 스타일 선언을 앱에 맞추게 되면 웹 상에 나타나는 레이 아웃이 틀어 져 버리 겠지요
만약 앱에 맞출경우 아래 처럼 이런 모양의 레이 아웃을 가지게 될것 입니다.
앱으로 봤을때는 아래의 레이 아웃이 정상 으로 보이게 되고 위측의 모양이 비정상으로 보이게 될것 입니다.
오래 동안 찿아 헤 멨는데 드디어 찿았습니다.
바로 이겁니다.
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
이제 다시 정상적으로 코딩을 해 봅니다.
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
</style>드디어 해결이 되었네요
위의 속성 (box-sizing: border-box) 은 레이어 사이즈의 padding 값과 margin 값에 영향을 받아 px값이 달라 지는 것 을 해결 해 주는 속성 이군요
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
</style>홈 페이지의 body부 전체 를 정의 해주는 *태그를 가진 이 스타일 정의를 시트 안에 지정 해 주면 웹과 앱에서 불일치 하든 문제를 해결 해 주게 됩니다.