[6주][4일][1~2th] HTML/CSS: 홈페이지 메뉴 만들기, 실습

★ 용어 정리

position:fixed; 그림 같은 것의 위치를 고정시키기(스크롤 했을 때 고정됨)

display: inline; <ul><li>사용시 한줄로 ㅉ구 늘려줌

display: none; 글자 안보이게

display: table; 테이블이 아닌 것을 테이블로 만들어라!

display: table-cell; <li>요놈들을 셀이 나눠지게 해라!

 

☆ 실습(1)

CSS

li{
 display: inline;
}
a{
 padding: 10px 50px;
 text-decoration: none;
 color:#fff;
}
ul{
 list-style-type:none;
 padding: 10px;
 background-color:#f00;
 text-align:center;
}
a:hover{
  background-color:#000;
}

바디

<ul>
<li><a href="#">Home</a>
<li><a href="#">About</a>
<li><a href="#">Sitemap</a>
<li><a href="#">BBS</a>
<li><a href="#">Help</a>
</ul>

 

 

☆ 실습(2)

CSS

a{
 padding: 10px 50px;
 text-decoration: none;
 color:#f00;
}
ul{
 padding:100px;
}
figure{
 float:left;
 margin-right:100px;
}
h2{
 width: 630px;
 height: 325px;
 background-image: url(images3/title_photoshop_design.PNG);
}
h1{
 display: none;
}

HTML

<h1><span>잘 팔리는 제품 디자인
포토샾으로 따라잡기</span></h1>
<h2></h2>
<figure>
<img alt="" src="images3/book_photoshop.gif">
</figure>
<ul>
<li><a href="#">Home</a>
<li><a href="#">About</a>
<li><a href="#">Sitemap</a>
<li><a href="#">BBS</a>
<li><a href="#">Help</a>
</ul>

 

 

☆ 실습(3)

CSS

#bookCon{
    display: table;
    width: 600px;
   }
   #bookCon dt, #bookCon dd{
    display: table-cell;
   }
   #bookCon dt{
    background-color:#f00;
   }
   #bookCon dd{
    background-color:#ff0;
   }
   ul{
    display: table;
    border-sapcing:10px;
   }
   li{
    text-align:center;
    width:100px;
    padding: 7px;
    display: table-cell;
    background-color: #ff0;
    border:1px solid #000;
   }
   *, body {
    font:12px "맑은 고딕",돋움,arial;
    margin:0px;
    padding:0px;
    }
   
   h1 {
    font-size:2em;
    color:#fff;
    text-align:center;
    margin:0px;
    padding:10px 15px;
    background-color:#666;
    width:100%;
    }
   #bookImg {
    padding-top:50px;
    text-align:center;
    }
   /* Layout */

HMTL

<h1>아이폰 프로그래밍 UIKit 핵심 바이블</h1>
  <div id="bookImg">
   <img src="images3/book_mobile1.gif" width="135" height="168" alt="아이폰 프로그래밍 UIKit 핵심 바이블" />
  </div>
  <ul id="bookInfo">
   <li>저 자 토코로 유타</li> 
   <li>역 자  김은철 , 유세라</li> 
   <li>페이지 512 페이지</li>
   <li>ISBN 978-89-5674-530-5 </li>
  </ul>
  <dl id="bookCon">
   <dt>인터페이스 빌더는 필수인가?</dt>
   <dd>대답은 물론 &quot;아니다&quot;이다. 이 책에서는 기본적으로 인터페이스 빌더를 사용하지 않고 진행한다. 인터페이스 빌더를 사용하면 은폐되는 부분이 생기기 때문이다. 이 책은 UIKit의 내용에 초점을 맞춰 설명하고 있다. UIKit의 기능이나 움직임이 블랙박스화 된 상태로는 내용을 정확하게 알 수 없기 때문이다. 뒤집어 말하면 이 책의 내용을 이해하는 것은 인터페이스 빌더에서 블랙박스화 되어 있는 부분을 배우는 것이라고 할 수 있다.</dd>
   <dt>UIKit이란?</dt>
   <dd>UIKit는 모든 iPhone/iPad 애플리케이션의 핵심이 되는 프레임워크이다. UIKit는 애플리케이션의 기본 부분을 제어하고 터치 판넬 조작이나 모션 등 사용자 조작을 감지하며, 화면 표시를 하기 위한 각종 기능을 제공한다. UIKit 지식을 잘 이해한다면 보다 능률이 높고 결함이 적은 iPhone/iPad 애플리케이션을 개발할 수 있게 될 것이다.</dd>
  </dl>