๐Ÿก
Jeju Coding Basecamp(์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„)/
๐Ÿ“‹
JEJU Cafe Code DB
๐Ÿ“‹

JEJU Cafe Code DB

๐Ÿ–Œ๏ธ
css
๐Ÿš™
js
ย 
about.html
<!DOCTYPE html>
<html>
<head>
<title>์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>

<body class="page-about">
<div class="jejucafe-container">
    <!-- global-header ์‹œ์ž‘ -->
    <header class="global-header">
        <div class="grid">
            <button class="global-menu-btn">
                <i class="fas fa-bars"></i>
                <span class="btn-label">๋ฉ”๋‰ด</span>
            </button>
            <a class="logo" href="./index.html">
                <img src="./images/logo.png" alt="์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ">
            </a>
            <div class="global-menu">
                <nav class="global-menu-nav">
                    <ul>
                        <li class="menu-item-about">
                            <a href="about.html">์„œ๋น„์Šค ์†Œ๊ฐœ</a>
                        </li>
                        <li class="menu-item-list">
                            <a href="list.html">์นดํŽ˜๋“ค</a>
                        </li>
                    </ul>
                    <a href="write.html" class="add-cafe-btn">
                        <i class="fas fa-plus"></i>
                        <span class="btn-label">์นดํŽ˜๋“ฑ๋ก</span>
                    </a>
                </nav>
                <form class="search-cafe-form text-input-and-btn">
                    <div class="input-wrapper">
                        <input type="search" placeholder="์ฐพ๊ณ  ์‹ถ์€ ์นดํŽ˜ ์ด๋ฆ„">
                    </div>
                    <button class="icon-btn search-cafe-form-btn">
                        <i class="fas fa-search"></i>
                        <span class="btn-label">์นดํŽ˜์ฐพ๊ธฐ</span>
                    </button>
                </form>
            </div>
        </div>
    </header>
    <!-- global-header ๋ -->

    <!-- content-area ์‹œ์ž‘ -->
    <div class="content-area">
        <!-- ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋‚ด์šฉ ์‹œ์ž‘ -->
        <article class="page-content">
            <div class="grid">
                <header>
                    <h1>์ œ์ฃผ๋„ ์นดํŽ˜, ์—ฌ๊ธฐ ๋‹ค ์žˆ์–ด์š”!</h1>
                </header>
                <section class="content-section">
                    <header>
                        <h2>์„น์…˜ ์ œ๋ชฉ</h2>
                    </header>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
										Dolorem cupiditate molestias vel veritatis odio repellat quod velit,
										at delectus dolor tenetur, laudantium atque, inventore. 
										Quia obcaecati accusantium consequuntur dignissimos fugit.</p>
                    <p>์ œ์ฃผ์ฝ”๋”ฉ๋ฒ ์ด์Šค์บ ํ”„์—์„œ ์ œ์ž‘ํ•˜๋Š” ์˜ˆ์ œ ์›น์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.</p>
                </section>
            </div>
        </article>
        <!-- ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋‚ด์šฉ ๋ -->
    </div>
    <!-- content-area ๋ -->

    <!-- global-footer ์‹œ์ž‘ -->
    <footer class="global-footer">
        <div class="grid">
            <p class="copyright">
                2018 &copy; ์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ
            </p>
        </div>
    </footer>
    <!-- global-footer ๋ -->
</div>

<script src="./js/index.js"></script>
</body>
</html>
ย 
index.html
<!DOCTYPE html>
<html>
<head>
<title>์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    // For google fonts
    google: {
      families: ['Noto Sans KR', 'Roboto']
    }
  });
</script>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js">
</script>

<link rel="stylesheet" href="./css/main.css">
</head>

