php

조별작업 사이트 만들기 핵심 파트

Kim do hyun 2023. 5. 14. 21:37
728x90
반응형

영양성분비교 파트

영양성분을 비교할 수 있는 저희 조가 만드는 사이트중 가장 핵심이라고 할 수 있습니다.

우선 HTML과 CSS만 만들어보았습니다.

 

 

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>성분 비교</title>
    <link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
    <link href="https://webfontworld.github.io/cookierun/ .css" rel="stylesheet">
    <link rel="stylesheet" href="../assets/css/graph.css">
    <link rel="stylesheet" href="../assets/css/header.css">
    <link rel="stylesheet" href="../assets/css/resets.css">
    <link rel="stylesheet" href="../assets/css/nav.css">
    <link rel="stylesheet" href="../assets/css/footer.css">
    <link rel="stylesheet" href="../assets/css/compare.css">

    <script src="../assets/js/graph.js"></script>
</head>
<body>
    <header id="header">
        <div class="header__inner">
            <div class="util">
                <h1><a href="http://kshkmn0929.dothome.co.kr/php2/html/main.html">영양많닭</a></h1>
                <ul>
                    <li><a href="joinup.html">회원가입</a></li>
                    <li><a href="login.html">로그인</a></li>
                    <li><a href="Mypage.html">마이페이지</a></li>
                    <li><a href="">고객센터</a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- header -->
    <nav id="nav">
        <ul>
            <li class="nav__link"><a href="#">신제품</a></li>
            <li class="nav__link"><a href="#">랭킹</a></li>
            <li class="nav__link"><a href="#">MyPick</a></li>
            <li class="nav__link"><a href="#">브랜드관</a></li>
            <li class="nav__link"><a href="#">커뮤니티</a></li>
        </ul>
    </nav>
    <!-- nav -->
    <div id="compare">
        <div class="compare__icon">
            <img src="../assets/img/ab-testing.svg" alt="성분 비교 아이콘">
            <h1>성분 비교</h1>
        </div>
        <div class="compare__item">
            <div class="compareMin">
                <div class="item__img1">
                    <img src="../assets/img/redchicken.svg" alt="비교대상 왼쪽 이미지">
                </div>
                <div class="vsimg">
                    <img src="../assets/img/vs cute.svg" alt="vs이미지">
                </div>            
                <div class="item__img2">
                    <img src="../assets/img/bluechicken.svg" alt="비교대상 오른쪽 이미지">
                </div>
            </div>
        </div>
        <div class="compare__view">
            <div class="compare__redtext">
                <div class="compare__text">
                    <div class="compare__text1">나트륨</div>
                    <div class="compare__text2">85mg</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">단백질</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">탄수화물</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">지방</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">당류</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">트랜스지방</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">포화지방</div>
                    <div class="compare__text2">10g</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text1">콜레스테롤</div>
                    <div class="compare__text2">10g</div>
                </div>
            </div>
            <div class="compare__result">
                <p class="salt"><em class="compareUp">▲120</em></p>
                <p class="protein"><em class="compareDown">▼12</em></p>
                <p class="carbohydrate"></p>
                <p class="province"></p>
                <p class="sugars"></p>
                <p class="trans__fat"></p>
                <p class="saturated__fat"></p>
                <p class="cholesterol"></p>
            </div>
            <div class="compare__bluetext">
                <div class="compare__text">
                    <div class="compare__text3">85mg</div>
                    <div class="compare__text4">나트륨</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">단백질</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">탄수화물</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">지방</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">당류</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">트랜스지방</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">포화지방</div>
                </div>
                <div class="compare__text">
                    <div class="compare__text3">10g</div>
                    <div class="compare__text4">콜레스테롤</div>
                </div>
            </div>
        </div>
        <div class="compare__graph__h1">
            <h2>제품 목록 그래프</h2>
        </div>
        <div id="compare__graph">
            <div class="horizontal-bar-graph" id="my-graph">
                <ul class="bar-graph"> 
                    <li>
                      <p>미트리 소스 닭가슴살</p>
                      <div class="bar-wrap"><span class="bar-fill" style="width: 100%;"></span></div>
                    </li> 
                    <li>
                      <p>미트리 닭가슴살 볼</p>
                      <div class="bar-wrap"><span class="bar-fill" style="width: 80%;"></span></div>
                    </li> 
                    <li>
                      <p>굽네 소맛닭</p>
                      <div class="bar-wrap"><span class="bar-fill"  style="width: 60%;"></span></div>
                    </li> 
                    <li>
                      <p>헬스앤뷰티 닭가슴살</p>
                      <div class="bar-wrap"><span class="bar-fill" style="width: 50%;"></span></div>
                    </li> 
                  </ul>              
            </div>
        </div>
        <div class="compare__list">
            <div class="com__list">
                <img src="../assets/img/compareImg1.svg" alt="첫번째 선택 이미지">
            </div>
            <div class="com__list">
                <img src="../assets/img/compareImg2.svg" alt="첫번째 선택 이미지">
            </div>
            <div class="com__list">
                <img src="../assets/img/compareImg3.svg" alt="첫번째 선택 이미지">
            </div>
            <div class="com__list">
                <img src="../assets/img/compareImg4.svg" alt="첫번째 선택 이미지">
            </div>
            <div class="com__list">
                <img src="../assets/img/compareImg5.svg" alt="첫번째 선택 이미지">
            </div>
        </div>
    </div>
    <footer id="footer">
        <div class="container"> 
        <div class="footer__text">
            <a href="#">공지사항</a> | 
            <a href="#">자주받는질문</a> | 
            <a href="#" class="active">1:1질문</a> |
            <a href="#">이용약관</a> |
            <a href="#">개인정보처리방침</a></div>
        </div>
        <address>
            영양많닭(주) | 대표자: 1조<br>
            주소:안산시 단원구 고잔동 535-2번지 라인컴퓨터아트학원  | 사업자등록번호: 준비중<br>
            통신판매업신고: 준비중 | 개인정보보호책임자: 1조
        </address>
    </footer>
    <!-- footer -->
