프론트엔드/html css

당근마켓 보고 따라만들어보기

tero1115 2023. 6. 27. 16:47

원본

홈페이지 보면서 만든 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        section, div {
            /* border: 1px solid red; */
        }

        .my_btn {
            background-color: rgb(233, 236, 239);
        }

        .main{
            height: 1800px;
        }

        .container{
            /* max-width: 1200px; */
            height: 800px;
        }
        .container-header{
            height: 65px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
        }
        
        .box{
            width: 1100px;
            height: 100%;
            margin: auto;
        }

        .box-header{
            max-width: 1200px;
            height: 100%;
            margin: auto;
        }

        .box-footer{
            max-width: 800px; 
            height: 100%;
            margin: auto;
        }

        .header{
            display: flex;
            justify-content: space-between;
        }

        .logo{
            align-self: center;
        }

        .nav{
            display: flex;
            column-gap: 35px;
        }

        .nav ul{
            list-style-type: none;
            display: flex;
            align-items: center;
            column-gap: 25px;
            font-size: 18px;
            font-weight: bold;
        }

        .search-chat{
            display: flex;
            column-gap: 12px;
        }

        @media screen and (min-width: 1200px) {
            .search{
                display: block;
                align-self: center;
                height: 40px;
                width: 295px;
                background-color: ghostwhite;
                border-style: none;
                border-color: white;
                border-radius: 6px; 
            }

            .search::placeholder{
                font-size: 17px;
            }

            .search-icon{
                display: none;
            }

            .menu-icon{
                display: none;
             }
        }

        @media screen and (min-width: 800px) and (max-width: 1199px) {
            .search{
                display: none;
             }

             .search-icon{
                display: block;
             }
             
             .menu-icon{
                display: none;
             }
        }

        @media screen and (max-width: 800px) { 
            .nav ul{
                display: none;
            }

             .search{
                display: none;
             }

             .search-icon{
                display: block;
             }

             .chat-btn{
                display: none;
             }

             .menu-icon{
                display: block;
             }
        }

        .chat-btn{
            align-self: center;
            width: 100px;
            height: 40px;
            background-color: white;
            font-size: 17px;
            font-weight: bold;
            border-color: gainsboro;
            border-radius: 4px;
        }

        .info1{
            display: flex;
            justify-content: space-between;
        }

        .info1-msg{
            display: flex;
            flex-direction: column;
            justify-content: space-between;  
            width: 330px;
            height: 220px;
            align-self: center;
        }

        .info1-msg1{
            font-size: 50px;
            font-weight: 550;
        }

        .info1-img{
            height: 650px;
            align-self: flex-end; 
        }

        .info2{
            display: flex;
            justify-content: space-between;
        }

        .info2-img{
            align-self: center;
        }

        .info2-msg{
            display: flex;
            flex-direction: column;

            align-self: center;
            margin-right: 50px;
            /*  */
            width: 420px;
            height: 250px;
        }

        .info2-msg1{
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .info2-msg2{
            margin-bottom: 25px;
        }

        .info2-button-group{
            display: flex;
            justify-content: space-between;
        }

        .info2-btn{
            height: 50px;
            font-size: 17px;
            font-weight: bold;
            border-style: none;
            border-radius: 6px;
            padding-left: 25px;
            padding-right: 25px;
        }

        .info2-img{
            height: 650px;
        }

        .info3{
            display: flex;
            justify-content: space-between;
        }

        .info3-msg{
            align-self: center;
        }

        .info3-img{
            align-self: center;
        }

        .info3-msg1{
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .info3-msg2{
            margin-bottom: 50px;
        }

        .info3-msg3{
            display: flex;
            column-gap: 20px;
        }

        .info3-msg3-1, .info3-msg3-2, .info3-msg3-3{
            width: 160px;
        }

        .info3-msg3-1-1, .info3-msg3-2-1, .info3-msg3-3-1{
            margin-bottom: 10px;
        }

        .info3-msg3-1-2, .info3-msg3-2-2, .info3-msg3-3-2{
            font-weight: bold;
            margin-bottom: 10px;
        }

        .info3-msg3-1-3, .info3-msg3-2-3, .info3-msg3-3-3{
            font-size: 14px;
        }

        .info3-img{
            height: 650px;
        }

        .info4{
            display: flex;
            justify-content: space-between;
        }

        .info4-img{
            height:700px;
            align-self: center;
        }

        .info4-msg{
            align-self: center;
        }

        .info4-msg1{
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .info4-msg2{
            margin-bottom: 20px;
        }

        .info4-msg3-btn{
            width: 250px;
            height: 50px;
            font-size: 18px;
            font-weight: bold;
            border-style: none;
            border-radius: 6px;
        }

        .info5{
            display: flex;
            flex-direction: column;
        }

        .info5-msg1{
            font-size: 40px;
            font-weight: bold;
            align-self: center;
            margin-top: 80px;
            margin-bottom: 80px;
        }

        .info5-msg2{
            display: grid;
            grid-template-columns: auto auto auto auto;
        }

        .info5-msg2-content{
            width: 230px;
        }

        .info5-msg2-img{
            width: 100%;
            border-radius: 20px;

        }

        .info5-msg2-price{
            font-weight: bold;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .info5-msg2-address{
            font-size: 15px;
        }
        
        .info5-msg2-like{
            font-size: 13px;
            color: rgb(134, 142, 150);
        }

        .info5-msg3{
            margin-top: 45px;
            display: flex;
            justify-content: center;
            font-weight: bold;
            text-decoration: underline;
        }
        
        .info6-msg1{
            margin-top: 45px;
            display: flex;
            justify-content: center;
            font-weight: bold;
            text-decoration: underline;
            margin-bottom: 20px;
        }

        .info6-msg2 ul{
            list-style-type: none;
            display: flex;
            justify-content: center;
            column-gap: 45px;
            font-size: 18px;
        }

        .info7 {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }

        .info7-msg1{
            display: flex;
            column-gap: 40px;
        }

        .info7-msg1 ul{
            list-style-type: none;
        }
        .info7-msg1 ul li{
            font-size: 15px;
            margin-bottom: 20px;
        }

        /* 버튼 디자인 */
        .app-button{
            background-color: rgba(0, 0, 0, 0.75);
            color: white;
            width: 150px;
            height: 40px;
            border-style: none;
            border-radius: 6px;
        }

        /* 버튼속 내용 디자인 및 비율조절 */
        .app-button div{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 100;
        }

        .info8{
            font-size: 13px;
            color: rgb(134, 142, 150);
        }

        .info8 ul{
            list-style-type: none;
        }

        .info8-msg1{
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .info8-msg1 ul{
            display: flex;
            column-gap: 20px;
        }

        .info8-msg2 ul{
            display: flex;
            column-gap: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .info8-msg3 ul{
            display: flex;
            column-gap: 20px;
            font-weight: bold;
        }


    </style>
    <title>Document</title>
</head>
<body>
    <section class="main">
        <div class="container-header">
            <div class="header box-header">
                <div class="nav">
                    <img class="logo" src="./daangn/logo.png" height="28px" alt="로고">
                    <ul>
                        <li style="color: rgb(255, 111, 15);">중고거래</li>
                        <li>동네가게</li>
                        <li>알바</li>
                        <li>부동산 직거래</li>
                        <li>중고차 직거래</li>
                    </ul>
                </div>
                <div class="search-chat">
                    <input class="search" type="text" placeholder="  물품이나 동네를 검색해보세요">
                    <img class="search-icon" src="./daangn/icon1.png" alt="검색아이콘">
                    <button class="chat-btn">채팅하기</button> 
                    <img class="menu-icon" src="./daangn/icon2.png" alt="메뉴아이콘">
                </div>
            </div>
        </div>
        <div class="container" style="background-color: rgb(251, 247, 242)">
            <div class="info1 box" >
                <div class="info1-msg">
                    <div class="info1-msg1">
                        당신 근처의 
                        당근마켓
                    </div>
                    <div class="info1-msg2">
                        중고 거래부터 동네 정보까지. 이웃과 함께해
                        가깝고 따뜻한 당신의 근처를 만들어요.
                    </div>
                </div>
                <div class="info1-img">
                    <img src="./daangn/img1.webp" height="100%" alt="이미지1">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="info2 box">
                <div class="info2-img">
                    <img src="./daangn/img2.webp" height="100%" alt="이미지2">
                </div>
                <div class="info2-msg">
                    <div class="info2-msg1">
                        우리 동네 <br>
                        중고 직거래 마켓
                    </div>
                    <div class="info2-msg2">
                        동네 주민들과 가깝고 따뜻한 거래를 지금 경험해보세요.
                    </div>
                    <div class="info2-button-group">
                        <button class="info2-btn my_btn">인기매물 보기</button>
                        <button class="info2-btn my_btn">믿을 수 있는 중고거래</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" style="background-color: rgb(230, 243, 230)">
            <div class="info3 box">
                <div class="info3-msg">
                    <div class="info3-msg1">
                        이웃과 함께 하는<br>
                        동네생활
                    </div>                    
                    <div class="info3-msg2">
                        우리 동네의 다양한 이야기를 이웃과 함께 나누어요
                    </div>                    
                    <div class="info3-msg3">
                        <div class="info3-msg3-1">
                            <img class="info3-msg3-1-1"src="./daangn/icon3.svg" alt="">
                            <div class="info3-msg3-1-2">우리동네 질문</div>
                            <div class="info3-msg3-1-3">궁금한 게 있을 땐 이웃에게 물어보세요</div>
                        </div>
                        <div class="info3-msg3-2">
                            <img class="info3-msg3-2-1"src="./daangn/icon4.svg" alt="">
                            <div class="info3-msg3-2-2">동네분실센터</div>
                            <div class="info3-msg3-2-3">무언가를 잃어버렸을때, 함께 찾을 수 있어요</div>
                        </div>
                        <div class="info3-msg3-3">
                            <img class="info3-msg3-3-1"src="./daangn/icon5.svg" alt="">
                            <div class="info3-msg3-3-2">동네모임</div>
                            <div class="info3-msg3-3-3">관심사가 비슷한 이웃과 온오프라인으로 만나요</div>
                        </div>
                    </div>                    
                </div>
                <div class="info3-img">
                    <img src="./daangn/img3.webp" height="100%" alt="이미지3">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="info4 box">
                <div class="info4-img">
                    <img src="./daangn/img4.webp" height="100%" alt="이미지4">
                </div>
                <div class="info4-msg">
                    <div class="info4-msg1">
                        내 근처에서 찾는<br>
                        동네가게
                    </div>
                    <div class="info4-msg2">
                        우리 동네 가게를 찾고 있나요?<br>
                        동네 주민이 남긴 진짜 후기를 함께 확인해보세요!
                    </div>
                    <div class="info4-msg3">
                        <button class="info4-msg3-btn my_btn">당근마켓 동네가게 찾기</button>
                    </div> 
                </div>
            </div>
        </div>
        <div class="container" style="height: 1100px; background-color: rgb(248, 249, 250);">
            <div class="info5 box" >
                <div class="info5-msg1">중고거래 인기매물</div>
                <div class="info5-msg2">
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic1.webp" alt="매물이미지1">
                        <div class="info5-msg2-title">위닉스 제습기 판매합니다</div>
                        <div class="info5-msg2-price">70,000원</div>
                        <div class="info5-msg2-address">인천 서구 청라1동</div>
                        <div class="info5-msg2-like">관심 13 · 채팅 28</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic2.jpg" alt="매물이미지2">
                        <div class="info5-msg2-title">제습기</div>
                        <div class="info5-msg2-price">120,000원</div>
                        <div class="info5-msg2-address">서울 금천구 가산동</div>
                        <div class="info5-msg2-like">관심 21 · 채팅 37</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic3.webp" alt="매물이미지3">
                        <div class="info5-msg2-title">창고 팝니다</div>
                        <div class="info5-msg2-price">10,000원</div>
                        <div class="info5-msg2-address">부산 금저구 장전제1동</div>
                        <div class="info5-msg2-like">관심 24 · 채팅 6</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic4.webp" alt="매물이미지4">
                        <div class="info5-msg2-title">팻바이크, 전기 자전거</div>
                        <div class="info5-msg2-price">100,000원</div>
                        <div class="info5-msg2-address">인천 부평구 십정동</div>
                        <div class="info5-msg2-like">관심 19 · 채팅 18</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic5.jpg" alt="매물이미지5">
                        <div class="info5-msg2-title">스트라이더 14인치(파랑)...</div>
                        <div class="info5-msg2-price">40,000원</div>
                        <div class="info5-msg2-address">서울 서초구 반포동</div>
                        <div class="info5-msg2-like">관심 7 · 채팅 23</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic6.webp" alt="매물이미지6">
                        <div class="info5-msg2-title">삼성 제습기 13리터</div>
                        <div class="info5-msg2-price">50,000원</div>
                        <div class="info5-msg2-address">경기도 안산시 단원구 초지동</div>
                        <div class="info5-msg2-like">관심 16 · 채팅 21</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic7.webp" alt="매물이미지7">
                        <div class="info5-msg2-title">선반 판매합니다.</div>
                        <div class="info5-msg2-price">20,000원</div>
                        <div class="info5-msg2-address">세종시 어진동</div>
                        <div class="info5-msg2-like">관심 16 · 채팅 20</div>
                    </div>
                    <div class="info5-msg2-content">
                        <img class="info5-msg2-img" src="./daangn/pic8.jpg" alt="매물이미지8">
                        <div class="info5-msg2-title">헌터 레인부츠 오리지넝 톨...</div>
                        <div class="info5-msg2-price">30,000원</div>
                        <div class="info5-msg2-address">경기도 용인시 수지구 동천동</div>
                        <div class="info5-msg2-like">관심 19 · 채팅 18</div>
                    </div>

                </div>
                <div class="info5-msg3">인기매물 더 보기</div>
            </div>
        </div>
        <div class="container" style="height: 180px;">
            <div class="info6 box">
                <div class="info6-msg1">중고거래 인기검색어</div>
                <div class="info6-msg2">
                    <ul>
                        <li>자전거</li>
                        <li>의자</li>
                        <li>냉장고</li>
                        <li>노트북</li>
                        <li>컴퓨터</li>
                        <li>모니터</li>
                        <li>아이폰</li>
                        <li>책상</li>
                        <li>아이패드</li>
                        <li>가방</li>
                    </ul>
                </div>
            </div>
        </div>
        <hr>
        <div class="container" style="height: 300px;">
            <div class="info7 box-footer">
                <div class="info7-msg1">
                    <ul>
                        <li>중고거래</li>
                        <li>동네가게</li>
                        <li>당근알바</li>
                        <li>부동산 직거래</li>
                        <li>중고차 직거래</li>
                    </ul>
                    <ul>
                        <li>당근비즈니스</li>
                        <li>채팅하기</li>
                    </ul>
                    <ul>
                        <li>자주 묻는 질문</li>
                        <li>회사 소개</li>
                        <li>인재 채용</li>
                    </ul>
                </div>
                <div class="info7-msg2">
                    <div>당근마켓 앱 다운로드</div>
                    <div class="button-group">
                        <button class="app-button">
                            <div>
                                <img src="./daangn/applekorea.png" height="25" alt="">
                                <span>App Store</span>
                            </div>
                        </button>
                        <button class="app-button">
                            <div>
                                <img src="./daangn/googleplay.png" height="25" alt="">
                                <span>Google Play</span>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
            <div class="info8 box-footer">
                <hr>
                <div class="info8-msg1">
                    <div>
                        <strong>대표 </strong>김용현, 황도연 | <strong>사업자번호</strong>375-87-00088<br>
                        <strong>직업정보제곡사업 신고번호</strong> 2016-서울서초-0051<br>
                        <strong>주소</strong> 서울특별시 구로구 디지털로 30길 28, 609호 (당근서비스)<br>
                        <strong>전화</strong> 1544-9796 | <strong>고객문의</strong> cs@daangnservice.com<br>
                    </div>
                    <div>
                        <ul>
                            <li>페북</li>
                            <li>인스타</li>
                            <li>유튜브</li>
                            <li>블로그</li>
                            <li>한국</li>
                        </ul>
                    </div>
                </div>
                <div class="info8-msg2">
                    <ul>
                        <li>제휴 문의</li>
                        <li>광고 문의</li>
                        <li>PR 문의</li>
                        <li>IR 문의</li>
                    </ul>
                </div>
                <div class="info8-msg3">
                    <ul>
                        <li>이용약관</li>
                        <li>개인정보처리방침</li>
                        <li>위치기반서비스 이용약관</li>
                        <li>이용자보호 비전화 계획</li>
                        <li>청소년 보호정책</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

따라 만든 화면

 

'프론트엔드 > html css' 카테고리의 다른 글

html 기본  (0) 2023.06.28
토스 홈페이지 보고 그려보기  (0) 2023.06.27
반응형 웹  (0) 2023.06.27
토스 페이지 그려보기  (0) 2023.06.26
그리드 연습 사이트  (0) 2023.06.26

'프론트엔드/html css'의 다른글

  • 현재글당근마켓 보고 따라만들어보기

관련글

티스토리툴바