W.A 저장소

1 Day : Layout을 정복해 볼까? 본문

Programing

1 Day : Layout을 정복해 볼까?

W.A 2010. 8. 7. 07:43


전체적인 Layout를 만들기 위해 노력중. 확실하게 해보자.
아직 한참 멀게만 느껴지는 Layout이지만 이번에 간단하게 연습한것을 올려보겠습니다.

index.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">
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<meta http-equiv="content-Type" content="text/html;charset=euc-kr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<title>아이폰 페이지 테스트</title>

<body>

<div id="backgroundpage">
<div id="header">
<span class="title">연습연습 소개</span>
</div>
<div id="contents">
 <div class="introduce">
  <div class="face">
  </div>
  <div class="intro">
   <ul>
    <li>성   명 : 신성철 </li>
    <li>전   공 : Android & Computer</li>
    <li>연락처 : 010-****-****</li>
    <li>이메일 : karyurid@gmail.com </li>
   </ul>
  </div>
 </div>
 <div class="introduce">
  <div class="face">
  </div>
  <div class="intro">
   <ul>
    <li>성   명 : 신성철 </li>
    <li>전   공 : Android & Computer</li>
    <li>연락처 : 010-****-****</li>
    <li>이메일 : karyurid@gmail.com </li>
   </ul>
  </div>
 </div>
 <div class="introduce">
  <div class="face">
  </div>
  <div class="intro">
   <ul>
    <li>성   명 : 신성철 </li>
    <li>전   공 : Android & Computer</li>
    <li>연락처 : 010-****-****</li>
    <li>이메일 : karyurid@gmail.com </li>   </ul>
  </div>
 </div>
</div>
<div id="footer">
<div class="redo"></div>
<div class="undo"></div>
<div class="home"></div>
</div>
</div>

</body>
</html>


style.css

#backgroundpage {
 background: url(/image/뒷배경1.png) no-repeat;
 height: 480px;
 width: 320px;
 border-style:double;
}

#contents {
 height: 360px; 
}

.introduce {
 background: url(/image/교수진소개말풍선.png) no-repeat;
 height: 103px;
 width:265px;
 margin: auto;
}

.face {
 float: left;
 background: url(/image/1111.png) no-repeat;
 height: 71px;
 width: 57px;
 margin: 15px;
}

.intro {
 font-size:10px;
 margin: 10px 0px 10px 20px;
 padding: 5px;
}

#footer {
 background: url(/image/맨밑bar.png) no-repeat;
 height: 50px;
 padding: 10px 50px 10px 50px;
}
.redo {
 background:url(/image/redo.png) no-repeat;
 height: 31px;
 width: 31px;
 float: left;
}
.undo {
 background:url(/image/undo.png) no-repeat;
 height: 31px;
 width: 31px;
 float: right;
}
.home {
 background:url(/image/home.png) no-repeat;
 height: 31px;
 width: 31px;
 /*margin: 0px 60px 0px 60px;*/
 margin: auto;
}

ul {
 list-style: none;
}

li {
 margin-bottom: 3px;
}
#header {
 background: url(/image/제목bar.png) no-repeat;
 height: 45px;
 margin-bottom: -5px;
 color: #ffffff;
 font-size: 25px;
 padding:10px 50px 10px 50px;
}



위의 것을 작성하면서 아 정말 웹에서의 레이아웃을 잡는다는것이 얼마나 힘든것인지를 알았습니다. 정말로 이것 작업하면서 마진과 패딩의 그 오묘함에 정말 깜짝 놀랐을 정도니 말입니다. 다음에 제가 이해한 마진과 패딩부분을 정리해서 블로깅 하도록 하겠습니다.

저작자표시

'Programing' 카테고리의 다른 글

서울대학교 교육 1일차.  (0) 2010.08.10
Android User Interface를 쉽게 만들자!!(DroidDraw)  (0) 2010.08.07
선택자.  (0) 2010.08.07
Eclipse + Aptana을 이용한 Web 개발환경 구축  (0) 2010.08.06
Layout 예제 1.  (0) 2010.08.04
'Programing' Related Articles more