부트스트랩으로 만든 메뉴를 CSS로 변경본겁니다.
고수님 조언부탁드립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SPGLOBAL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<style>
/* head_tail */
.head_tail{
/*background-color:#666;*/
color:#263238;
margin-top:20px;
margin-bottom:20px;
}
.menu{
margin-bottom:0px;/* 메뉴바와 슬라이더 간격 -> 메뉴바 아래 여백 */
}
/* 네비게이션 색상변경 시작 */
/* navbar */
.navbar-default {
background: #795548; /* 메뉴배경색상 */
border:none;
border-radius:0px;
}
/* Brand 색상 */
.navbar-default .navbar-brand {
color: #fff;
}
/* Brand 위로 마우스 올렸을 때 색상 */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ff9800;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #fff; /* 메뉴 색상 */
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ff9800; /* 마우스 올렸을때 메뉴 글자색상 */
background-color:#5d4037; /* 마우스 올렸을때 메뉴배경 색상 */
}
/* Active 색상 배경 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background: #ff9800;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background: #ff9800;
}
/* 드롭다운 서브메뉴 배경색상 */
.dropdown-menu {background-color:#ffa726;}
/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 배경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {background: #8d6e63;}
/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 변경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color:#fff;}
/* caret 드롭다운 삼각형*/
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #ff9800;
border-bottom-color: #ff9800;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar, .navbar-default{
/* height:50px; 메뉴바 두께 */
padding-top:0px; /* 메뉴바 상단 여백 */
font-size:16px; /* 메뉴바 폰트크기 */
letter-spacing:4px; /* 메뉴바 글자간격 */
word-spacing:5px;
}
.navbar {
border: 0;
font-size: 16px !important; /* 폰트 크기 */
border-radius: 0;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 768px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ff9800;
background:#6d4c41;
}
.navbar-default .navbar-nav .open .dropdown-menu{
background-color:#795548;
}
.navbar-default .navbar-nav{
background-color:#795548;
}
}
/* 네비게이션 색상변경 끝 */
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #ff5722;
/* margin-left:150px; 슬라이드 왼쪽 화살표 왼쪽 위치변경 */
/* margin-right:150px; 슬라이드 오른쪽 화살표 왼쪽 위치변경 */
margin-top:auto; /* 슬라이드 화살표 수직위치변경 */
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
height:100%;
margin: auto;
min-height:200px;
}
</style>
</head>
<body>
<!-- head_tail 시작 -->
<div class="container text-right head_tail">
<small>Home · 회원가입 · Contact Us</small>
</div>
<!-- head_tail 끝 -->
<!--네비게이션 시작 -->
<nav class="navbar navbar-default menu">
<div class="container-fluid">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SPGLOBAL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">회사소개<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">회사소개</a></li>
<li><a href="#">회사연혁</a></li>
<li><a href="#">사업영역</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Product<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Heal foot</a></li>
<li><a href="#">쌀누니</a></li>
<li><a href="#">저주파자극기</a></li>
<li><a href="#">스킨매니저</a></li>
<li><a href="#">에스떼</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Community<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Notice</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
<!-- 검색 버튼 잠금 시작
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i><small> Login</small></a></li>
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li> -->
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--네비게이션 끝 -->
<!-- slider 시작 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="slider1-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>Sell $</h3>
<p>Money Money.</p>
</div>
</div>
<div class="item">
<img src="slider2-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider3-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider4-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider5-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- slider 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7630 | 10년 전 | 671 | ||
| 7629 |
 돼지코구뇽 |
10년 전 | 2424 | |
| 7628 | 10년 전 | 810 | ||
| 7627 |
 RINIX |
10년 전 | 1046 | |
| 7626 |
RINIX |
10년 전 | 1803 | |
| 7625 | 10년 전 | 735 | ||
| 7624 | 10년 전 | 748 | ||
| 7623 |
RINIX |
10년 전 | 3125 | |
| 7622 | 10년 전 | 748 | ||
| 7621 |
leeleeleelee
|
10년 전 | 603 | |
| 7620 | 10년 전 | 552 | ||
| 7619 | 10년 전 | 516 | ||
| 7618 | 10년 전 | 1051 | ||
| 7617 | 10년 전 | 738 | ||
| 7616 | 10년 전 | 672 | ||
| 7615 | 10년 전 | 740 | ||
| 7614 | 10년 전 | 1281 | ||
| 7613 |
RINIX |
10년 전 | 2097 | |
| 7612 | 10년 전 | 1179 | ||
| 7611 | 10년 전 | 1441 | ||
| 7610 |
RINIX |
10년 전 | 1916 | |
| 7609 |
 JRevirthuum |
