반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>아모레퍼시픽</title>
</head>
<body>
<!-- html은 컨텐츠를 맥락에 맞게 작성하는 것!!!! 이게 뽀인트/핵심이다! 처음에 시작할 때, 디자인 시안을 보고 영역을 먼저 잡아주는 게 1순위다! -->
<div class="container">
<header>
<div>
<h1 class="logo"><a href="#"><img src="./img/logo.gif" alt="로고이미지"></a></h1>
</div>
<nav>
<ul class="topMenu">
<li><a href="#"><img src="./img/sidemenu1.gif" alt="home 이미지"></a></li>
<li><a href="#"><img src="./img/sidemenu3.gif" alt="sitemap 이미지"></a></li>
<li><a href="#"><img src="./img/sidemenu4.gif" alt="contactus 이미지"></a></li>
</ul>
<ul class="gnb">
<li><a href="#"><img src="./img/gnbmenu1.gif" alt="기업소개 이미지"></a></li>
<li><a href="#"><img src="./img/gnbmenu2.gif" alt="채용정보 이미지"></a></li>
<li><a href="#"><img src="./img/gnbmenu3.gif" alt="인사제도 이미지"></a></li>
<li><a href="#"><img src="./img/gnbmenu4.gif" alt="인재육성 이미지"></a></li>
<li><a href="#"><img src="./img/gnbmenu5.gif" alt="입사지원 이미지"></a></li>
<li><a href="#"><img src="./img/gnbmenu6.gif" alt="입사도우미 이미지"></a></li>
</ul>
</nav>
</header>
<div class="banner">
<!-- 구름이나 배경이미지는 컨텐츠가 아니기 떄문에 css에서 백그라운드로 넣어준다. -->
<h2>Asian Beauty Creator</h2>
<dl>
<dt><a href="#"><img src="./img/tit_news1.gif" alt="채용뉴스"></a></dt>
<dd><!--dd 태그 안에 list 태그가 들어갈 수 있음--->
<ul>
<!-- 날짜/데이터는 span 태그를 써서 나중에 스타일을 따로 부여할 수 있으므로, 이왕이면 태그로 표현을 하자. 선택해서 스타일을 개별적으로 주기 위해서 -->
<li><a href="#">[AMOREPACIFIC] 채용어플리케이션 및...</a><span>2011.04.22</span></li>
<li><a href="#">2011 상반기 AMOREPACIFIC 신입사원...</a><span>2011.04.21</span></li>
<li><a href="#">2011 AMOREPACIFIC 신입사원 수시채용...</a><span>2011.03.15</span></li>
</ul>
</dd>
<dt><a href="#"><img src="./img/tit_news2.gif" alt="입사지원"></a></dt>
<dd>
<ul>
<li><a href="#">[AMOREPACIFIC] 채용어플리케이션 및...</a><span>2011.04.22</span></li>
<li><a href="#">2011 상반기 AMOREPACIFIC 신입사원...</a><span>2011.04.21</span></li>
<li><a href="#">2011 AMOREPACIFIC 신입사원 수시채용...</a><span>2011.03.15</span></li>
</ul>
</dd>
<dt><a href="#"><img src="./img/tit_news3.gif" alt="채용공고"></a></dt>
<dd>
<ul>
<li><a href="#">[AMOREPACIFIC] 채용어플리케이션 및...</a><span>2011.04.22</span></li>
<li><a href="#">2011 상반기 AMOREPACIFIC 신입사원...</a><span>2011.04.21</span></li>
<li><a href="#">2011 AMOREPACIFIC 신입사원 수시채용...</a><span>2011.03.15</span></li>
</ul>
</dd>
</dl>
</div>
<div class="contents">
<div>
<h3><img src="./img/tit_service.gif" alt="#"></h3>
<ol><!--입사 지원옆의 화살표를 ux라 하는데... ux(사용자 경험)는 사람들이 자연스럽게 경험이 쌓여 실행할 수 있도록 디자인하는 것들-->
<li><a href="#">입사지원></a></li>
<li><a href="#">상시채용></a></li>
<li><a href="#">지원결과></a></li>
<li><a href="#">FAQ></a></li>
</ol>
</div><!--탭메뉴는 dl 태그를 사용-->
<div>
<dl>
<dt><a href="#"><img src="./img/tit_person.gif" alt="인재상 이미지"></a></dt>
<dd>
<a href="#"><img src="./img/img_person.jpg" alt="인재상 설명 이미지"></a>
</dd>
<dt><a href="#"><img src="./img/tit_pay.gif" alt="복리후생 이미지"></a></dt>
<dd>
<a href="#"><img src="./img/img_pay.jpg" alt="복리후생 설명 이미지"></a>
</dd>
</dl>
</div>
<div>
<h3><img src="./img/tit_interview.gif" alt="선배와의 인터뷰 이미지"></h3>
<p><a href="#"><img src="./img/img_interview.jpg" alt="선배와의 인터뷰 본문설명 이미지"></a></p>
</div>
</div>
<footer>
<div><!--눌러서 선택할 수 있게 하는것 : select 박스를 쓴다.-->
<select>
<option>FAMILY SITE</option>
<option>NAVER</option>
<option>KAKAO</option>
</select>
<a href="#"><img src="./img/footer_privacy.gif" alt="개인정보취급방침 이미지"></a>
</div>
<div>
<p><img src="./img/footer_copyright.gif" alt="#"></p>
</div>
</footer>
</div>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-16) (0) | 2021.11.09 |
|---|---|
| [HTML] CSS 기초 - 선택자(2021-09-16) (0) | 2021.11.09 |
| [HTML] div 영역 나누기_예제만들기(2021-09-10) (0) | 2021.11.09 |
| [HTML] form 양식폼 만들기(2021-09-09) (0) | 2021.11.09 |
| [html] 나무위키_예제(HTML 만들기)_기초(2021-09-07) (0) | 2021.11.09 |