html_첫 화면 만들기_(2)

dainchoi·2020년 11월 13일
0

프로젝트

목록 보기
3/10

메인화면 이미지 슬라이드 만들기

11월 13일

처음 화면 구상을 했을 때는 홈 메뉴를 생각하지 않았다.
그런데 처음 화면들어가서 바로 생일선물 화면을 보여주기엔 다른 메뉴들을 너무 차별하는 것 같아서 홈화면을 보여준 후 메뉴들을 클릭하도록 하는게 낫겠다라는 생각을 했다.

그래서 생각한게, '홈 화면에서 선물 관련 이미지들을 슬라이드쇼로 보여주자.'
그래서 부트스트랩에서 이미지 슬라이드 관련 소스를 찾아봤다.

부트스트랩_Carousel

위 페이지 내 '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일 해결

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일

부트스트랩 내 카드 소스를 활용해보기로 했다.

11월 13일 문제점 : 부트스트랩 기본 카드 정렬이 마음에 안 든다.

11월 17일

부트스트랩으로 작성한 카드의 모양이 마음에 안들어서 직접 만들기로했다.
(폭풍 구글링...)

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 설정으로 수정

0개의 댓글