반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>나야나비즈니스</title>
</head>
<body>
<!-- div 태그는 쌍태그로 영역을 구분해준다. 위에서 아래로, 좌에서 우로 레이아웃의 영역을 구분하여 div태그를 사용한다. -->
<!-- 전체영역 : 큰 것부터 영역을 잡는다. -->
<div id="container"><!-- header, footer는 div랑 같은데 이름만 다른 태그, 주로 상단/하단에 쓰는 영역 태그 -->
<header>
<!-- nav가 div보다 먼저 들어가면 css 때 고생하므로 위에서 아래/좌에서 우의 순서대로 태그도 작성되어야 함 -->
<div class="logo">
<h1><a href="#"><img src="./img/logo.gif" alt="나야나비즈니스"></a></h1>
</div>
<nav><!--navigator 태그는 div 처럼 영역을 나누어 주는데, 그 안에 메뉴를 담는 게 navigator(줄여서 nav) 태그-->
<ul class="topMenu">
<li><a href="#"><img src="./img/t_m_home.gif" alt="home바로가기"></a></li>
<li><a href="#"><img src="./img/t_m_login.gif" alt="login바로가기"></a></li>
<li><a href="#"><img src="./img/t_m_join.gif" alt="join바로가기"></a></li>
<li><a href="#"><img src="./img/t_m_sitemap.gif" alt="sitemap바로가기"></a></li>
</ul>
<ul class="gnb"><!--gnb = global navigation bar-->
<li><a href="#">회사소개</a></li>
<li><a href="#">사업분야</a></li>
<li><a href="#">제품안내</a></li>
<li><a href="#">채용정보</a></li>
<li><a href="#">고객지원</a></li>
</ul>
</nav>
</header>
<div class="mainBanner">
<img src="./img/img_main.jpg" alt="고객과 함께 성장해온 1등 기업 나야존 메인배너 이미지">
</div>
<div class="contents">
<div>
<h2><img src="./img/m_tit_biz.gif" alt="비즈니스 인포"></h2>
<p><img src="./img/biz_img.gif" alt="#"></p>
<a href="#"><img src="./img/btn_view.gif" alt="#"></a>
</div>
<div>
<h2>
<img src="./img/m_tit_notice.gif" alt="공지사항 뉴스">
<a href="#">more</a>
</h2>
<ul>
<li><a href="#">notice1</a><span>2011-02-21</span></li>
<li><a href="#">notice2</a><span>2011-02-20</span></li>
<li><a href="#">notice3</a><span>2011-02-19</span></li>
<li><a href="#">notice4</a><span>2011-02-18</span></li>
</ul>
<p><img src="./img/biz_img.gif" alt="#"></p>
<a href="#"><img src="./img/btn_view.gif" alt="#"></a>
</div>
<div>
<h2><img src="./img/m_tit_quick.gif" alt="퀵메뉴"></h2>
<ul>
<li><a href="#"><img src="./img/q_m1.gif" alt="상담문의"></a></li>
<li><a href="#"><img src="./img/q_m2.gif" alt="채용정보"></a></li>
<li><a href="#"><img src="./img/q_m3.gif" alt="찾아오시는길"></a></li>
</ul>
</div>
</div>
<footer>
<div>
<h1><img src="./img/logo_foot.gif" alt="나야나비즈니스"></h1>
</div>
<div>
<ul>
<li><a href="#"><img src="./img/f_priv.gif" alt="개인정보취급방침"></a></li>
<li><a href="#"><img src="./img/f_guide.gif" alt="이용약관"></a></li>
<li><a href="#"><img src="./img/f_sitemap.gif" alt="사이트맵"></a></li>
<li><a href="#"><img src="./img/f_email.gif" alt="이메일주소무단수집거부"></a></li>
</ul>
<address>
<img src="./img/f_copy.gif" alt="#">
</address>
</div>
</footer>
</div>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] CSS 기초 - 선택자(2021-09-16) (0) | 2021.11.09 |
|---|---|
| [HTML] 예제풀기(2021-09-14) (0) | 2021.11.09 |
| [HTML] form 양식폼 만들기(2021-09-09) (0) | 2021.11.09 |
| [html] 나무위키_예제(HTML 만들기)_기초(2021-09-07) (0) | 2021.11.09 |
| [HTML] 내부스타일시트방식_기초(2021-08-31) (0) | 2021.11.08 |