이럴경우 doctype 설정하고 웹표준은 어떻게 하나요? 정보
이럴경우 doctype 설정하고 웹표준은 어떻게 하나요?
본문
간만에 공부하고 있습니다.
이번주가 앞으로 두달여간 유일하게 남는 시간일 것 같아서요..
요렇게 세개의 컬럼으로 된 레이아웃을 공부하는데요..
요게 지금 가운데 정렬입니다.
저번에 행님님하고 DreamT 님 덕분에
css 에서 margin:0 auto; 를 이용해서 가운데 하나의 컬럼을 가운데 정렬하는 방법을 배웠는데
요렇게 세개를 한번에 순서대로 가운데 정렬하려면 어떻게 해야하나요?
추천
0
0
댓글 13개
한번 감싸주세요. 감싸주는 div에는 margin:0 auto;를 넣으셔야겠죠.
세개를 하나로 다시 감싸고 margin:0 auto; 로 처리하라는 말씀이시죠?
세개는 일반적으로 지정하듯 div 세개로 처리하구요?
세개는 일반적으로 지정하듯 div 세개로 처리하구요?
감싸주는 div가 부모객체가 되겠죠.
그림으로 보면 이미 좌, 우, 센터로 잘 나누어져 보이구요.
감싸주는 div만 margin:0 auto;이렇게 넣으셔도 됩니다.
네이버 웹표준 가이드를 보시면 금세 이해하실거에요.
그림으로 보면 이미 좌, 우, 센터로 잘 나누어져 보이구요.
감싸주는 div만 margin:0 auto;이렇게 넣으셔도 됩니다.
네이버 웹표준 가이드를 보시면 금세 이해하실거에요.
아~ 제가 그림을 잘못 그렸네여
테두리를 안넣었더니 배경이 그냥 흰색으로 ㅎㅎ
수정한 그림처럼 가운데 세 컬럼이 가운데 정렬이 되게됩니다.
일현님 오해하게해서 죄송합니다 ㅎㅎ
테두리를 안넣었더니 배경이 그냥 흰색으로 ㅎㅎ
수정한 그림처럼 가운데 세 컬럼이 가운데 정렬이 되게됩니다.
일현님 오해하게해서 죄송합니다 ㅎㅎ
아..그럼 아직 좌, 센터, 우이렇게 나누어진 것은 아니고 이전에 배우셨다는 내용이 하나의 div를 가운데 정렬하는 방법을 배우셨다는 말씀이었군요.
보통은 스타일 속성에 "float:left;" "float:right;"로 좌,와 우,로 나누게 되는데...음...
설명을 다 드리기에는 뭐하고 "네이버 웹표준 가이드"를 보시면 답이 있습니다. 것도 눈에 확! 들어 온답니다.
보통은 스타일 속성에 "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>
-----------------
이정도로 하면 됩니다.
이런방법 말고도..
아주 다양한 방법으로 저런 레이아웃을 표현할수 있습니다.
-------------------------
<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>
-----------------
이정도로 하면 됩니다.
이런방법 말고도..
아주 다양한 방법으로 저런 레이아웃을 표현할수 있습니다.
바디에 저렇게 센터정열 하는 방법이 웹표준에 적합했던가요?
흠.. 일단 inner style 로 정의했지만..
웹표준에는 어긋나지 않는걸로 알고 있습니다.
제가 잘못알고 있다면 알려주세용.. ㅎㅎ
바디에 센터정렬 하지 않으면 다시 wrapper를 하나더 만들어서
센터정렬 해야 하는데..
모양세가 좀 안좋아서요.. ㅎㅎ
wrapper에서는 다시 좌측정렬로 해야 하지만..
여기선 적지 않았어요.. ㅎㅎ
웹표준에는 어긋나지 않는걸로 알고 있습니다.
제가 잘못알고 있다면 알려주세용.. ㅎㅎ
바디에 센터정렬 하지 않으면 다시 wrapper를 하나더 만들어서
센터정렬 해야 하는데..
모양세가 좀 안좋아서요.. ㅎㅎ
wrapper에서는 다시 좌측정렬로 해야 하지만..
여기선 적지 않았어요.. ㅎㅎ
제가 띄엄띄엄 하는 스타일이라 아마도 너구리님이 맞을 듯 싶어요.
저도 저렇게 쓰다가 어디서 봤던건지 웹표준에 어긋난다라고
생각을 해서 안쓰고 있었네요. 이제 써야죠.ㅎㅎㅎ
저도 저렇게 쓰다가 어디서 봤던건지 웹표준에 어긋난다라고
생각을 해서 안쓰고 있었네요. 이제 써야죠.ㅎㅎㅎ
높이가 100% 아니라면
-------------------------
<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에 너비를 주는걸 깜빡했네요.. ㅋㅋ
-------------------------
<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>
<!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>
