<!DOCTYPE html>

<html>

<head>

<style>

div.a { border: 5px solid red; float:left; width: 900px; background-color: red;}

p.ap { text-align: center;}

p.bp { text-align: center; color: white;}


li { list-style-type: none; color: white; relative; left: -20px;}


div.b { border: 5px solid blue; float:left; height: 500px; background-color: blue;}

div.c { border: 5px solid pink; float:left; width: 780px; height: 500px; background-color: pink;} 

div.d { border: 5px solid yellow; clear:left; background-color: yellow;}

</style>

</head>

<body>


<div class="a">

<p class="ap"> 홈페이지 상단 부분 입니다. </p>

</div>


<div class="b">

<p class="bp"> $메뉴$ </p>

<ul>

 <li>공지사항</li>

 <li>출석체크</li>

 <li>자게시판</li>

</div>


<div class="c">

<p> 여긴 내용 부분 입니다. </p>

</div>


<div class="d">

<p> 여기는 가장 홈페이지 아랫부분 입니다. </p>

</div>


</body>

</html>




홈페이지 칸위치? 메뉴 위치라고 해야하나 이런식으로 위치잡는거 맞나요? 웹고수분들은 어텋게 하는지좀 알려주세요!