<body class="page-home">
<div class="jejucafe-container">
    <!-- global-header ์‹œ์ž‘ -->
    <header class="global-header">
        <div class="grid">
            <button class="global-menu-btn">
                <i class="fas fa-bars"></i>
                <span class="btn-label">๋ฉ”๋‰ด</span>
            </button>
            <a class="logo" href="./index.html">
                <img src="./images/logo.png" alt="์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ">
            </a>
            <div class="global-menu">
                <nav class="global-menu-nav">
                    <ul>
                        <li class="menu-item-about">
                            <a href="about.html">์„œ๋น„์Šค ์†Œ๊ฐœ</a>
                        </li>
                        <li class="menu-item-list">
                            <a href="list.html">์นดํŽ˜๋“ค</a>
                        </li>
                    </ul>
                    <a href="write.html" class="add-cafe-btn">
                        <i class="fas fa-plus"></i>
                        <span class="btn-label">์นดํŽ˜๋“ฑ๋ก</span>
                    </a>
                </nav>
                <form class="search-cafe-form text-input-and-btn">
                    <div class="input-wrapper">
                        <input type="search" placeholder="์ฐพ๊ณ  ์‹ถ์€ ์นดํŽ˜ ์ด๋ฆ„">
                    </div>
                    <button class="icon-btn search-cafe-form-btn">
                        <i class="fas fa-search"></i>
                        <span class="btn-label">์นดํŽ˜์ฐพ๊ธฐ</span>
                    </button>
                </form>
            </div>
        </div>
    </header>
    <!-- global-header ๋ -->

    <!-- content-area ์‹œ์ž‘ -->
    <div class="content-area">
        <!-- jejumap-container ์‹œ์ž‘ -->
        <section class="jejumap-container">
            <div class="grid">
                <header class="jejumap-header">
                    <h1 class="main-copy">์ง€๋„์—์„œ ์›ํ•˜๋Š” ์ง€์—ญ์„ ์„ ํƒํ•˜์„ธ์š”!</h1>
                    <p>์„ ํƒํ•˜์ง€ ์•Š์œผ๋ฉด ์ „์ฒด ์ง€์—ญ์—์„œ ์ฐพ์Šต๋‹ˆ๋‹ค</p>
                </header>
                <div class="jejumap">
                    <div class="jejumap-items">
                        <div class="jejumap-item" id="jejumap-item-hangyeong">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-1" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-1">
														ํ•œ๊ฒฝ๋ฉด</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-hanlim">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-2" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-2">
														ํ•œ๋ฆผ์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-aewol">
                            <input type="checkbox" class="jejumap-check te-elem" 
														id="check-area-3" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-3">
														์• ์›”์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-jeju">
                            <input type="checkbox" class="jejumap-check te-elem" 
														id="check-area-0" data-city="Jcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-0">
														์ œ์ฃผ์‹œ</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-jocheon">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-4" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-4">
														์กฐ์ฒœ์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-gujwa">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-5" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-5">
														๊ตฌ์ขŒ์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-daejeong">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-9" data-city="notScity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-9">
														๋Œ€์ •์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-andeok">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-10" data-city="notScity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-10">
														์•ˆ๋•๋ฉด</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-seogwipo">
                            <input type="checkbox" class="jejumap-check te-elem"
														id="check-area-8" data-city="Scity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-8">
														์„œ๊ท€ํฌ์‹œ</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-namwon">
                            <input type="checkbox" class="jejumap-check te-elem" 
												id="check-area-11" data-city="notScity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-11">
														๋‚จ์›์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-pyoseon">
                            <input type="checkbox" class="jejumap-check te-elem" 
															id="check-area-12" data-city="notScity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-12">
														ํ‘œ์„ ๋ฉด</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-seongsan">
                            <input type="checkbox" class="jejumap-check te-elem" 
														id="check-area-13" data-city="notScity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-13">
														์„ฑ์‚ฐ์</label>
                        </div>
                        <div class="jejumap-item" id="jejumap-item-udo">
                            <input type="checkbox" class="jejumap-check te-elem" 
														id="check-area-6" data-city="notJcity">
                            <div class="mapshape"></div>
                            <label class="jejumap-item-title te-elem" for="check-area-6">
														์šฐ๋„๋ฉด</label>
                        </div>
                    </div>
                </div>
                <a href="list.html" class="btn big-btn search-map-btn">์นดํŽ˜์ฐพ๊ธฐ!</a>
            </div>
        </section>
        <!-- jejumap-container ๋ -->
    </div>
    <!-- content-area ๋ -->

    <!-- global-footer ์‹œ์ž‘ -->
    <footer class="global-footer">
        <div class="grid">
            <p class="copyright">
                2018 &copy; ์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ
            </p>
        </div>
    </footer>
    <!-- global-footer ๋ -->
