처음 화면 구상을 했을 때는 홈 메뉴를 생각하지 않았다.
그런데 처음 화면들어가서 바로 생일선물 화면을 보여주기엔 다른 메뉴들을 너무 차별하는 것 같아서 홈화면을 보여준 후 메뉴들을 클릭하도록 하는게 낫겠다라는 생각을 했다.
그래서 생각한게, '홈 화면에서 선물 관련 이미지들을 슬라이드쇼로 보여주자.'
그래서 부트스트랩에서 이미지 슬라이드 관련 소스를 찾아봤다.
위 페이지 내 'With indicators'를 사용하기로 결정.
<!--그림슬라이드 출처 : 부트스트랩-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/birthday.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/xmas.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/gift.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
이렇게 작성
img src="..." 부분은 이미지 주소 복사 시 화면이 너무 깨져서,
따로 이미지 경로를 만들고 이미지 저장해서 붙여넣었다.
11월 13일 문제점 : 캐러셀 이미지의 세로 높이가 너무 길어 이미지를 한눈에 보기 힘들다.
11월 16일 해결
캐러셀 이미지 슬라이드 높이를 조정해보기로 했다.
스타일 태그 내에서 아래 코드를 추가.
<style>
/* 캐러셀(이미지슬라이드) 이미지 크기변경 */
.carousel-inner{
width:auto;
height:790px; /* 이미지 높이 변경 */
}
.carousel-item{
width: auto;
height:100%;
}
.d-block {
display:block;
width: auto;
height: 100%;
}
</style>
이 정도 크기로 만족!
부트스트랩 내 카드 소스를 활용해보기로 했다.
11월 13일 문제점 : 부트스트랩 기본 카드 정렬이 마음에 안 든다.
부트스트랩으로 작성한 카드의 모양이 마음에 안들어서 직접 만들기로했다.
(폭풍 구글링...)
html 코드
<div class="card">
<!-- 각 카드 헤더 -->
<div class="card-header">
<div class="card-header-text">
HOT
</div>
</div>
<!-- 카드 바디 헤더 -->
<div class="card-body-header">
<img src="">
<h1>록시땅 핸드크림</h1>
<p class="card-body-hashtag">#겨울 #기본템 #메이커</p>
<p>
선물 중의 제일 기본 아이템!
핸드크림이라고 모두 같은 핸드크림이아니다.
'록시땅' 이름 하나로 주는 사람 체면도 살리고
받는 사람도 훈훈해지는 마법의 핸드크림
</p>
<button type="button" class="btn btn-outline-danger">자세히 보기</button>
</div>
</div>
위 카드를 총 10 개 정도 보이게 할 생각
CSS코드
<style>
.cards {
background: #f6f0fa;
/* border: 1px solid #ffffff; */
padding: 10px;
margin: 0 auto;
overflow: hidden; /* float 속성인식 */
}
.card {
height: 400px;
width: 350px;
border-radius: 15px;
display: inline;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
float: left;
}
.card-header{
width: 100%;
height: 270px;
}
.card:hover .card-header {
opacity: 0.8;
height: 100px;
}
.card-header-text {
background-color: #fa2414 ;
color: #FFF ;
font-weight: bold ;
text-align: center ;
float: right;
margin: 15px 15px 15px 15px;
border-radius: 50%;
font-weight: bold;
padding: 10px 10px 10px 10px;
line-height: 30px;
}
.card-body-header{
margin: 10px 20px 0px 20px;
}
.card-body-hashtag {
color: #2478ff;
}
.btn btn-outline-danger{
margin: 0 auto;
}
</style>
11월 17일 문제점 : card 내 이미지 위치 실패 / cards의 가운데 정렬 실패
11월 18일 card 이미지 위치 수정
11월 19일 cards margin-left 설정으로 수정