본문 바로가기
취미 공부/Practice

1주차 - Day04 [당근마켓 채팅방 클론 코딩]

by Breadbread2 2024. 5. 3.
반응형

   LIST.   

✔️ 활용한 언어 & icons 웹사이트

✔️ 최종 완성본 (Git url / 웹사이트 이미지)

✔️ 소스코드 (index.html / style.css / header.css / main.css / footer.css)

 

  활용한 언어 & icons 웹사이트  

- HTML / CSS

- heroicons

 

 

   최종 완성본   

https://you814.github.io/Day04-Market-Chat-Clone/

최종 완성본
[화면너비 500px 이하 일 때 화면]		 최종 완성본
[화면너비 500px 이상 일 때 화면]

 

 

 

   소스코드   

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>당근 채팅</title>
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <div class="info-bar">
            <div class="info-bar__back-icon">
                <img src="./asset/arrow.svg" width="20px" alt="">
            </div>
            <div class="info-bar__left">
                <div class="info-bar__user">
                    <div class="user-name">빵빵맘</div>
                    <div class="user-temp">36.5 🙂</div>
                </div>
                <div class="info-bar__replay-time">보통 1시간 이내 응답</div>
            </div>
        </div>

        <div class="info-bar__icons">
            <div class="icons-call">
                <img src="./asset/call.svg" width="20px" alt="전화">
            </div>
            <div class="icons-menu">
                <img src="./asset/list.svg" width="20px" alt="메뉴">
            </div>
        </div>

    </header>

    <main>
        <div class="product-bar">
            <div class="product-bar__img">
                <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExMWFhUXGBcaGBgYGBgfGhgYGR0YGBkbGhoaHiggHhomHhgXITEiJSkrLi4uGR8zODMsNygtLisBCgoKDg0OGxAQGy8lHSUrLS0tLS0vLS0tLS0tLS0tLS0tLS0uLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAEAAIDBQYBBwj/xABOEAACAQIEAwUDCAYGBwcFAAABAhEDIQAEEjEFQVEGEyJhcTKBkRRCUnKhscHwByMzktHhFWKissLSJFNzgrPT8RYlNWOTo8M0Q1SDhP/EABkBAAMBAQEAAAAAAAAAAAAAAAECAwAEBf/EACwRAAICAQMCBQMEAwAAAAAAAAABAhEDEiExBEETFFFhcSIygSNCsdEzocH/2gAMAwEAAhEDEQA/AKLMcDcgHXy6YgPCqr2Lr7hj0YZYc4+GF8kTkBPpjyPMP0K+Gecf0bVt41ttb78QJw6oawBZTYk25Y9N+Rp0Hww35HTBmBJ5xgx6mmDwzHJwMaZabiQJxC/A3UalAkx1mMbf5IJmbnHWCqbn7MDx32DoSMFXy+ZUSKfh9TJwLl6WZrMqrTKrqAYkiY+dHunHpqQRuD7sc1LTBaPKw64KyLujaDGZ2mKVfSoMCDfbFZmnqSfB4W6Y3tVqbSSsxgRqqVdqfjggTsBijywbM4oy75bTTXwyenTDlcuoXSQcamhkzADaTAtguhlU5qJwryq7QdFmMq5Jo1lSBtPngvIZcd2tPUAdzPXnjXvQQgCLDlynEL8OT5qgYZ512DoaM98mpq2tXJI3HLEmVeFdTA1TpOLo8Jp9Bjn9FUwB1GMs0YhUWZmjw8llBHh5n78d4rwjxI68j/HGoFJBYiMNqZcNhfMJcg0mYq5B1YMDfy5YslpKaZ1Aaj7J6HrixbhwudUYgPCw59uw8sK+qiuAcFPmOCgurzLBSpJ5jFVwPgjUmkgXJv8AdjXNwoj50jDxw+ZDdQR7sPHqlQVBsAyHDFAKt7R+7AeV4JpZ1kKCbYu3yjKZE4YuWJN5xPzPY1MqeH5QhiFPO2LGtkxUeYjSIjqeeCMvkiGJUYJp8OaYkeeHXUJ8cjKLKxsirsIEBFCx1tH4Ya+TVisCO7ULA52j7BiybIlZvjuWy25xvH53A0Zn/s/Q/wBWPhhY0+pep+BwsL5heoulFjWUKJ3xCok45oBG+G01vPljm1IraCUpT0xxkW56YgDnqcPiRGBqNaIqLo0nVcThi926liwAB3MAdN8S/JlANoJF4xi+KZiahoj2EYgDqy2J9ZkD+ZxfDieSVIWTSNdXzVCmPFVQdBMmPICT9mH0a9OogZWVk6+fQzsfI488zSOSRTJUDfRAJ8i0GPQDznrXZbLZjQVpsqKzMdj4Cd7WDGwuYiT5R2+TXqJr9j1H5RQDDxpJsBqW56b4y/GO0oFdqNBFGme8qm6pFmA5Eg2i98Y7OuKA7tHZ6m7sSSSN9Inlzj8mz4XmBUpEgRoMQfZJABDfVgg3w8OljF29xXKyfM8ZqkwalVVbSGMgFA4Gm6gETzHIsIjBuR4rWpKuuoxYEgh7hpYxe0mCLjkDisNJQjNUaQ07i7eccgeU8oxUcQzzMZJ2FhaYiL+dsdDhGqoU9V4HxJczTLrAhipG8MADY8xBH3G4xY6COeMP+jBiKFUA270N8VA/wjG2SqcePmiozaReO6HQcNKg9cSCr54S5r0xIakQfJVmSb4c2TBETiQ1Rzw9ay+pwNIKQMuSIEKfjji5RvpQfLE/eGY0HDqlTouNoBpRUV8uwku5VRcnkB1xRcX7RdyxVZDKuoh2gxbccjeYmd8WXbbPNTyuoDaomr6sk/3guKnsdkqdZKteuivUqubuAToIFwOUv3gmx8GOvDjxxx65Kyco70gI9vqn0E/tfxwVw3tsHJ70BBbxA9TE6dyBzI2xfjsxlNhl6P7uMr244Gpq0zRFOn3aDXEKviYLTW1tR8XuUnYYeCw5HpUDNOO9m5y6lSCWJGDlrgE7+L7MVXA62nL0Ff2hTpqZ3kIJnzxYahyG+OPZNorGiVoOOIkc/sxCtSeWJS2NsMP8P5GFiPV5HCwuxgennJFhghGWL/DHKmXjb7r45VpRyk4R3YisdTC3vbHUcSR0545TotBlfQYkXKN0scbdhIXrkS0TF/Xyx5kryJYyTf4739+PVloGwIx5NlaQZBvIsfd/0x6XQfu/BOZY5SpqXw3I62+OB8xl2UGpVrQByG3592OUc6uopqg28USJ87/bfEtfIuSDrDR9IWx6AhRLUWsSNJF5RmHPoY5HFaubdG7tTAm4IE22ief8fTGmzpIBBjSol2FgPQ9cZXOk99TZ5BNOTNzGowTHOIxhSzDmJJ+OBM6OeLLL06ZHtg+RkD4xgDitZUgW6wp394xgh3CO0BydGsNLAuUClfme3qNzvBEefpgngvGO5K1KdT9X84TYjmCpNj9uN1wfN01y6GmwEIiuhk03IUCYsUJAHjAuIkG2Iqho5gFFoopO471o9QjUShHmVxyPLC2mvkssLpUCf9uMoGINRlEnSdIOsAkSIOxsR1B9cPbtXlgJ11zPSgPvNSMZ/NcP7uoVKoDT8IMzAMEQYG6xsBi04X2MWsi1VqTqnalSsQSCJZwdwb4nlxY4JS/6HGnJ0wpe2uSHtfKD7qA/+TA2V7aU5bUraBIDqJ9A6gypiLgkX5YtaXYEc69Uei0R+DYnyn6PqFIHQZJJJNSTJPkhQfwxFPB3RSWKXYk4PmzmVLotQryYowDc5UkQw8x0OLBlqpJNIwOl/fG+KunwDMUiBTdVHMpXr0x+4xrIfeMVnG6+dypV/lZKMYnXr0m5GoGmqwYiQN7c5xo4oSlUZC6ZRW6ZY8Wq0q9M0XnTUEFhy5gjzBAI8xjzvIZurw3MMjAEGx5LUTkQfjB5XHUY1zdqu9puSKLVUWdWlhq5SdLXOwg2vin7QI2Z4dSrOBr78gECBpOtDPS6j3qMUxxcJaJcMnPdWW79sqBXUuoN9FgAB6wSTis4VlmztTW4Iy6MWYnerUtb0EAHkAI9Mz3P6ylZNkjwkqxAB8QF2PJgOc+uPZOHcKWnSRAICKFv5CJPnz9+HytYYVBbsSK1PchBBiR54mVBvP24IbIRe2OiiMcBWgY23w7UMSmlF4nDAs4UI3V54WJvkrfmMLBphHBwfL374apJOx8pOAmeCbeWHrVMW984RsnrDhIEbn1xIG07/CcVbK4Ft7c8dDt1+0YNm8T2LI12HK/rfHkfF6hp5isosDVqgdI1H7Ix6hWABkNPXyx5z2kpH5XVYxAggRuGVT+OO3oZfW17CzlYLSBB8Yg8mEEe+OWLbLOSpBja0bH+GKylT2gWtGDgiINbEKouSTAHr0x6bYqI89Q1wreyDJA5kbA+XljJ8Yy1apWeqqEovhm2w3tMkTquMbCnwrv/ABJmvCTtT0H3SwP3YIPZZTvUeeoKg/YsfZibzRQ3hyZlOFTV8KIzNyUKSx9AN8WWR7GVS3eZpqWXYnwpUqLMcvCskHyOLKt2foLvVqsVI/8Aubee0fZyxG3DaVOm70XYudhV0mTtpDDTE9TO+E8ZPj+B1jr7l/sOzPZlgFNCrDwAeSvYAsJPO5g2vJBOAVTO0TfLd4eqXEe5hf0GLHg3FTVpwV0mm3dkT0AjcA7EbgXnFvlKhnyxwzySUmpKzqjjTVx2PO+2PEK3eK7UWo6liGnxFeYkdCOuLnsZ2hzYy4SjRaoFdhK02YCYaCQwA328xhfpOo6xQCqWINSQoJIkJvG2G9gqi5ejU706JqWUyD7KyQDy2E+WOhu8Ken8EKaytX+TQjjfFDtlX99KPvfB+UzGafug5qIzSrqacaWgFWMT+rvGoTcgWMwKe0FKJ7xY9b/xwHme0ZBLU6qCB4Q0e1IMyT7MACDiEGr3gisovtM5UqcV27ip6zQA9fFUn4jFPx/5caT99SZUAkkvlrabzapO4m3TFq3aoQuurqcgajYCTvGwt0GKrtBmXr0HSmrOXiAAdtQm+204eDer7EvwCSWn7mZTgFaszuaUTpIMkAQSOoM7bY9Gy9Jl4OA5DSPFFh4q91A6XicY7s3kny4qGqjoTESLRDSSffjYsQeEhgfnH/jn8MPld5EvdHPVQsEr0pq8GXklMn0tl4j4Y9CQdDjFVqP+k8NTpRH9wn/DjZpSMb+/HLn4j+f5YIkxF98MemMdCHrhtxzxAehJeRthyU/PDQWvbE1NWicZGodoHU4WOQcLBsNFQVJMzhVQy7nE6kQDBmOnPEGYpt9uATlRCjk3O2CaYUC8enUkdMdSiE5zc+6cLStywJPK20efPAoKVEVNh6YwvbO2bJHNE+Ikfhjc+Im1gOcYxfbamRVpsYMpFvJif8WOvo3WQSXAPkclUdC1OnUdVEsQpIXn4m2W18LiKVO5qKqNrVfZ0nUCINxEjbG3q8IGZy4DFgaaMylWJXw0qTBnUpd50rAIIWI1aTHmOf4tW1aQ00rDTu6hYjQSY5bdLc8eo/YRA2Ry+up+plagMVNGlkDdCNYPvAg3g74MTj+aosQ+VdlGzFa1OfMAyMR8K74gMrUydyAAHUTa5EkXJJHNjjXjPTS1c4v6458s1fBfHF1yU+W7UZR2C1Vak/Sqonaw1jlcbjEvagDuXKiNJQ2+ss/ZOKPtplQ2WWroAbvANVpKlXJHpIGK/LcRenl9B8dFqbAyYNMkGNJ6eXXaMCONOpRC51cZGh7DuO7rmJLZippXa0Jck7KJEn05kA6hMprs51A8rhB5Bfnerz1AG2KzscgNHVtqYlvM7fZtjUIkY4s8/rdHVih9CsanDqSr4VC/VAH3YGqZfoSPecWNQ2wDVOI2/UtpQLUy/mcQjKnzxB2hyjVaDoh8R0xJ6MpP2A4By2TITSchliZBLM6EyBErqpNpHPTcdZvN8cVJW5URnJxdKNlwKJ+kR7ziOrQHrgLs9wo0BU1hF11CwWnOlQYhRIFht6AYtSoxOVJ0nZSO63VFNxDLQtscLFeFODt3zR8A33zgniOxwJxGp/3ZH/muP7DnFcX3L5OfqFsWmZ/8Ryg+jR5fVrjGvEnGVzX/AIrTt7NA/wDyD8caZqzDbYYnm/b8HMjr1WAnnhiVSbxiOpmC3LHacm2IoNhKuemO98x5RhjHRaZOGCuD5YJrJO+bHcc79eowsKGwalnAQDp/njiVlaSxIBm17YFdTcEqR8CNvz7sEgbjkPvw1GiMq5gSAsxaMEHMiBI+OBisnSN+WOtq23tyMxbn05Y1G7krMpMgydo5D1xlO3FKVpPIOlyth9ITP9gfHGiVYmVj7vU+uKPtXnMv3T0+8pKxAKjvF1FlYHSFmZMR78W6fUppivgtMqhbK0tbVACjBnS9NVq5ZFLZgHkA3hv9K9oPmXEMuFYQwbUoaPnDcEN5gjcWIINiSB6RwTKUqlOgzKWJp0qbBpIjdToYH5zGCBFoW2PNu0VJu7o1dBRf1gDmZqOCmo+izAi1judRx7BFMAllIKnb7PQ8sQ1qNRzq7yoD0LsR7jMjHaOeGzj/AHgPvA/D4YtaKqwlSCOoOAMZ9qtVaoR6lRlBkamaJ0mCAT5xixo05CiLBvs0MAPjHxxZnKhhBAI5A8j1B5HA9ah3asRceEjr4SDH2b4xjTfo9rHuWUiwax6yAT8JxsVbbHn/AGBqFVZZ/wBWwPky/wAZxuqT8seR1CqbPTwu4ImrtbFfUbBlZ7YBOIoqcBnHR64eMNicEw2PPDiLb4aBjjtjGAeICRgDOrOSVeuYYfGmf82LHNrIwG1MmhRFvFnAoEjcikP8WOjCrkqOXqPtLemNXFmnlR9Oaf5saZ5G2MvlKZHFcxqUytETN4P6k8rY0VODziYt92J5tmr9EcqJCs3IxyiSNhB8+mOplxMkwDiFqZBsSb7YkNQ4lvaPphFgSLW54YjDaCPInfEpy8XFjjAoZ8jTyx3EsHrhY2waITw1WExv0th1XKGmIjabkxztiapW02ZQJjnJkWwnbfUJAEG1pB3329cCwkOXliYG42O8eWH5jMpSQlgQLyx8gTbzMHEg0gkzECOXp163xkf0mV2GUgN7RI8wdDximFappMz2RHl+z3y9flGYqVQlS9OmjQBT+aXlSSxEGLQCME5HsRkaZEUQfNizEHyBMA+gxB2j7UPladBaNi9NCDE6ZUwBNvmiZB3ERfGNzva/PNY1DsCDThLG/Q+mOxQzZN06Qlxiaij2oFCktBqTO1MaGJfSRUpsYKjSwiwBsNzzucX2kztSqo2CrJCiYBO5vck2EnkFAgAAPyfGgJ1K5Y+0fCZPMtcST1jEWcZXB0mJ5EH16RjvRGjNDOH8jHKeeZTqVip6j8evvw/McNqSYWfqkE/AGcHUsimkal0EjmCPvwHsYlyXaVhaooI6rY/DY/ZjQUs2lRdSkEfd6jfGfTg4B9mcXnAeDFlqVFWCrIuiRGk6iCCxBkaYjUZkEqYwEw2absX2Urii2apuGSSndMIbQviDK+x8TONJj15Yv8pmEaVDrqG6kgMDzBUwQfIjG67BZMUchQQzdNRkgmahLmSLH2uVumM32l7O0zUIZQeakjlyxz5sCnv3L487ht2KXPZ6ktjVQf76/wAcVrcYoTAqK3oQfuxsOzv6PqBIqVEGnku2r18vvxrM12ay7bUqY9EA+1YP24kuj9WV837Hkn9NUure5Kh+5cTU+IBvZpV2n6OXrt91PHqCdnqI8Pd0/wC392r8cTHs3ludGn6lEP2sCcFdGjebfoeYd88WyucP/wDJmf8Al4o6/aFZgUq9t5psPviMe8ZLLd2NCkaB7Ij2fK3LGU7bcPyJYtWqJTqESS2xFhfoTyi5g2MYbykEI+qkea5bjS1DpFGq3l4PvZwMVX/aDL1VpMoKaausyDq0aqexXyUmxtO4OCM5xjK0WlGLfVU/jGMvVNFKR7nXpgE64J8M7EADn9mK48EYbrklPNKezPQeyHGKdfPV3kkvSWSAw9ju1O9xMA42TU1Yyp323/PXHjHZwV+9K0Cabsh1PeALGCQDE6R6xjXZPsyK2rvs6zuPmKQNJI8JIJMjnsJjC9RpcNxIOmbwU9twI/MedsOaAdQJHuxjP0b8VepRqJVJZ6L6dybXAF+Uq3uI6Y2qOvnPn58vdjzJxcJNF073IVTVJHLb0xMyE8tvMYVKjJvP8sOY9Ij8xhDLfkZHkMLC7w/RwsYINVq6eQgTO23qJkcsDJAqSZIAvJG3K20RzxymIIaCAAtpJ1EgE33/AOmOqCSSot/WO++/kPhgM1N7hOZaJIe4sQYE8x/D34yn6RKRbLqqmW1zeB81lgecsPgScaTudQUgajve20WJ8vPyjGY/SDTc5UsZWHHkZ01IM8/5+eL4HWRCzWxT8dyPgoVKjfqqtKiusDV3VSmgGw5r4tS7lXaLi2MzVB6LBHEMoAsZDKbqynmpFwehxvk4MWyQrU3JVqCPVQyQxCByQRsbEiZg7acZ40adeiFLqACBSqMRKs+ptDDfuiVJJjwEg8yD6mGaapPgjJUU4Aa/PDqTwYxAVam7I6lWUwVO4I5HEygHbFRQjQDviRafJSR5KSPuOFk8q1RoEbSZNgOp8sWCUFB0KZGzvG/kOgt9k8rEIwZchRJEMPCwQETafGBIPk0TOKipUbxU31D6rGD0MNvv1HP0xdUqzZdjTcFqLH3joQeox3jvDgyhkuwBKsNqi7nfZxzHv2nAo1Ho3Zv9JuSSjTpVBVpGmiJLJqU6QFkGmWMW5jGny/a7h1eAM1l2PIMyg/uvBx8503kYfIwKNZ9PcOoqqsUYuHdnnVIGoyQv9X+JwV30Y+WcvUamZpsUPVGKn+yRi3y3arPUwAucr+jOX/vzgUaz6RFaT7t+f/TA9SpLY8KyHbriUgHMlh506J+6ng+l2+4kraz3VSkl2mmFJ/qq2pVLnkBfoDgUxrRrP0gcfrMy5bLvpM3IJEkAlixF+7X2YHtNKncTleD9llzFdRmq9WoDMAHSJgmIMwtohY5YoM5x2v8AKHamyh6ilWYqpADMKjxrBAlgpne2KzP8W37yq9Y8xqISfqrAw2i+4lm37YcK4ZlqWimaa1h7K6jUqN1BB1EetgDF+RxNRxVVQQUK6vaOiRGogyDvAA8z543Y4VkRlQyUYJX26dQi8bxMfZjyKlXqOygu1yOZAw0sDxcvkli6qOa9KqjRZbiL0KbGnU0GoVBGmSygVLyRFido+d5YhzGep6tZao1QQQ8iQR7J90Aj3YZkOEtXqslNqYKgftHVeQ2m59wxdL+jrNs5FR6SIF1F1ZagG0KUBDCQZBIi3nhbcUV7l1+i11JzLknSzISSLkk1CTa0749EWmQ2wv7PUeuPPf0VAd3VZfCp7sBSZEgG5JvJkn3xtj0OmsbmAfeTyt5TbHk9R/kZ041scdtBnnsByOEQSuqNQv8AHrhj1WTwkczB+3444apSLXO09efv6Y57H2TA9XkPgcLE2mr9B/hhYG4bRGFZvm6eXKZAHpuDvfa2OtKgDfp108yPQicczhYg6d5E8huTvF7fm4xyhmCR4o2FzcgEXgesj8nBsnZNQqaW59GBAEXgmDy/hjOfpCbVkyY+cBbawfn0vi97x9pXVG/Kd/wA+HXGd7aE/JHUEkK6zM9Ynzu0T5Ww+F/qx+QOqZNwYMeGU7iDll95NOL9ceOcPzEER0/P3nHr/Zmv/wB3UvFMZcDSAOQ036zI+Hljx3L0fCpEk2tF79Ou+PQ6Xmfz/ZOb4NK1MZtFUEd8oikT88Dakx+kPmE/VNo0g5SiSI9kAkEkXkWIAPOZHl9mHUssaXjaI5rPLzPX0wbxF2zVNnoGK1zAuatMXgE3NZBa93A+kCW67JgOc4itEaKft+UH98nf028sR5XtA6MC1NDB+bKnz6j7MVmTVfWeeLrhXZ2pmSwpBSVWYZgJJsiKTvUcghV5kHoYJi0HH8tXXTU1IeRYSP3lm3rGJOHZpUlBUSpSJG1RNSncML2YYlznZGkMoGov32Zpt+vRYKsrFUPcKPE60nZEZwNJLNB8MDNZ3hxpuyMpV0JDA2KsLEH34wbLTjPDdBNRbq1yQLevl5jl75NO7DFlw/NqVNKqs02gsogEEbVKc2DjpsRY2uK/iGSaiwViGVgTTqD2aizEidmBsym4PxxjEBfDe+MgKCSdgNz7sS5fItUuPCv0j9wG5P5kYP76hl0I0sahIgyCSL6gRvvp2IFue+MAbksmwvUa/wBGfCPrHn6D48sWOX7Q0qLAU0+UVPZDEfq6YNrAdN4EDFW3GDFqVvMKP44JTidTwuhUXWJFwbEWGxFsazFZxSoVOm4JsZ35Yh4fSuWsSkEAiQSZiRzAg29MO4o5Z5fxEySfM9ME5J1C21LIWSD0nchTG52X34VcGNnmc/RXLpT0pr0lnbSpLawJGxmAQJ2v1mMeuQ01VKLKsCwIkxNojcRcX3xaOJp6hV1tMQukkXtZQDFukTe04qKueelWYrUkQAF1c4HzdrbThnKwRVGl7DJRp53XmVCqDEvIE6ICkEERcGY5749F4tmeHNTNRatIKLylaj9hg3npjwtM5V73UTdWPoTMHGl4hkKCBmC3CmxA3ANscmZQ1K1uy0LrY0f6MEAoVD/XIHlCyD9uNiazgbEmxIO+3wEdMY39Gy/6NF/bZpvyWnP3z7sbBi4Ji7DfqeRMe8HHFnV5GNFqh5rspEzczIubdegxGmegwTBFzzMR+Y9cDrXaV1Eg30iCJ8sOqZdizTA5wBtHSPrYlRm2R/0u3Vv3v5YWGf0HU+mv7h/jjmNQbfoWuYBJVYUWuIkG1iRy23xEwLnYavEInkNuflMYc9ckgiFN7EXIm1j7PszaJOHFjpkGGAM3BFuV5ufCPXE0KN8Q2G1gZEgAkrHxN77nrig7aA/JnlYANIDyBYEfH7IxdtVMj29vF4r8/wCrG3TmfXFX2nYHKVQxIB0GYBIIYHSLgnl6T5QKYX+ovkL4AeAcQSlw6gajhV0FYiS1zIHMmOQ98YwDZlKI3JaPLUR0tZV/N8E8F4Pmq6L3dMsFkAswUMBJIplgQTAN/ZEDnbEuf7M1RZqdamsEtOmr4tidaIsJHmYx6mJQhJq92ybtmZrVnrGWMKNlG388SZLNGk25iQbbgjZh5jBj8Ci61lMfSUrPoTI/PLEVbhFcXFMkdQQZ+Bx0ChvE8oKwOYpAawNVZF2Yc6yD++vI+IWJ03HZRcvURBUq92QaoKB9JcuFAabkQneLYE3XcFhjO8KzbUmBkrBlSNwffy8ueC+K5FSDXoqAojvaY2pkmAy/+Ux2+ifCd1JwDXUeFtlNT5SuUDOFLsqsxpalVaZIhvETqZVVRCkMwIAwB2k4bFJKjaSVOjvFLaqiRFPvNQu6KoQEEyBeSJxmMpmnX2HZT/VYqfsODflVZ10u3gmZKpqJE3DRqO55x9gwTAD0DNgZ5Rvi04dmEKNTr3Wx0ASdchddMkwrhZN5DAaTuCoeYza0/CJLH5o3Pr5YCenUY6yYI2VeXr1OAEsOLpVRlRYKsJSt81k2lRuCNipuptGA6ORAkklmO7HFnwzPqVNKqCaZMkD2kbbvKc7MNiNmFjyIZncq1IiSGUiUdfZqLtqE3HQg3UyDhkYZlh4hIBW4YHpgfNZOHDrIUkSOVriMWWUoSJnf8Dt+f+sWfaSPX8D/ABGAzFDxFvH+epxZcOpeEW+cLxzYWBj0+3FXnWip5mw984vxlwqhlgajMAn4b++BGAjBVfh9BxYLqJ9nTVBjYnUSPLljJ59AMxCiBO3pKzfrE+/Gi+UE1BqO5nmCb9V39J54z9eDmG8mj3Afn44zAFUECkFtIDMRLA2km4EQRAONLxjPoysDUDAqVERuQQJ6CSCfQ4x+UoFmDmdIdp6SJj8ME56vbawk4lkwqbUn2KRm0qPS/wBHcfJVVoIZmtuQYUSY5Wn3Y1K02RTILWEyb6tiAo9F588ZnsJWUZNBAJ8W4OxMGOpiB+8MaChnQzEktsB4rXgwQI5mRHL3Y83L97KJbIfUViA0C3vJnb34fTQqpMFgVG5uCei+gX44VWsxsTyGqN5tFvj7gMIZiUK6vEdp38PKOtt+dsTtGBflJ+m3592FgvVX+gv72Fg2CmPp1kKaSfEoAuL3M7b84j+BhzBTOsRMmfL2h130i3QzynELJ0IB3O0yNQi8biLf1R9HD0TSviOqQCY+agVQsEzf2oPmOl4inFoCwIJBm83vsNuvLyOKjtbBy9VQGuFMb/OUiQPf+Ti1LqLCSdUxNxE7Wt/P1xmO3Mju6iSoUlCdRvYFbeWkgyOY3xbAk8iTZmUHCOO5mll6dCjRBYFoLsqiWZmA8RF7i030j0wa/CM9XcLmc2KNjK0g3KJAcwZmLS2x6YoM1Xy9WvTJ1oyaNSh18bhtRYBp3vC9Auwtja0uNJUIFQGLQQTpkC0gm3sjxT1tecd2WM4rVjXz6iqnyLgnZLLUpYhqhAI/WMzaiYM6bLMHpMmxnHH4BlCrupamyiZR7G0z45IAF488RcT4qtP9WniECRexnxXFxYfEA8sZqtxB/EA50mAyyfEoteff8fTHLB5W71BcorYHz/DtRLa7zBJnxefPEGVarReTB3FwCCCIZWHzlIsbc8TVa/mZkfaD/L8nELVwCfh7htv1x2RyzXJKwjiOSo0dNRRpDANodpamSA0f1lKsGUnlINwcUWb4tqkITPWP4/hODtalagNNW1KQCSZSREry5zMT5gYAp8OUEHYTz3K85H44t4iYbAaJK3aQTzPP34JXM+eCw7CArnSdxMgDoAbThlXKqbwvPYaSf3bfZg+IjAzVzMg3xfcI4mroaVUE0yZIHtI23eU559QbMLHkRRtkemofAj8MQKjqQVIPmJ+GGUkwmpag1F9LEFWBNNx7DrtIPrIKm4IIO2A82sFLgyTt5Am/2/E4m4Xn0q0zRrAmmTJA9qm23eU58t1NmAg8iBsxwipQqDnTjUHWSjK1lKTsJBBU3BtywTFNVP8ApC+78caSp4QJE/n+eM/X4fWqPNNTeBMwOliYxYZfhmZf9pVUAAf1jf0gE+/C6klyY7xCrIMDl092Krho/Wkx4YYT6R91viMX9XIZej4qrs7LBCHTDXE2G8TtMe6cdzHGGzhULS0pRWpt0c09wBCgaBa/2YCk5cIxd8L7B1UVu+qqpN9IUlVNxd2KibXjbTjJ5hUWtXor+sChlVyVgiw1QsjmSL+t8Xeay+ezzMKtVQBBbW6rTQMfoL06wdrnFbwLJUqefFKpUR6YYAsfCjWBvcwJsb8sTi5K9Tt+lBaTNz2F4SadD5T3vtiFTYLDQ25uT3Y6e1jQ1WeG1BtN7Cx3knqTtyw2llUWmtNAoQSFgSGqCWEHncmPUeuOUXqGNashUxqgEAbmw2vf388eXObnK2XUa2HmqE0kEWBmBJmIB997R0w9axZU0kEibyuqSBBHkbj34iWpUe9RWBUxrgMI52HTfEeVptzQoQY1hQRp9F5Rf44VGpkn9Jt/+N9n88dw/wDpLMf6wfD+WFjBpjtLWKiQSoOna6kqpMzddrDznAuZbWFKkyRJABMJqVmvMAlViORHlexfMIQV0gjQdO9u7FiT5rJ94jmBWZN9Eklirm2xAmSSDLQLCR5e7CpEGx9RSW3FxeOe4PijczpvF7csVHaoN8lqXnxKot7Ta0MDoCT7XPT54utQ0usturBTAMEggxpkE295GK7PxoKVDJ5kjSYEXUcjd+sMhubHDwemSbNseb8RyIqAOVjTo1yNt9IJ2BIDDTuYtgnhef1AqQ0CCNQgsLMInmdJUeo9cayvw2nVZGLgEHWVXwgsCpUkGxgTHk0YYvAFVZLd4/tAGRIU6dCqJ8FlF+R8oHpLqYtbgoz2bzTVSCb6Q0tfxd2DqPXlsdp+NbXBkHc7ix2P3i3243nC+FotGNTA6JPeGQNTBhKHwkQoW0+0dxus5wBKhLrZjZpMqw9kgne3hJN9puYxHxoJgcTC3Hj+bH5n4jEbghiAJMHzk2298X8sb3McFVRUUBfCCylh4hUk2sLINQ23PpiizPZ6rSIcrriB4ZubaQJAMGCdUQdQi84MckWBpozlQk3nqD0kfw/DDHB03+zYDr92DlyxJgTJMR5g3j4Hfr8I8zTJETHhA8hBt7ot8MVABNSJgcvzOO1RHM8o8sF0kERy91hcE/DEOrclRYmI5DYC+4t92NZjqVbAGTP8jiVKo6A725YgAIa+mPatu259Zgn4Y7WIEmL7CTzMX+3GMTh01E6IK8wY+zbFvkM9T7uolUg0vCQgHjDNINWkdlKwsgmGFuhGeDk2g3sOpMiQMcqEEad77+kg+7DxbTDYZlK6jwzLEwLwDJ8O8eXOBhlTNs6wAwPUQD8VE+V8QjJMzAaWLDkBsB16ct43wbl8jUMwhAG+oQPcWgE+WG7bIJWNwdmg6lveJv7yAb+s4tclSZNQQimhiBJJsAGib3Im5tOIFX4m/qd7+/HFJLXNjzPLYfn1xPxJ8C2H1Si0yoLXZA7Te7KN/Qtim4dmKgrK2gaS25VWIU2E6geoucHZ2oChW8mCI5wQZI62xZ5nNd3QKINTu1PU4FyA6tC39iwnqQJm2mmLZPcxc8P4ixpKpmP1Z0iAS+iN7EWA29LY1+UEiF1Ak3JmwkgajuLzz88Y/s7lCzxKwgsGFmgCb7T5Qdoi+NYlTkLGJufmhiAZv4TA5+6BbzMz+qkWg3yTUBMxqBLGTewkgTzAnz88co3JA1SWMm9obTfmBO1+hxGrkeHYgE3MkANpknmLD+EC3A5Hh2IBMkzChtJJPS0fhG0rHv3LHuX+kn7h/jjuAf6Nqf6up/6g/wAmOY1jagfJV4YsTdo3Y+I9BIHVhvK9CDJnzGUBLALZPEyAmxAbziQCQYiNMje7eFoSw8JgRBhYZog89RET1F/rQWOHsGLMQFYncxOoiRI3iGvAk8ryCTUdgZmRmUskK/hiSZO4Nj7MwBtsSOUg2Vg5BMweRAAggi/9WYPSRvazznD2fQfJVA8gdRMg23JiTtyJwPVyBQQZIUhjJJuIAkCb3YzffkAMYFNMaKS6Ia50qQnssCYI2Fr25nxGZOrA2dIS4kiIA2i5J6nUS8ncWG4xOFeXqAeLx6R5m4B6RHzTaDEGxcKTRqsWkkSCIBIDi24mLi/i3kYNAqzlamQdJ9ghdXInSA3pMhQAPpeWO1gWjRqhtRZo9mLrTJHisS3mSTc7YfVpKwWmNcMZBVTZQVYhoGxEg33BPIxLUPdU73BJ1EgQAQxGwI3K+t/LAG0gtGminSSZMaiTMANrvFovy+kRyjE1OmfCoF4II2GgBVifSANjEbTgelUIu2oHUFvyA0tJMXe0eduoJkpZnSdmDOwe0EydUgcyfZA5QOmBQCt4twkVWaqoPsVIULOptJUeYMgeQsOdqTNdnC1QQLAnWgg+EEaQCLiQRIN5B3JUY2ecVjsSqge0ZMXASbe2bnnJjmBDRS0pDXgmZjUZINyDtBBncSDtikcsooDjZhT2cqe0V3aod1F1AK7W31CP6p8ppq/DqgYoU2NgWjpEk2A2tvIPv9JdgRBmbncSGJVombbKBJjxb47XyKvp1inqAkyPn6iORtuo07STYiRikeo9QOCPM63DyEBPzpDcr+EssHYjUBHkeeBamVloA2MTeQwm2k3HwiT139Rr8CoVU9mDMr4jaQADe1gAJP0ZuRJrOI8EDOaghmHjLKDMKV8Kg89JEC9yPU2WeIHCjEDJOQCPpMfInYH3TGKuqzKSiwXgkn7APUxj0DOdnDIZWA1lVgCFVSx8VuUMJgcmnYHGFr5J6eag+ABgrEzCwb7DkLzi2GakKE8JrkJrMAkAz08wd9sC518zWbW7HSWEwTABHlyN8c4jXuaakHUYnYEDp69OQJxo2rA0dAja23KAOsqAB0ILiLYvexioXUfd9/SesxhOSo9mRe/Lkdh5Gbnri1y3BHYadMeEmT9MMIpkmBMbR851mIjFpkuzVRvam14sGNpJB2NoMneREk45HKK5MkZjMZLUUAMSQN7AnYT0Fv5mcWFDI1+9UVKbBdZ9oCCVvDRcA2BG3OTIJ3WT4FQTSNAuTBseQ8QtsGA/fnZcE/IdTMDOgOIAiSbEiTuRtImwMnbEX1PZFFD1AsjTSiO7W99TSBqAbYTB8UnfaQMHjOiHIXTTK2aSANJIMXhYI5AdZF8RZ3LGoraRDOASBOr5pgGAZYaZBO+rD62UD6kBbTp1EEbGSRN7Gb2HQb45ueRlyNbPlFY6QiaY3MCGI8N4B9k7T0Mm6yufkkBdII0kDV4f2kEQSAfCDYTYxzwzNcNWo7aZEoGMCFkWWeewmBG42OCwkudOwXVtAUzbnN15EcxsTfNIO5zu1+gPs/jhYd3FLqn/AKY/hhYlXuCwvLPTVgSfEAwMDdAwgC1ybG14O9hiMZkO2qQFtP1jDAzFhMG/UcxiHKt+0LgkAKQSpDTaIgyTcwOWkib25kaMNpMRvUEECIuDc7WaN/icVbMSGqNTHV4BY23M2npaN7THLDFJA8TGTBUaZHiICzI6i/oDvMw9zIcCRqgsNJ2sRq8VrXubSDscT06JIABFxadQ0gWFpFpH9rywthodWqQ5VTuoggg6TcEgC9tEf2R5ANmSQJ8InabD5kzG0xbY8vM9svaWM38U30m1pi/iCiPT3tq5HWQabggix3BT5yyLEXB6kUxExOCt+Re4zJ1itNRPiOncj2QNJEHe87XtyjEeapa1BLkDVqJEFYCtYxbTabdJxPmOHs4plSyRpIM3K8jImLieUiTiLL5VlAZyCCpu6iFuGYQSdgGP+6PTBrvYbCauW0eIkx5ROkiYPICdyTAImRJiPK0g3tTKxYmLxBgG82MEQN8TZlF8DmwtEiSADILTJsNXum/RaiPFp62PJwwADHk1xHIaTB54DQRqP46gZWYgL4QJ2BkARJkz5mYw3MeIEkkgKfdzN94vHUMo3kyZUzikgMAJYrAHORqEXEibny5TispmQZIDOFM8/Z0sBFgsAx1vY7HbWYgR1bwCFJ0wLgCSSFEAEG7sf93YwMSMJVrsCFZtRvYGRe4mdrnYm8TgvKw5Qm5SwLR4jHrE+GTv6c8SU6BsACylpG2k2LC4Pu6idumNWwAlMqgAJA3m50kq14vvc3J5X6zNQNOm4bmNyLDTGn3e1uT0PLBaII0gAaYEc5ksNQ89PpJvyx2nmFCyygaWEgqBcny6ANe/sA84xjbFOzodIKMCXAmTEMYEGL+F/ZO4C8oGIKvDVZ6jKE1R42IBVrw4INtpB+sbgQMW1bJh2NrKtvaLMAbtq1c1BXa567YkKMkaIRBflBi6rtABEbeXQYeMnHdA2sxg7PUld/AvdqZRdOw3Yqw3Ljulnz58w8t2bq6kJYQrLsLAAFlYg8ydIgbz6TvnpNfnOpAxizeFrneSZM9YtC4fSUsNRIiVIEqbWgMSfaJ/tDFPMTqhdO5FTy6Uk0L4AAx8V2DAg8pmBETfSCScNoqXWSQG5WJ0+EWMcibCOURMCSafDSSJB0MJ1AkliJEyN4C2PmvS0Q4YU8S+E7QCYMaoFxO2+9juecZIbc7k6QDBiZ5zAPLVEAC0AHrfES1CoESsxpBvaHKxboJM38O3iGDXoOvi2IBJCjciACxidV+QgaT1wxGQyGALsRMSVJMkw1hEiJ5agTE2FBBKmbCKqKNIC+1pldMsx8zEaRf5wJucEJSIOtiFLAgSbSw0eEK1rhb9Cb4fRoBkZTqIUysiInVAiYIECAZ2AwNTV0KlGFlAAFzBZkFyNhfe4hgJvgXTAyWjRjSzEKSCBLSLjRCwReynVzk3GFQpEaWYhTESWkXXTCwRewJb1uOUS6wQ6MAYsouYJYC5HI9RIho546C4K1EYCxIXcwSQJMWjzEjxRzB2oFgPyer1/wDdH/LwsH/0yn+rqfun/LhY2qPoAky3s0v9tT++ph2c3r/U/wALYWFjMbsGL+1qfUH+LFdw79vR+r/mwsLAXIZBi/sqv+zH3YGo+2n/AOr8MLCw6EfJO37er/sh+GGD2H+qf74wsLCvsFDcj/8AUP8A7Nv+JmsD9nf2+Y+v/nwsLDy4KegYd6X1m/4NTFVX9v3fi2OYWEfKJy5CuD+xT+uP+MMWNL2X9/3thYWMuB+wLU/xH/Bgbin7NvT+OFhYCJsJHsH6/wDgpYCP/M/vthYWGQWHcT9pv9ufupYbU9hPUffmMLCwFwxnyWOa9o/Wp/3cRV/mfWq/3ThYWGnwN2GV9j9Uf3sS0/nfXX7hhYWF7iLgGym1P67/AHLhZ79qPrL/AMStjuFhZcGGV/2ietL+++FmPaT0pf3sLCwgCuwsLCwgT//Z" width="80px" alt="상품">
            </div>
            <div class="product-info">
                <div class="product-title">캠핑웨건 팔아요</div>
                <div class="product-price">150,000원</div>
            </div>
        </div>

        <div class="chat-box">
            <div class="chat-me">
                <div class="chat-me-time">오후 3:45</div>
                <div class="chat-me-msg">오늘 문정역 근처에서 7시에 가능하신가요?</div>
            </div>
            <div class="stranger-chat">
                <img src="https://blog.kakaocdn.net/dn/OsKmr/btsCX5J2OjA/jtgSIzmkpxhgIFLp5dw8uK/img.png" alt="프사">
                <div class="stranger-msg">냐옹~!! 냐아아아아옹~!</div>
                <div class="stranter-time">오후 3:45</div>
            </div>
        </div>
    </main>
    
    <footer>
        <div class="schedule-info">
            <div class="calande-img">
                <img src="./asset/calend.svg" width="20px" alt="캘린더">
            </div>
            <div class="detail-info">
                <div class="date-info">5월 3일 (금) 오후 7:00</div>
                <div class="schedule-title">빵빵맘님이 거래 약속을 설정했었요.</div>
            </div>
        </div>
        <div class="info-msg">약속 시간 30분 전에 글기맘님에게 알림이 울릴거에요.</div>
    </footer>

    <div class="media-info-msg">화면 너비를 500px 이하로 줄여주세요!</div>