</body>
</html>

CSS

#compare {
    width: 1200px;
    margin: 50px auto 0;
}
#compare .compare__icon {
    margin-top: 20px;
    text-align: center;
}
#compare .compare__icon img {
    width: 200px;
    border-bottom: 3px solid #FFA96B;
    padding: 30px 0;
}
#compare .compare__icon h1 {
    font-size: 48px;
    color: #FFA96B;
    margin-top: 20px;
    font-family: 'CookieRun';
}
.compare__item {
    width: 1200px;
    height: 400px;
}
.compareMin {
    justify-content: space-between;
    display: flex;
    width: 100%;
    margin-top: 70px;
}
.compare__item .item__img1 {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 3px solid red;
}
.compare__item .item__img1:hover {
    transition: all 0.3s;
    width: 400px;
    height: 400px;
}
.compare__item .item__img2:hover {
    transition: all 0.3s;
    width: 400px;
    height: 400px;
}
.vsimg {
    margin: 100px;
    width: 200px;
    height: 105px;
}
.vsimg img:hover {
    transition: all 0.3s;
    transform: scale(120%);
}
.compare__item .item__img2 {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 3px solid blue;
}
.compare__view {
    width: 100%;
    height: 850px;
    display: flex;
}
.compare__view .compare__redtext {
    width: 50%;
    height: 750px;
    padding: 0 0 0 50px;
}
.compare__view .compare__redtext .compare__text {
    display: flex;
    width: 250px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 50px;
    margin: 40px 0;
}
.compare__view .compare__redtext .compare__text .compare__text1 {
    width: 45%;
    font-size: 20px;
    color: #fff;
    background-color: #FF6161;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    text-align: center;
    padding-top: 10px;
    font-family: 'GmarketSans';
}
.compare__view .compare__redtext .compare__text .compare__text2 {
    font-size: 20px;
    padding: 5px 0 0 40px;
}
.compare__view .compare__bluetext {
    width: 50%;
    height: 750px;

}
.compare__view .compare__bluetext .compare__text {
    display: flex;
    width: 250px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 50px;
    margin: 40px 0;
}
.compare__view .compare__bluetext .compare__text .compare__text3 {
    font-size: 20px;
    text-align: center;
    width: 56%;
    padding-top: 5px;
}
.compare__view .compare__bluetext .compare__text .compare__text4 {
    width: 45%;
    font-size: 20px;
    color: #fff;
    background-color: #487BFF;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    text-align: center;
    padding-top: 10px;
    font-family: 'GmarketSans';
}
.compare__result {
    width: 100px;
    height: 770px;
    font-size: 18px;
    margin-left: 500px;
}
.compare__result p {
    padding: 30px;
    text-align: center;
}
.compare__result p:first-child {
    margin-top: 22px;
}
.compare__result p:nth-child(2),
.compare__result p:nth-child(3),
.compare__result p:nth-child(4),
.compare__result p:nth-child(5),
.compare__result p:nth-child(6),
.compare__result p:nth-child(7),
.compare__result p:nth-child(8) {
    margin-top: 3px;
}
.compare__graph {
    width: 100%;
    height: 300px;
}
.compare__list {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.compare__list img {
    width: 220px;
    height: 220px;
}
.compare__list .com__list {
    width: 220px;
    height: 220px;
    border-radius: 10px;
    background-color: #000;
}
.compareDown {
    color: #487BFF;
}
.compareUp {
    color: #FF6161;
}

 

그래프를 만들어 저희가 나름대로 정해놓은 기준에 따라서 점수를 매기고 그에 맞춰서 그래프가 보일 것입니다.

 

양옆에 가장 높은 점수의 음식이 양옆에 표시되며 얼마나 높고 낮은지 영양성분 옆에 표시될 예정입니다.

'php'의 다른글

  • 현재글조별작업 사이트 만들기 핵심 파트

관련글

댓글

티스토리툴바