'홈페이지레이아웃'에 해당되는 글 2건

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를 작성해서 사용하시고

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

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

div

이번 시간에는 div태그에 대해서 포스팅합니다..

<div>태그는 레이어를 만들때 주로 사용 한답니다. html코드를 작성할때 사용하고 CSS로 그 효과를 입히게 되죠.

또한 레이아웃을 잡을때도 사용합니다. header, container, content, footer 등등 이요. .

이러한 것들이 있는데 레이아웃 한번 보도록 하겠습니다.

div태그를 이용하여 위와 같은 레이아웃을 만듭니다.

하지만 div태그만으로는 위의 레이아웃은 만들어지지 않고요. 스타일 시트라는 것을 먹여야 합니다.

위의 레이아웃의 소스는 아래와 같습니다.

단 div태그와 p태그가 있을 뿐입니다. 저기에 스타일시트를 적용하면 저렇게 레이아웃을 짠다든지 할 수 있습니다.

p태그에 대해서 설명드리면

p 태그는 텍스트를 쓰는 태그라고 생각 하시면 됩니다.

하나로 묶고 싶은 텍스트가 있다면 <p> 안녕하세요 </p> 이런식으로 쓰시면 됩니다.

유용하게 사용하시기 바랍니다.