div태그로 홈페이지 레이아웃 만들기

 

 

 

 

div태그로 홈페이지 레이아웃 만들기

웹디자인할 때 필수적으로 알아야 할 내요입니다.

처음 홈페이지의 구성도를 만들어서 작업을 해야하는데

이 때

최근 웹 표준 및 레이아웃 구현에 있어서 <table> 태그가 아닌 <div>가 필수적이라는 사실입니다. 기존의 table 태그의 속성 및 레이아웃 구성 방법은 완전히 이해하고 있지만,

div로 레이아웃을 할 때는 완전히 다르기 때문에 필히 아셔야 겠지요

 

 

 

위와 같은 레이아웃을 div 태그로 변환을 하고싶습니다. 정확히 어느부분을 <top>으로 구성하며 어느부분을 <section>으로 해야할지 알아봅니다.

특히 공지사항,이벤트,자유게시판의 상위 5개 레코드만 출력될 크기의 레이아웃 3개를 붙이는 것은 float 속성을 사용하는지도 알아봅니다.

 

<header>

<div id="logo">

Logo

</div>

<ul id="menu">

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

<li>메뉴4</li>

<li>메뉴5</li>

</ul>

</header>

<section>

<div id="banner">

</div>

<div id="widget_wrap">

<div class="widget">

Notice

</div>

<div class="widget">

Event

</div>

<div class="widget">

Freeboard

</div>

</div>

<div id="sub_banner_1">

Sub Banner 1

</div>

<div id="popular_goods">

Popular Goods

</div>

<div id="sub_banner_1">

Sub Banner 2

</div>

</scection>

<footer>

</footer>

 

해당 레이아웃과 HTML 코드에 맞게 CSS를 작성해서 사용하시고

안에 들어가는 내용들은 원하는 디자인에 맞게 기입하여 작업하시면 될 것같습니다.

 

 

 

 

직장을 다니면서 투잡 ( 재택알바 / 부업 )으로 월급만큼 수익을 얻을 수 있는 곳을 소개합니다.