--------------------------------index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>기본 선택자와 하위 선택자, 자식 선택자</title>
<link rel="stylesheet" href="./css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
//문서를 모두 해석했으면 { }내부에 있는 명령문을 실행한다.
$(document).ready(function( ) {
$('#mainmenu > li').mouseover(function( ) {
$(this).find('.submenu').stop( ).slideDown( );
});
$('#mainmenu > li').mouseout(function( ) {
$(this).find('.submenu').stop( ).slideUp( );
});
});
</script>
</head>
<body>
<header>
<img src="./imgs/logo.png" alt="로고">
<nav>
<ul id="mainmenu">
<li>
<a href="#">about us</a>
<ul class="submenu">
<li><a href="#">about us</a></li>
<li><a href="#">history</a></li>
<li><a href="#">location</a></li>
</ul>
</li>
<li>
<a href="#">new products</a>
<ul class="submenu">
<li><a href="#">software</a></li>
<li><a href="#">hardware</a></li>
<li><a href="#">service</a></li>
<li><a href="#">products</a></li>
</ul>
</li>
<li>
<a href="#">solution</a>
</li>
<li>
<a href="#">community</a>
<ul class="submenu">
<li><a href="#">free board</a></li>
<li><a href="#">QnA</a></li>
</ul>
</li>
</ul>
</nav>
<ul class="topmenu">
<li>
<a href="#">로그인</a>
</li>
<li>
<a href="#">회원가입</a>
</li>
</ul>
</header>
<div class="clear"></div>
<div class="bn"> <h2>distribution <span class="orange">solution</span></h2></div>
<section>
<img src="imgs/photo1.jpg" alt="전산실" class="left">
<div class="right">
<h3>전산실 <span class="sky">배포 솔루션</span> 시스템</h3>
<p>전산실에서 모든 부서의 소프트웨어를 관리하고 통합하는 소프트웨어 솔루션 시스템 제우스는 빠른 소프트웨어 배포 속도로 관리의 편의성을 높였다.</p>
<a href="#">자세히보기</a>
</div>
</section>
<div class="clear"></div>
<section>
<img src="imgs/photo1.jpg" alt="전산실" class="right">
<div class="left">
<h3>전산실 <span class="sky">배포 솔루션</span> 시스템</h3>
<p>전산실에서 모든 부서의 소프트웨어를 관리하고 통합하는 소프트웨어 솔루션 시스템 제우스는 빠른 소프트웨어 배포 속도로 관리의 편의성을 높였다.</p>
<a href="#">자세히보기</a>
</div>
</section>
<div class="clear"></div>
<footer>
<img src="./imgs/ft-logo.png" alt="푸터로고" class="left">
<div class="left">
<p>광주광역시 북구 경양로170 (중흥동) 한경빌딩(구 남양건설빌딩) 5층 | 한국경영원 인재개발원 | 대표이사 김보현 | 사업자등록번호 409-81-33798 | 대표전화 : 062-720-4800 </p>
<p>copyright © 2018 한국경영원 인재개발원 All rights reserved.</p>
</div>
</footer>
</body>
</html>
-------------------------------------------custom.css
@charset "utf-8";
/*CSS Document*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
ul li { list-style:none; } /*블릿 제거*/
a { display:block; color:#fff; text-decoration:none; } /*텍스트 언더바 제거*/
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
/*글꼴(서체): 구글 웹 폰트(fonts.google.com), 텍스트 크기, 배경색*/
body {
font-family:'Noto Sans KR', sans-serif; font-size:15px;
background:#fff; }
/* header 요소의 자식인 img요소와 nav요소, ul, topmenu 요소를 먼저 배치해야한다.*/
header { position:fixed; width:100%; height:70px; background:rgba(0, 0, 0, 0.4); }
header img { float:left; height:40px; margin:15px 0 0 50px; }
header nav { float:left; margin:25px 0 0 100px; } /*메뉴를 왼쪽에 배치하고 여백으로 위치를 잡는다. top right bottom left*/
header nav > ul > li { float:left; position:relative; }
/*메인메뉴를 좌에서 우로 배치*/
header nav > ul > li >a { padding:5px 20px;
text-transform:capitalize;}
/*메인메뉴의 여백을 지정(위 아래 좌우), 영문자의 첫 글자를 대문자로 변경*/
header nav > ul > li > a:hover {background:rgba(255, 255, 255,0.4);}
header .submenu {
display:none; position:absolute; left:0; top:45px; z-index:9; width:100%;
}
header .submenu li a { padding:10px 0; text-align:center; background:rgba(255, 255, 255, 0.4); }
header .submenu li a:hover { color:rgb(44, 72, 165); background:rgba(255,204,0,0.8); }
header .topmenu { float:right; margin-right:50px } /*)톱 메뉴를 오른쪽에 배치*/
header .topmenu li { float:left; }
header .topmenu li a { padding:10px; font-size:13px; }
header .topmenu li a:hover {color:rgb(154, 181, 255);}
.bn { height:500px;
background:url(../imgs/bn-aboutus.jpg) no-repeat center;
background-size:cover;/*배경 이미지를 박스 사이즈에 맞춘다.*/}
.bn h2 {padding-top:300px;
font-size:72px; color:rgba(255,255,255,0.4); font-weight:700; text-align:center; text-transform:uppercase;}
.bn h2 .orange { color:rgba(255,204,0,0.55) }
section { width:1300px; margin:100px auto; }
section img { width:600px; }
section div { width:600px; height:300px; margin:50px 0;}
section div h3 { font-size:34px; color:rgb(52, 68, 211); font-weight:100; }
section div h3 .sky { color:#09f; font-weight:400; }
section div p { padding-top:30px; }
section div a {
width:120px; height:40px; margin-top:130px;
color:#36f; text-align:center; line-height:36px;
border:1px solid #36f; border-radius:20px;
}
section div a:hover { color:#fff; background:#36f; }
footer { height:200px; margin-top:150px; background:rgb(31, 31, 40);}
footer img { height:40px; margin:50px 80px 0 50px; }
footer div { width:610px; margin-top:45px;}
footer div p { font-size:13px; color:#fff }
'Coding' 카테고리의 다른 글
| CSS 선수학습(5) (0) | 2021.07.14 |
|---|---|
| CSS 선수학습(4) (0) | 2021.07.14 |
| CSS 선수학습(2) (0) | 2021.07.12 |
| html 선수학습(7) (0) | 2021.07.09 |
| html 선수학습(6) (0) | 2021.07.08 |