</body>
</html>

 

 

 

 

CSS Part 1.

- STRYLE.CSS -

 

@import "header.css";
@import "footer.css";
@import "main.css";

body {
    font-family:  -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;;
}


.media-info-msg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(163, 163, 163);
    opacity: 1;
    font-size: 25px;
    font-weight: bold;
}

@media screen and (max-width: 500px) {
    .media-info-msg {
        display: none;
    }
}

 

CSS Part 2. 

- HEADER -

/* HEADER!!! */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-bottom: 1px solid rgb(195, 195, 195); */
}

.info-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 20px 20px 15px 20px;
}

.info-bar__left {
    margin-left: 20px;
}

.info-bar__user {
    display: flex;
    justify-content: start;
    align-items: center;
}

.user-name {
    font-size: 20px;
    font-weight: bold;
}

.user-temp {
    margin-left: 5px;
    border: 2px solid rgb(147, 147, 147, 0.5);
    border-radius: 15px;
    padding: 0px 7px 0px 7px;
    font-weight: bold;
}

.info-bar__replay-time {
    font-size: 14px;
    margin-top: 3px;
    color: rgb(195, 195, 195)
}

.info-bar__icons {
    display: flex;
    justify-content: end;
    align-content: center;
    margin: 20px;
}

.info-bar__icons img {
    margin-left: 10px;
}

