<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 부트스트랩 css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 제이쿼리 -->
<script src="js/jquey.js"></script>
<!-- 부트스트랩 js -->
<script src="js/bootstrap.min.js"></script>
<!-- 커스텀 reset css -->
<link rel="stylesheet" href="css/custom-reset.css">
<!-- 커스텀 css -->
<link rel="stylesheet" href="css/custom.css">
<script>
// 슬라이드 영역의 인터벌
$(document).ready(function(){
$("#myCarousel").carousel({interval: 3000});
})
</script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 로고 -->
<a class="navbar-brand" href="#">
<img src="img/logo.svg" alt="로고" width="30">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<!-- 중단메뉴 -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<!-- 오른쪽 메뉴 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 오른쪽 메뉴 -->
<form class="navbar-form navbar-right" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="검색">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</header>
<!-- 슬라이드영역 -->
<article>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/slide01.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="img/slide02.jpg" alt="Chicago">
</div>
<div class="item">
<img src="img/slide03.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</article>
<!-- 본문 -->
<section class="prod-section">
<div class="container">
<div class="row">
<h3>오늘의발견<span>쿠팡이 엄선한 가장 HOT한 상품</span></h3>
<ul class="col-xs-12 prod-list"><!-- 모바일에서는 전체화면 -->
<li class="col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box1.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box2.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- md에서는 4칸, sm에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box3.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box4.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box5.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box6.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-sm-12 col-md-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box7.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box8.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
<li class="col-md-3 col-sm-6"><!-- 테블릿 이상에서는 절반 -->
<a href="#" class="prod-link">
<img src="img/box9.jpg" alt="상품1">
<span class="arrow"><i class="glyphicon glyphicon-menu-right"></i></span>
<span class="arrow hover">상세보기</span>
</a>
</li>
</ul>
</div>
</div>
</section>
<hr/>
<section>
</section>
</body>
</html>
부트스트랩 navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 부트스트랩 css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 제이쿼리 -->
<script src="js/jquey.js"></script>
<!-- 부트스트랩 js -->
<script src="js/bootstrap.min.js"></script>
<!-- 커스텀 reset css -->
<link rel="stylesheet" href="css/custom-reset.css">
<!-- 커스텀 css -->
<link rel="stylesheet" href="css/index03.css">
<link rel="stylesheet" href="css/index04.css">
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 로고 -->
<a class="navbar-brand" href="#">
<img src="img/logo.svg" alt="로고" width="30">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<!-- 중단메뉴 -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<!-- 오른쪽 메뉴 -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">로그인
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</li>
</ul>
<!-- 오른쪽 메뉴 -->
<form class="navbar-form navbar-right" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="검색">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</nav>
</header>
<section style="margin-top: 50px;">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 col-xs-10 join-style">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="주소를 입력하세요" id="address">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
주소찾기
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
bootstrap.css
0.15MB
bootstrap.min.css
0.12MB
bootstrap-theme.css
0.03MB
bootstrap-theme.min.css
0.02MB
custom-reset.css
0.00MB
index03.css
0.00MB
index04.css
0.00MB
참조 사이트
'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글
| Flex (0) | 2024.01.28 |
|---|---|
| 부트스트랩 그리드 , 모달 (0) | 2024.01.28 |
| 반응형 디자인 - 미디어 쿼리 실습 (0) | 2024.01.27 |
| 미디어 쿼리(@media)-반응형디자인 (0) | 2024.01.27 |
| 포지션 실습하기1(sticky) (0) | 2024.01.27 |
