부트스트랩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ezen Web</title> <!-- 페이지 제목 -->
<!-- 반응형 : 뷰포트 -->
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<!-- 부트스트랩 : css -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>
<!-- 부트스트랩 : js -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>
부트스트랩 class
- .container : 반응형 구역
- .navbar-nav : 네비[메뉴] ⇒ 글머리, 여백 제거
- nav-item
- nav-link
로고/템플릿 만드는 사이트
https://www.canva.com/ko_kr/
부트스트랩 class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ezen Web</title> <!-- 페이지 제목 -->
<!-- 반응형 : 뷰포트 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 사용자 정의 : css -->
<link href = "css/index.css" rel = "stylesheet">
<!-- 부트스트랩 : css -->
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>
<!-- <div style = "border : 1px solid red ;" class = "container">
컨테이너
</div> -->
<!-- 상단 메뉴 -->
<div class = "navbar navbar-expand-lg bg-light"> <!-- 네비게이션 [메뉴], bg : 배경색 -->
<div class = "container"> <!-- 구역 -->
<div class = "collapse navbar-collapse"> <!-- 감추기 -->
<ul class = "navbar-nav"> <!-- 메뉴 목록 -->
<li class = "nav-item"><a class = "nav-link" href = "#">로그인</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">회원가입</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">장바구니</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">마이페이지</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">커뮤니티</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">문의사항</a></li><!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">리뷰</a></li><!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 로고 -->
<div class = "container logoBox">
<a class = "title" href = "#">Ezen Web.</a>
</div>
<!-- 하단 메뉴 -->
<div class = "navbar navbar-expand-lg bg-light"> <!-- 네비게이션 -->
<div class = "container"> <!-- 구역 -->
<!-- 콜랩스 버튼 : 메뉴가 콜랩스 되었을 때 보이는 버튼-->
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navContent">
<span class = "navbar-toggler-icon"></span>
</button>
<!-- 콜랩스 적용되는 메누 목록 -->
<div class = " collapse navbar-collapse" id = "navContent"> <!-- 부모 크기보다 작아지면 자동으로 숨기기 -->
<ul class = "navbar-nav"> <!-- 메뉴목록 -->
<li class = "nav-item"><a class = "nav-link" href = "#">1+1</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">시즌베스트</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">수트</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">아우터</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">상의</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">니트</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">셔츠</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">바지</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">신발</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">악세사리</a></li> <!-- 메뉴항목 -->
<li class = "nav-item"><a class = "nav-link" href = "#">~90%</a></li> <!-- 메뉴항목 -->
</ul>
</div>
</div>
</div>
<!-- 부트스트랩 : js -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
</body>
</html>
이미지 슬라이드[캐러셀]
<!-- 이미지 슬라이드 : 캐러셀 --> <!-- data-bs-ride = "carousel" : 자동 슬라이드 -->
<div id = "mainCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval = "3000"> <!-- 캐러셀 구역 data-bs-interval : 넘어가는 시간[밀리초] : 1000 = 1초-->
<div class = "carousel-inner"> <!-- 캐러셀 내용물-사진들 -->
<div class = "carousel-item active"> <!-- 1개의 사진 [active : 활성화 -> 이미지가 바뀔때마다 active가 바뀜] -->
<img class="d-block w-100" src = "img/slide1.jpg"> <!-- w-100 : 100사이즈 / d-block : display : block -->
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide2.jpg">
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide3.jpg">
</div>
<div class = "carousel-item"> <!-- 1개의 사진 -->
<img class="d-block w-100" src = "img/slide4.jpg">
</div>
</div>
<div> <!-- 이미지 슬라이드 컨트롤[왼쪽/오른쪽 이동 버튼] -->
<button class = "carousel-control-prev" type = "button" data-bs-slide = "prev" data-bs-target = "#mainCarousel">
<span class = "carousel-control-prev-icon"></span>
</button>
<button class = "carousel-control-next" type = "button" data-bs-slide = "next" data-bs-target = "#mainCarousel">
<span class = "carousel-control-next-icon"></span>
</button>
</div>
</div>
사용한 CSS 코드
@charset "UTF-8";
/*외부 폰트*/
@font-face {
font-family: 'SANGJUGyeongcheonIsland';
src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SANGJUGyeongcheonIsland.woff>') format('woff');
font-weight: normal;
font-style: normal;
}
/*기본값.*/
*{
font-family: '맑은 고딕';
color : black;
margin : 0px; padding : 0px;
}
/*로고 구역*/
.logoBox{
text-align: center;
}
/*로고 제목*/
.title{
font-family: 'SANGJUGyeongcheonIsland';
color : black;
font-size: 40px;
}
/*하단 메뉴*/
.header-bottom{
top : 40px !important;
}
/*부트스트랩 class의 속성 수정*/
.nav-link{
color : black !important;
}
/*상단 메뉴 : 오른쪽 배치*/
.header-topMenu{
width : 100%;
display: flex;
justify-content: flex-end;
}
/*하단 메뉴 : 가로 수평 정렬*/
.header-bottomMenu{
width: 100%;
display: flex;
justify-content: space-between;
}