CSS Part 3. 

- MAIN -

/* Main!!! */

main {
    border-top: 1px solid rgb(195, 195, 195);
    margin: 0 20px 0 20px;
}

.product-bar {
    display: flex;
    justify-content: start;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(195, 195, 195);
    margin-bottom: 15px;
}

.product-info {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
}

.product-bar__img img {
    border-radius: 10px;
}

.product-price {
    font-weight: bold;
}

.chat-me {
    display: flex;
    justify-content: end;
    align-items: center;
}

.chat-me-time {
    font-size: 12px;
    margin-top: 50px;
    margin-right: 5px;
    color: #aeaeae;

}

.chat-me-msg{
    width: 235px;
    color: white;
    background-color: rgb(252, 127, 57);
    padding: 10px 10px 10px 10px;
    border-radius: 25px;
    border-top-right-radius: 0px;
    font-weight: 300;
    margin: 20px 0px 20px 0px;
    margin-bottom: 20px;
}


.stranger-chat {
    display: flex;
}

.stranger-chat img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100px;
}


.stranger-msg {
    width: 145px;
    color: rgb(0, 0, 0);
    background-color: rgb(218, 218, 218);
    padding: 10px 10px 10px 10px;
    border-radius: 25px;
    border-top-left-radius: 0px;
    font-weight: 300;
    margin: 20px 0px 20px 10px;
    margin-bottom: 20px;
}