</div>

<script src="./js/index.js"></script>
</body>
</html>
ย 
list.html
<!DOCTYPE html>
<html>
<head>
<title>์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>

<body class="page-list">
<div class="jejucafe-container">
    <!-- global-header ์‹œ์ž‘ -->
    <header class="global-header">
        <div class="grid">
            <button class="global-menu-btn">
                <i class="fas fa-bars"></i>
                <span class="btn-label">๋ฉ”๋‰ด</span>
            </button>
            <a class="logo" href="./index.html">
                <img src="./images/logo.png" alt="์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ">
            </a>
            <div class="global-menu">
                <nav class="global-menu-nav">
                    <ul>
                        <li class="menu-item-about">
                            <a href="about.html">์„œ๋น„์Šค ์†Œ๊ฐœ</a>
                        </li>
                        <li class="menu-item-list">
                            <a href="list.html">์นดํŽ˜๋“ค</a>
                        </li>
                    </ul>
                    <a href="write.html" class="add-cafe-btn">
                        <i class="fas fa-plus"></i>
                        <span class="btn-label">์นดํŽ˜๋“ฑ๋ก</span>
                    </a>
                </nav>
                <form class="search-cafe-form text-input-and-btn">
                    <div class="input-wrapper">
                        <input type="search" placeholder="์ฐพ๊ณ  ์‹ถ์€ ์นดํŽ˜ ์ด๋ฆ„">
                    </div>
                    <button class="icon-btn search-cafe-form-btn">
                        <i class="fas fa-search"></i>
                        <span class="btn-label">์นดํŽ˜์ฐพ๊ธฐ</span>
                    </button>
                </form>
            </div>
        </div>
    </header>
    <!-- global-header ๋ -->

    <!-- content-area ์‹œ์ž‘ -->
    <div class="content-area">
        <!-- cafe-list ์‹œ์ž‘ -->
        <div class="cafe-list">
            <div class="grid">
                <!-- ์นดํŽ˜ 1๊ฐœ ์‹œ์ž‘ -->
                <section class="cafe-item">
                    <figure class="cafe-item-photo">
                        <img src="./images/temp/cafe_0.jpg" alt="">
                    </figure>
                    <div class="cafe-item-info">
                        <h2>์ œ์ฃผ์ฝ”๋”ฉ์นดํŽ˜</h2>
                        <p>๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ๋“ค์„ ์œ„ํ•œ ์นดํŽ˜์—์š”.</p>
                        <ul class="cafe-item-contact">
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                ์ œ์ฃผ์‹œ ์กฐ์ฒœ์ ํ•จ๋•00๊ธธ 000
                            </li>
                            <li>
                                <i class="fas fa-phone"></i>
                                064-000-0000
                            </li>
                            <li>
                                <i class="fab fa-instagram"></i>
                                @jejucodingcafe
                            </li>
                        </ul>
                    </div>
                </section>
                <!-- ์นดํŽ˜ 1๊ฐœ ๋ -->

                <!-- ์นดํŽ˜ 1๊ฐœ ์‹œ์ž‘ -->
                <section class="cafe-item">
                    <figure class="cafe-item-photo">
                        <img src="./images/temp/cafe_1.jpg" alt="">
                    </figure>
                    <div class="cafe-item-info">
                        <h2>CAFE ๋งˆํŠธ๋ฃŒ์‹œ์นด</h2>
                        <p>๋Ÿฌ์‹œ์•„ ์ธํ˜• ์žฅ์‹์ด ์ธ์ƒ์ ์ธ ๋Ÿฌ์‹œ์•„ํ’ ์นดํŽ˜์—์š”.</p>
                        <ul class="cafe-item-contact">
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                ์ œ์ฃผ์‹œ ์กฐ์ฒœ์ ํ•จ๋•00๊ธธ 000
                            </li>
                            <li>
                                <i class="fas fa-phone"></i>
                                064-000-0000
                            </li>
                            <li>
                                <i class="fab fa-instagram"></i>
                                @jejucodingcafe
                            </li>
                        </ul>
                    </div>
                </section>
                <!-- ์นดํŽ˜ 1๊ฐœ ๋ -->

                <!-- ์นดํŽ˜ 1๊ฐœ ์‹œ์ž‘ -->
                <section class="cafe-item">
                    <figure class="cafe-item-photo">
                        <img src="./images/temp/cafe_2.jpg" alt="">
                    </figure>
                    <div class="cafe-item-info">
                        <h2>ํฌ๋ฆฌ์Šค๋งˆ์Šค ์นดํŽ˜</h2>
                        <p>ํฌ๋ฆฌ์Šค๋งˆ์Šค์—๋งŒ ๋ฌธ์„ ์—ฌ๋Š” ์นดํŽ˜์ž…๋‹ˆ๋‹ค.</p>
                        <ul class="cafe-item-contact">
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                                ์ œ์ฃผ์‹œ ์กฐ์ฒœ์ ํ•จ๋•00๊ธธ 000
                            </li>
                            <li>
                                <i class="fas fa-phone"></i>
                                064-000-0000
                            </li>
                            <li>
                                <i class="fab fa-instagram"></i>
                                @jejucodingcafe
                            </li>
                        </ul>
                    </div>
                </section>
                <!-- ์นดํŽ˜ 1๊ฐœ ๋ -->
            </div>
        </div>
        <!-- cafe-list ๋ -->
    </div>
    <!-- content-area ๋ -->

    <!-- global-footer ์‹œ์ž‘ -->
    <footer class="global-footer">
        <div class="grid">
            <p class="copyright">
                2018 &copy; ์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ
            </p>
        </div>
    </footer>
    <!-- global-footer ๋ -->
