이럴경우 doctype 설정하고 웹표준은 어떻게 하나요?
간만에 공부하고 있습니다.
이번주가 앞으로 두달여간 유일하게 남는 시간일 것 같아서요..
요렇게 세개의 컬럼으로 된 레이아웃을 공부하는데요..
요게 지금 가운데 정렬입니다.
저번에 행님님하고 DreamT 님 덕분에
css 에서 margin:0 auto; 를 이용해서 가운데 하나의 컬럼을 가운데 정렬하는 방법을 배웠는데
요렇게 세개를 한번에 순서대로 가운데 정렬하려면 어떻게 해야하나요?
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 13개
세개는 일반적으로 지정하듯 div 세개로 처리하구요?
그림으로 보면 이미 좌, 우, 센터로 잘 나누어져 보이구요.
감싸주는 div만 margin:0 auto;이렇게 넣으셔도 됩니다.
네이버 웹표준 가이드를 보시면 금세 이해하실거에요.
테두리를 안넣었더니 배경이 그냥 흰색으로 ㅎㅎ
수정한 그림처럼 가운데 세 컬럼이 가운데 정렬이 되게됩니다.
일현님 오해하게해서 죄송합니다 ㅎㅎ
보통은 스타일 속성에 "float:left;" "float:right;"로 좌,와 우,로 나누게 되는데...음...
설명을 다 드리기에는 뭐하고 "네이버 웹표준 가이드"를 보시면 답이 있습니다. 것도 눈에 확! 들어 온답니다.
신경써 주셔서 감사합니다 ㅎㅎ
-------------------------
<body style="text-align:center; height:100%;">
<div id="wrapper" style="margin:0px auto; height:100%;">
<div class="left" style="float:left;width:80px; height:100%;"></div>
<div class="right" style="float:right;width:80px; height:100%;"></div>
<div class="center" style="margin:0px 85px; height:100%;"></div>
</div>
</body>
-----------------
이정도로 하면 됩니다.
이런방법 말고도..
아주 다양한 방법으로 저런 레이아웃을 표현할수 있습니다.
웹표준에는 어긋나지 않는걸로 알고 있습니다.
제가 잘못알고 있다면 알려주세용.. ㅎㅎ
바디에 센터정렬 하지 않으면 다시 wrapper를 하나더 만들어서
센터정렬 해야 하는데..
모양세가 좀 안좋아서요.. ㅎㅎ
wrapper에서는 다시 좌측정렬로 해야 하지만..
여기선 적지 않았어요.. ㅎㅎ
저도 저렇게 쓰다가 어디서 봤던건지 웹표준에 어긋난다라고
생각을 해서 안쓰고 있었네요. 이제 써야죠.ㅎㅎㅎ
-------------------------
<body style="text-align:center">
<div id="wrapper" style="margin:0px auto; width:1100px;">
<div class="left" style="float:left;width:80px"></div>
<div class="right" style="float:right;width:80px"></div>
<div class="center" style="margin:0px 85px"></div>
</div>
</body>
-----------------
다시보니 wrapper에 너비를 주는걸 깜빡했네요.. ㅋㅋ
네이버 직원들도 여길 참조하면서 표준 작업을 한다고 하네요.
저는 봐도 이게 뭔가하고 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>제목입니다용~ ^-^ 에헷~!</title>
<style type="text/css">
* {margin:0; padding:0;} /* 이건 전체 엘리먼트의 마진과 패딩 0으로 만들기 */
#wrap {width:1090px; margin:0 auto;}
div.left {float:left; width:80px;}
div.center {float:left; width:930px;}
div.right {float:right; width:80px;}
</style>
</head>
<body>
<div id="wrap">
<div class="left">80px</div>
<div class="center">930px</div>
<div class="right">80px</div>
</div>
</body>
</html>