10년 전 | 1375 | |
| 7608 |
mwdkim
|
10년 전 | 1149 | |
| 7607 |
JRevirthuum |
10년 전 | 1079 | |
| 7606 |
mwdkim
|
10년 전 | 3955 | |
| 7605 | 10년 전 | 706 | ||
| 7604 | 10년 전 | 1042 | ||
| 7603 | 10년 전 | 1664 | ||
| 7602 |
 nanati |
10년 전 | 1095 | |
| 7601 |
AniNest
|
10년 전 | 2811 | |
| 7600 |
port443
|
10년 전 | 1052 | |
| 7599 | 10년 전 | 959 | ||
| 7598 | 10년 전 | 1039 | ||
| 7597 | 10년 전 | 4589 | ||
| 7596 |
SeungYeon
|
10년 전 | 908 | |
| 7595 |
untitled
|
10년 전 | 2454 | |
| 7594 |
프로그래머7
|
10년 전 | 1747 | |
| 7593 |
untitled
|
10년 전 | 2388 | |
| 7592 |
untitled
|
10년 전 | 1957 | |
| 7591 |
untitled
|
10년 전 | 2693 | |
| 7590 |
아리마2001
|
10년 전 | 870 | |
| 7589 | 10년 전 | 1123 | ||
| 7588 |
JRevirthuum |
10년 전 | 2938 | |
| 7587 | 10년 전 | 1319 | ||
| 7586 | 10년 전 | 686 | ||
| 7585 | 10년 전 | 1720 | ||
| 7584 | 10년 전 | 1424 | ||
| 7583 |
leeleeleelee
|
10년 전 | 1189 | |
| 7582 |
 별을따는소년 |
10년 전 | 1149 | |
| 7581 | 10년 전 | 1376 | ||
| 7580 | 10년 전 | 1031 | ||
| 7579 |
별을따는소년 |
10년 전 | 619 | |
| 7578 | 10년 전 | 1441 | ||
| 7577 |
RINIX |
10년 전 | 1888 | |
| 7576 | 10년 전 | 1401 | ||
| 7575 |
멋진남자임
|
10년 전 | 1481 | |
| 7574 | 10년 전 | 2141 | ||
| 7573 | 10년 전 | 3276 | ||
| 7572 | 10년 전 | 776 | ||
| 7571 |
별을따는소년 |
10년 전 | 796 | |
| 7570 |
 카카오툴즈 |
10년 전 | 1337 | |
| 7569 | 10년 전 | 1566 | ||
| 7568 |
this1mg
|
10년 전 | 1064 | |
| 7567 |
 내사랑내사랑 |
10년 전 | 781 | |
| 7566 | 10년 전 | 929 | ||
| 7565 |
Angel하늘
|
10년 전 | 1031 | |
| 7564 |
seoldi
|
10년 전 | 1277 | |
| 7563 |
별을따는소년 |
10년 전 | 1417 | |
| 7562 |
멋진남자임
|
10년 전 | 2113 | |
| 7561 | 10년 전 | 733 | ||
| 7560 |
leeleeleelee
|
10년 전 | 930 | |
| 7559 | 10년 전 | 5072 | ||
| 7558 |
RinaP
|
10년 전 | 810 | |
| 7557 |
 성격파탄자 |
10년 전 | 1271 | |
| 7556 | 10년 전 | 1212 | ||
| 7555 |
hyohyojj1234
|
10년 전 | 1680 | |
| 7554 | 10년 전 | 1108 | ||
| 7553 |
senseme
|
10년 전 | 1357 | |
| 7552 |
ehdltdoit
|
10년 전 | 1455 | |
| 7551 |
 Terrorboy |
10년 전 | 1846 | |
| 7550 |
leeleeleelee
|
10년 전 | 1615 | |
| 7549 | 10년 전 | 2447 | ||
| 7548 | 10년 전 | 1856 | ||
| 7547 |
멋진남자임
|
10년 전 | 1976 | |
| 7546 | 10년 전 | 1020 | ||
| 7545 |
ILMare1003
|
10년 전 | 1311 | |
| 7544 |
내사랑내사랑 |
10년 전 | 1267 | |
| 7543 | 10년 전 | 901 | ||
| 7542 | 10년 전 | 681 | ||
| 7541 |
울라라라우
|
10년 전 | 881 | |
| 7540 | 10년 전 | 1608 | ||
| 7539 | 10년 전 | 954 | ||
| 7538 |
 Romancia |
10년 전 | 1843 | |
| 7537 | 10년 전 | 3629 | ||
| 7536 |
Gaumi
|
10년 전 | 1441 | |
| 7535 |
프로그램은어려워
|
10년 전 | 1292 | |
| 7534 |
senseme
|
10년 전 | 1219 | |
| 7533 | 10년 전 | 1222 | ||
| 7532 | 10년 전 | 886 | ||
| 7531 | 10년 전 | 2077 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기