.stranter-time {
    font-size: 12px;
    margin-top: 50px;
    margin-right: 5px;
    color: #aeaeae;
}

 

CSS Part 4. 

- FOOTER -

/* Footer!!! */

.schedule-info {
    border: 2px solid rgb(160, 160, 160, 0.5);
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 70px;
    padding: 0 10px 0 20px;
    font-size: 15px;
}

.calande-img {
    margin-right: 10px;
    margin-bottom: 20px ;
    border-radius: 100%;
    border: 1px solid rgb(160, 160, 160);
    background-color: rgb(0, 0, 0);
    width: 20px;
    height: 20px;
}

.calande-img img {
    filter: invert(100%);
    scale: .75;
}

.date-info {
    font-weight: bold;
    margin-top: 7px;
    margin-bottom: 5px;
}

.info-msg {
    display: flex;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #aeaeae;
    margin-top: 30px;
}

 

 

 

 

빵빵이가 귀엽다고 생각하시면!

아래 빵빵이 얼굴 한 번 클릭 해주세요!

(날 구독해달라옹!!!!)

반응형
저작자표시 비영리 변경금지

'취미 공부 > Practice' 카테고리의 다른 글

회원가입 페이지 연습  (4) 2024.09.24
부트스트랩 연습  (0) 2024.09.24
(진행 중)_스노우_팀장님 프로젝트_FE  (0) 2024.06.14
7주차 스노우 DAY01 팀장님 문제 - 20240617 완성  (1) 2024.06.10
jQuery 연습 -20240612 완성.  (1) 2024.06.10

관련글

티스토리툴바