[CSS] 22. 실습: itscope

in Web on CSS


실습: itscope



/*------------- itscope.css --------------*/


body{height:100%; background: url(basic_bg01.gif) 0 0 repeat;}
.wrap-bg{background: url(basic_bg02.gif) 50% 0 repeat-y;}
.wrap{position:relative; width:1230px; margin:auto; 
	background: url(header_bg01.gif) 0 0 repeat-y;
	height:914px;}
.header{width:183px; float:left;}
.nav img{display:block;}
.level2 {width:100%; }


.contents{position:relative; width:997px; margin-left:10px; 
	padding:0 0 17px 40px; float:left;
	background: url(main_bg01.gif) 0 0 no-repeat;}
.footer{position:absolute; left:0; bottom:23px;}
.imgtxt{background: url(footer_menu_bg01.gif) 0 100% no-repeat;}
.foot-nav{ height:19px; margin-bottom:9px; padding:7px 0 0 10px;
	background: url(footer_menu_bg01.gif) 0 100% no-repeat;}
.foot-nav li{padding:0 8px; float:left;}
.main-img{margin-left:-50px;}
.main-content{position:relative; width:745px; margin-top:-75px;}
.main-content article{float:left;}
#a1{margin-right:8px;}

.side-content{width:243px; height:699px; position:absolute; 
	left:793px; top:192px;}
	
#a2 {width:218px; height:348px; padding:0px;}

.side-content article{width:218px; height:147px;  
	padding:25px 0 0 25px; margin-bottom:6px; }
.notice{background: url(gridcontents_notice_bg01.jpg);}
.pr {background: url(gridcontents_pr_bg01.jpg);}
/* 말줌임표  white-space:nowrap:개행하지 않겠다. */
.side-content li{white-space:nowrap; width:200px; overflow:hidden;
	text-overflow:ellipsis;}

.lang{position:absolute; left:877px; top:17px;}
.ko{background: url(lang_bar.png) 100% 0 no-repeat;}

.lang li{float:left; margin-right:8px; padding-right:11px;}
.lang a{display:block;}
.clear{clear:both;}






<!------------- itscope.html -------------->


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="itscope.css">
	<title>itscope</title>
	
</head>
<body>
	<div class="wrap-bg">
		<div class="wrap">
			<div class="header">
				<div class="main-head">
					<h1>
						<a href="#"><img src="logo.jpg" alt="ITSCOPE"></a>
					</h1>
				</div>
				<div class="nav">
					<ul>
						<li class="level1">
							<a href="#"><img src="nav_menu01.jpg" alt="ITSCOPE 제품소개"></a>
							<ul class="level2">
								<li class="sub1-1">
									<a href="#"><img src="new_subnav01_01.gif" alt=""></a>
								</li>
								<li class="sub1-2">
									<a href="#"><img src="new_subnav01_02.gif" alt=""></a>
								</li>
								<li class="sub1-3">
									<a href="#"><img src="new_subnav01_03.gif" alt=""></a>
								</li>
							</ul>
						</li>
						<li class="level1">
							<a href="#"><img src="nav_menu02.jpg" alt="고객센터"></a>
							<ul class="level2">
								<li>
									<a href="#"><img src="new_subnav02_01.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav02_02.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav02_03.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav02_04.gif" alt=""></a>
								</li>
							</ul>
						</li>
						<li class="level1">
							<a href="#"><img src="nav_menu04.jpg" alt="PMS란?"></a>
							<ul class="level2">
								<li>
									<a href="#"><img src="new_subnav04_01.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav04_02.gif" alt=""></a>
								</li>
							</ul>
						</li>
						<li class="level1">
							<a href=""><img src="nav_menu03.jpg" alt="회사소개"></a>
							<ul class="level2">
								<li>
									<a href="#"><img src="new_subnav03_01.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav03_02.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav03_03.gif" alt=""></a>
								</li>
								<li>
									<a href="#"><img src="new_subnav03_04.gif" alt=""></a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><img src="btn_solutionlink.png" alt="SOLUTIONLINK"></a>
							
						</li>
					</ul>
				</div>
			</div>
			<div class="contents">
				<div class="main-img">
					<img src="mainvisual01.jpg" alt="">
				</div>
				<section class="main-content">
					<article id="a1">
						<a href="#"><img src="gridcontents_itscope.jpg" alt="프로젝트 관리 솔루션 ITSCOPE"></a>
					</article>
					<article>
						<a href="#"><img src="gridcontents_download.jpg" alt="메뉴얼,브로셔 다운로드"></a>
					</article>
					<article id="a1">
						<a href="#"><img src="gridcontents_release.jpg" alt="Release Note"></a>
					</article>
					<article id="a1">
						<a href="#"><img src="gridcontents_question.jpg" alt="제품문의"></a>
					</article>
					<article>
						<a href="#"><img src="gridcontents_sns.jpg" alt="sns"></a>
					</article>	
				</section>
				<section class="side-content">
					<article id="a2">
					
					</article>
					<article class="notice">
						<h2>공지사항</h2>
						<ul>
							<li><a href="#">[솔루션링크 역량센터] "ISO26262 표준의 이해와 적용" 교육 과정 안내</a></li>
							<li><a href="#">[솔루션링크] ITSCOPE GS 인증 획득 !</a></li>
							<li><a href="#">[솔루션링크]자동차 SW개발현안 대응을 위한 SW공학기법적용 세미나(QMO, ISO26262, Automotive SPICE 중심으로) 안내</a></li>
						</ul>
					</article>
					<article class="pr">
						<h2>보도자료</h2>
						<ul>
							<li><a href="#">[기사]‘솔루션링크’ 車 SW 개발 때 ‘결함주입 테스트’ 활용</a></li>
							<li><a href="#">[기사] 솔루션링크 '2015 대한민국 리딩기업대상' 수상</a></li>
						</ul>
					</article>
				</section>
				<div class="lang">
					<ul>
						<li class="ko">
							<a href="#"><img src="lang_menu01.png" alt=""></a>
						</li>
						<li>
							<a href="#"><img src="lang_menu02.png" alt=""></a>
						</li>
						<li class="clear">
							<a href="#"><img src="lang_solutionlink.png" alt=""></a>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer">
				<div class="imgtxt">
					<h2><img src="footer_imgtxt01.jpg" alt="Solution link"></h2>
				</div>
				<div class="foot-nav">
					<ul>
						<li>
							<a href="#"><img src="footer_menu01.jpg" alt="사이트맵"></a>
						</li>
						<li>
							<a href="#"><img src="footer_menu02.jpg" alt="Contact us"></a>
						</li>
						<li>
							<a href="#"><img src="footer_menu03.jpg" alt="오시는길"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>




실행결과