</div>

<script src="./js/index.js"></script>
</body>
</html>
ย 
write.html
<!DOCTYPE html>
<html>
<head>
<title>์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>

<body class="page-write">
<div class="jejucafe-container">
    <!-- global-header ์‹œ์ž‘ -->
    <header class="global-header">
        <div class="grid">
            <button class="global-menu-btn">
                <i class="fas fa-bars"></i>
                <span class="btn-label">๋ฉ”๋‰ด</span>
            </button>
            <a class="logo" href="./index.html">
                <img src="./images/logo.png" alt="์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ">
            </a>
            <div class="global-menu">
                <nav class="global-menu-nav">
                    <ul>
                        <li class="menu-item-about">
                            <a href="about.html">์„œ๋น„์Šค ์†Œ๊ฐœ</a>
                        </li>
                        <li class="menu-item-list">
                            <a href="list.html">์นดํŽ˜๋“ค</a>
                        </li>
                    </ul>
                    <a href="write.html" class="add-cafe-btn">
                        <i class="fas fa-plus"></i>
                        <span class="btn-label">์นดํŽ˜๋“ฑ๋ก</span>
                    </a>
                </nav>
                <form class="search-cafe-form text-input-and-btn">
                    <div class="input-wrapper">
                        <input type="search" placeholder="์ฐพ๊ณ  ์‹ถ์€ ์นดํŽ˜ ์ด๋ฆ„">
                    </div>
                    <button class="icon-btn search-cafe-form-btn">
                        <i class="fas fa-search"></i>
                        <span class="btn-label">์นดํŽ˜์ฐพ๊ธฐ</span>
                    </button>
                </form>
            </div>
        </div>
    </header>
    <!-- global-header ๋ -->

    <!-- content-area ์‹œ์ž‘ -->
    <div class="content-area">
        <!-- ์นดํŽ˜๋“ฑ๋ก ํŽ˜์ด์ง€ ๋‚ด์šฉ ์‹œ์ž‘ -->
        <article class="page-content">
            <div class="grid">
                <header>
                    <h1>์นดํŽ˜๋“ฑ๋ก</h1>
                </header>
                <form>
                    <div class="form-row">
                        <div class="form-row-content">
                            <span class="form-row-label">์นดํŽ˜์œ„์น˜</span>
                            <div class="form-row-input">
                                <label>
                                    <input type="radio" name="cafeArea" value="1">
                                    <span>๊ตฌ์ขŒ์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="2">
                                    <span>๋‚จ์›์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="3">
                                    <span>๋Œ€์ •์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="4">
                                    <span>์„œ๊ท€ํฌ์‹œ๋‚ด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="5">
                                    <span>์„ฑ์‚ฐ์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="6">
                                    <span>์•ˆ๋•๋ฉด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="7">
                                    <span>์• ์›”์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="8">
                                    <span>์šฐ๋„๋ฉด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="9">
                                    <span>์ œ์ฃผ์‹œ๋‚ด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="10">
                                    <span>์กฐ์ฒœ์</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="11">
                                    <span>ํ‘œ์„ ๋ฉด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="12">
                                    <span>ํ•œ๊ฒฝ๋ฉด</span>
                                </label>
                                <label>
                                    <input type="radio" name="cafeArea" value="13">
                                    <span>ํ•œ๋ฆผ์</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-row-content">
                            <span class="form-row-label">์นดํŽ˜์ด๋ฆ„</span>
                            <div class="form-row-input">
                                <input type="text" name="cafeName">
                            </div>
                        </label>
                    </div>
                    <div class="form-row">
                        <label class="form-row-content">
                            <span class="form-row-label">์ฃผ์†Œ</span>
                            <div class="form-row-input">
                                <input type="text" name="cafeAddress">
                            </div>
                        </label>
                    </div>
                    <div class="form-row">
                        <label class="form-row-content">
                            <span class="form-row-label">์ „ํ™”๋ฒˆํ˜ธ</span>
                            <div class="form-row-input">
                                <input type="text" name="cafePhoneNum">
                            </div>
                        </label>
                    </div>
                    <div class="form-row">
                        <label class="form-row-content">
                            <span class="form-row-label">์นดํŽ˜์†Œ๊ฐœ</span>
                            <div class="form-row-input">
                                <input type="text" name="cafeIntro">
                            </div>
                        </label>
                    </div>
                    <div class="form-row">
                        <label class="form-row-content">
                            <span class="form-row-label">์‚ฌ์ง„</span>
                            <div class="form-row-input">
                                <input type="file" name="cafePhoto">
                            </div>
                        </label>
                    </div>
                    <div class="form-row form-row-btn-con">
                        <input type="submit" value="๋“ฑ๋กํ•˜๊ธฐ" 
												class="btn big-btn cafe-write-btn">
                    </div>
                </form>
            </div>
        </article>
        <!-- ์นดํŽ˜๋“ฑ๋ก ํŽ˜์ด์ง€ ๋‚ด์šฉ ๋ -->
    </div>
    <!-- content-area ๋ -->

    <!-- global-footer ์‹œ์ž‘ -->
    <footer class="global-footer">
        <div class="grid">
            <p class="copyright">
                2018 &copy; ์ œ์ฃผ์นดํŽ˜์ฐพ๊ธฐ
            </p>
        </div>
    </footer>
    <!-- global-footer ๋ -->
</div>

<script src="./js/index.js"></script>
</body>
</html>