본문 바로가기
Front-end/Web

웹 애플리케이션 만들기 코드

by 안녕주 2020. 9. 7.

index.html

<!doctype html>
<html>
<head>
  <title>main</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type = "text/javascript">
    function check_city(){ // body문제 botton 을 통해서 실행할  함수
        var city = prompt("원하는 지역의 이름을 알려주세요! ");

        if (city =="서울"){ //if문을 통해서 해당 글자면 해당 alert를 하도록 조건문 사용
          alert("서울 페이지에 들어가서 자세한 위치를 알려주세요!");
        }
        else if (city =="경기"){
          alert("경기 페이지에 들어가서 자세한 위치를 알려주세요!");
        }
        else if (city =="강원"){
          alert("강원 페이지에 들어가서 자세한 위치를 알려주세요!");
        }
        else if (city =="인천"){
          alert("인천 페이지에 들어가서 자세한 위치를 알려주세요!");
        }
        else{
          alert("소중한 의견 감사합니다. 더욱 더 좋은 정보로 다시 찾아뵙겠습니다!");
        }
    }
  </script>

  <header>
  <h1><img src="seoul_shadow.png"name="deco"><a href="index.html">이달의 여행지(서울,인천,경기,강원)Ver</a><img src="seoul_shadow.png"name="deco"></h1>
  </header>
  <div id="grid">
  <nav>
    <ol class ="chart">
      <li><a href="1.html">서울</a></li>
      <li><a href="2.html">인천</a></li>
      <li><a href="3.html">경기</a></li>
      <li><a href="4.html">강원</a></li>
    </ol>
  </nav>
    <div id="article">
      <br>
      <button onclick="check_city();"> 더 보고싶은 지역이 있다면 추천 </button>
      <button onclick="window.open('login.html')">로그인</button>
      <article>
      <section>
      <h2>서울</h2>
      대한민국의 수도인 서울은 현대적인 고층 빌딩, 첨단 기술의 지하철, 대중문화와 사찰, 고궁, 노점상이 공존하는 대도시입니다. 주목할 만한 명소로는 곡선으로 이루어진 외관과 옥상 공원을 특징으로 하는 초현대적 디자인의 컨벤션 홀인 동대문디자인플라자, 한때 7,000여 칸의 방이 자리하던 경복궁, 회화나무와 소나무 고목이 있는 조계사가 있습니다.
다른 볼거리로는 대한민국의 역사와 예술을 알리기 위해 세워진 국립중앙박물관과 전쟁기념관, 초고층 롯데월드타워 옆에 있는 대형 놀이공원인 롯데월드가 있습니다.<br>
      <img src="seoul1.jpg">
      <img src="seoul2.jpg">
      <img src="seoul3.jpg">
      <br><br>
      </section>

      <section>
      <h2>인천</h2>
      인천광역시는 대한민국 서해안에 있는 광역시이다. 서쪽으로는 황해를 사이로 중화인민공화국이 있다. 인천항과 인천국제공항을 중심으로 제조업과 물류 산업이 발달하였다. 시청 소재지는 남동구 구월동이고, 행정구역은 8구 2군이다. 2003년 인천경제자유구역청이 개청되어 송도·청라·영종 지구를 관할한다.<br>
      <img src="incheon1.jpg">
      <img src="incheon2.jpg">
      <img src="incheon3.jpg">
      <br><br>
      </section>

      <section>
      <h2>경기</h2>
      경기도는 대한민국의 북서부에 있는 도이다. 서울특별시와 인천광역시를 둘러싸고 있고, 동쪽으로 강원도, 서쪽으로 황해, 남쪽으로는 충청남도·충청북도와 접하며, 북쪽으로는 조선민주주의인민공화국과 경계를 이룬다. 도청 소재지는 수원시이고, 의정부시에 북부청사가 설치되어 있다.<br>
      <img src="gyeonggi1.jpg">
      <img src="gyeonggi2.jpg">
      <img src="gyeonggi3.jpg">
      <br><br>
      </section>

      <section>
      <h2>강원</h2>
      강원도는 대한민국의 북동부에 있는 도이다. 동쪽은 동해, 서쪽은 경기도, 남쪽은 충청북도·경상북도와 접하고, 북쪽은 조선민주주의인민공화국과 경계를 이루고 있다. 지리적으로는 태백산맥을 기준으로 동쪽으로 강릉시, 속초시, 동해시, 삼척시, 태백시 등 영동 지방과 서쪽으로 춘천시, 원주시 등 영서 지방으로 구분된다. 강원도청은 춘천시에 위치하고 있으며, 강릉시에 강원도청의 출장소인 환동해본부가 설치되어 있다. 행정 구역은 7시 11군이다.<br>
      <img src="gangwon1.jpg">
      <img src="gangwon2.jpg">
      <img src="gangwon3.jpg">
      <br><br>
      </section>
  </article>
</div>
</div>

  <aside>
    <a href="https://www.seoul.go.kr/main/index.jsp">서울 공식사이트</a>
    <a href="https://www.incheon.go.kr/index">인천 공식사이트</a>
    <a href="https://www.gg.go.kr/">경기 공식사이트</a>
    <a href="https://www.provin.gangwon.kr/gw/portal">강원 공식사이트</a>
  </aside>
  <footer>
    <p>본 사이트는 숙명여자대학교 웹프로그래밍개론 과제제출용사이트입니다. 비영리성 비상업성을 띄고 있습니다.</p>
  </footer>
  </body>
  </html>

 

1.html

<!doctype html>
<html>
<head>
  <title>seoul</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type = "text/javascript">
    function check_seoul(){
        var rec_seoul = prompt("서울의 가보고 싶은 곳을 추천해주세요! ");
        alert("소중한 의견 감사합니다. 더욱 더 좋은 정보로 다시 찾아뵙겠습니다!");
    }
  </script>

  <header>
    <h1><img src="seoul_shadow.png"name="deco"><a href="index.html">이달의 여행지(서울,인천,경기,강원)Ver</a><img src="seoul_shadow.png"name="deco"></h1>  </header>
  <div id="grid">
    <nav>
    <ol class ="chart">
      <li><a href="1.html">서울</a></li>
      <li><a href="2.html">인천</a></li>
      <li><a href="3.html">경기</a></li>
      <li><a href="4.html">강원</a></li>
    </ol>
   </nav>
    <div id="article">
      <article>
      <br>
      <button onclick="check_seoul();"> 더 보고싶은 지역이 있다면 추천 </button>
      <h2>서울</h2>
      <br>
      <br>
      <section>
      <h3>1. 망원시장</h3>
        <img src="mw1.jpg"><img src="mw2.jpg"><img src="mw3.jpg">
        <p>1975년도에 개설된 망원시장은 서민주택가에 위치한 재래시장이다. 마포구에서는 가장 먼저 시설현대화 사업을 완료하고 2008년 2월에 월드컵 시장으로 재탄생하였다. 총길이 215미터의 아케이드를 설치하여 우천 시에도 편하게 쇼핑을 즐길 수 있으며, 간판 및 좌판을 깔끔하게 정리하여 이용객들의 편의를 도모하였다. 판매품목은 농수산물부터 분식, 생활잡화까지 다양하며 현재 망원동 주민들의 식탁을 책임지고 있다. 가격 또한 저렴한 편이라 가격경쟁력을 갖추고 있으며, 지하철 6호선과 버스노선과 가까워 교통도 편리하다. 가까운 곳에는 상암 월드컵공원과 한강 시민공원이 있어서, 쇼핑을 즐기고 공원으로 산책을 가기에도 좋다. 최근 버라이어티 방송에 전파를 타면서 많은 사람들이 찾고 있다. </p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
          <li>망원 한강공원</li>
          <img src="mwhp.jpg">
          <p>원효대교와 성산대교 사이 강변북단에 위치해 있고, 마포구와 인접해 있습니다. 둔치에는 잔디밭이 조성되어 시야가 넓고 산책로 등 휴식공간이 짜임새 있게 잘 조성되어 있습니다. 또한 수상에서는 윈드서핑, 수상스키, 모터보트 등 수상레저활동이 이루어지고 있고, 주변에 망원정, 절두산 성지 등 문화유적지가 있으며, 월드컵경기장, 인천국제공항 등과 연계되어 서울 서북부지역의 전략적 요충지역으로 무한한 잠재력을 지니고 있습니다.</p><br>
        </ul>
      </section>

      <section>
      <h3>2. 남대문 시장</h3>
        <img src="nm1.jpg"><img src="nm2.jpg"><img src="nm3.jpg">
        <p>전통의 모습과 현재가 상존하고 생동감이 넘쳐나는 남대문시장에 방문하는 인원은 하루 평균 30만 명에 달한다. 지리적으로도 신세계백화점, 한국은행 등 서울의 주요 건물은 물론, 정동길, 명동, 남산타워, 남산한옥마을 등 관광명소들과 인근하고 있어 서울을 찾는 외국인들이 가장 많이 찾는 명소이다. 사람들의 발길은 숭례문을 기점으로 1만여 곳에 육박하는 점포로 향한다.
“남대문시장에 없으면 서울 어디에도 없다”, “남대문시장엔 고양이 뿔 빼고 다 있다”는 말이 있을 정도다.
남대문시장에는 아동·남성·여성 등 각종 의류를 비롯해 액세서리, 주방용품, 민속공예, 식품, 잡화, 농수산물 등 일상생활에 필요한 1,700여종에 달하는 상품을 판매하고 있다.
남대문시장은 전국 소매상과 소비자에게 저렴한 가격으로 유통하는 도·소매기능을 겸하고 있어 국내 소매상뿐 아니라 중국, 일본, 동남아시아와 유럽, 미국, 중동 등 세계 각지에서도 찾아오고 있다.
남대문시장에는 맛집들도 많다.
은호식당, 진주집 등 오랜 역사를 자랑하는 꼬리곰탕집을 비롯해 갈치골목, 칼국수골목, 야채호떡, 닭곰탕, 이북식 냉면집 부원면옥 등 남대문시장에서만 맛 볼 수 있는 먹을거리들도 남대문시장을 꼭 한 번 방문해 볼 것을 추천한다.
</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
          <li>숭례문</li>
          <img src="sm1.jpg"><img src="sm2.jpg"><img src="sm3.jpg">
          <p>숭례문은 조선의 수도였던 한양의 4대문중의 하나로 남쪽의 대문이다. 흔히 남대문이라고도 부른다. 대한민국의 국보중 하나로 꼭 한번 가서 보기를 추천한다.</p><br>

          <li>서울로7017</li>
          <img src="sl1.jpg"><img src="sl2.jpg"><img src="sl3.jpg">
          <p>중구 회현동, 중림동 일대에 걸쳐있는 공원. 노후한 옛 서울역 가고차도를 개·보수하여 만들어졌다.
서울로는 서울을 대표하는 사람길과 서울로 향하는 길이라는 중의적 의미를 담고 있다. 7017의 '70'은 서울역 고가가 만들어진 1970년을, '17'은 공원화 사업이 완료될 2017년과 17개의 사람길, 고가차도의 높이인 17m의 복합적인 의미를 지닌다.
기존의 노후한 교통로를 리모델링해서 산책로를 만든다는 개발 컨셉 때문에 뉴욕의 대표 명소인 '하이라인 파크'를 기대한 사람들이 많았다. 다만 건축가 본인은 오히려 하이라인 파크와 다른 컨셉으로 가려고 했다고 밝혔다.</p><br>

          <li>명동쇼핑 거리</li>
          <img src="md1.jpg"><img src="md2.jpg"><img src="md3.jpg">
          <p>지하철 4호선 명동역에서 지하철 2호선 외한은행 본점 뒤편까지 걸쳐 있는 영역이다. 패션 메카 최고의 쇼핑거리로 복합 쇼핑몰 밀리오레를 비롯해 여러 형태의 복합쇼핑몰이 밀집해 있다.</p><br>
        </ul>
      </section>

      <section>
      <h3>3. 광장 시장</h3>
      <img src="gj1.jpg"><img src="gj2.jpg">
      <p>광장이라는 이름의 유래는 청계천 3,4가에 있던 광교와 장교로 광장시장의 위치가 이 두 다리 사이에 있다고 하여 붙인 것. 따라서 한자도 廣場이 아닌 廣藏을 쓴다. 다만 1905년에 시장 개설 허가를 받을 때에는 동대문시장이라는 명칭을 썼다고 한다. 100년 동안 서울 중심에 자리한 광장시장은 빈티지의 총집산지이며, 한복이나 침구 같은 혼수품을 구입할 수 있는 공간이기도 하다. 특히 수입구제상가는 젊은이들의 마음을 사로잡아 아직도 성업을 이룬다. 구제품도 많아서 젊은사람들도 많이 찾는 시장이다.</p><br>
      <p><strong>가볼만 한 곳 </strong></p>
      <ul>
        <li>종묘</li>
        <img src="jm1.jpg"><img src="jm2.jpg">
        <p>종묘는 조선왕조 역대 왕과 왕후 및 추존된 왕과 왕후의 신주를 모신 사당으로서 가장 정제되고 장엄한 건축물 중의 하나이다.
종묘는 태조 3년 (1394) 10월 조선 왕조가 한양으로 도읍을 옮긴 그해 12월에 착공하여 이듬해(1395) 9월에 완공 하였으며, 곧이어 개성으로부터 태조의 4대조인 목조, 익조, 도조, 환조의 신주를 모셨다. 현재 정전에는 19실에 49위, 영녕전에는 16실에 34위의 신주가 모셔져 있고, 정전 뜰앞에 있는 공신당에는 정전에 계신 왕들의 공신 83위가 모셔져 있다.</p><br>
        <li>동대문 디자인 플라자(DDP)</li>
        <img src="ddp1.jpg"><img src="ddp2.jpg"><img src="ddp3.jpg">
        <p>동대문 DDP(동대문디자인플라자)는 ‘디자인・창조산업의 발신지’를 모토로 하는 복합문화공간이다. 2014년 3월 21일 예전 동대문운동장 자리에 개관한 DDP는 컨벤션, 전시, 공연, 패션쇼 등이 상시 이뤄지는 공간으로 세계 최대 규모의 3차원 비정형 랜드마크 건축물이다. 지하 3층, 지상 4층 규모의 DDP는 알림터, 배움터, 살림터, 디자인장터, 동대문역사문화공원의 5개 시설로 구성되어 총 15개 공간이 자리잡고 있다. 알림터는 디자인 창조산업의 신제품과 트렌드를 소개하는 공간, 배움터는 전시를 통해 지식을 전파하는 공간, 살림터는 다양한 최신 트렌드 상품을 접할 수 있는 공간으로 꾸며졌다. 디자인장터는 ‘문화콘텐츠+체험+Shop in Shop’ 개념의 복합편집형 편의공간이다. 동대문역사문화공원은 새로운 이벤트와 만나고 쉬고 향유하는 열린 시민공원이다.</p><br>
      </ul>
      </section>

      <section>
      <h3>4. 서울 여의도 밤도깨비 야시장 (젊은이들을 위한 보너스!)</h3>
      <img src="bd1.png"><img src="bd2.jpg">
      <p>서울밤도깨비야시장은 밤이면 열렸다가 아침이면 사라지는 도깨비 같은 시장이라는 의미로 특정한 시간이 되면 새로운 공간, 새로운 장이 열린다는 콘셉트를 가지고 있다. 장소는 여의도한강공원, 반포한강공원, 동대문디자인플라자(DDP), 청계천, 문화비축기지, 청계광장 총 6곳의 서울 명소에서 진행되며, 각 공간이 가진 매력을 극대화시켜 밤도깨비들과 함께 떠나는 새로운 서울형 야시장을 연출한다. 2015년을 시작으로 현재까지 시민과 관광객에게 다양한 먹거리와 특색 있는 즐길거리를 제공하며 서울 대표 명소로 자리잡고 있다. 여의도의 밤도깨비 야시장이 가장 유명하다. </p><br>
      </section>

      <section>
      <h3>5. 노량진 수산시장</h3>
      <img src="nr2.jpg"><img src="nr3.jpg">
      <p>노량진수산시장은 서울특별시 동작구 노량진동에 위치한 수산물 전문 도매시장이다. 전국에서 모인 각종 수산물이 모여, 경매 방식으로 전국 각 시장으로 운송되는 형식이다. 경매는 패류는 새벽 1시, 선어는 새벽 1시 30분, 활어는 새벽 3시에 시작된다. 또한 경매 뿐만 아니라 일반 도매·소매도 하고 있다. </p><br>
      <p><strong>가볼만 한 곳 </strong></p>
      <ul>
        <li>63빌딩</li>
        <img src="building1.jpg"><img src="building2.jpg"><img src="building3.jpg">
        <p>63빌딩 개발 당시 대한민국 최초 랜드마크 빌딩이었다. 대한민국을 대표하는 랜드마크 빌딩, 한강과 남산 그리고 서울전경이 보이는 조망권, 지진 및 충경 내진설계와 레이아웃을 효율적으로 설계, 출입 및 보안 등 원격 통제 시스템 완비, 빌딩내 편의시설이 다수 입점(식당, 병원, 안경점, 우체국 등)해 있다.</p><br>
      </ul>
      </section>

      <section>
      <h3>6. 가락시장</h3>
      <img src="gr1.jpg"><img src="gr2.jpg"><img src="gr3.jpg">
      <p>가락동 농수산물 도매시장(可樂洞 農水産物 都賣市場), 약칭 가락시장(可樂市場)은 대한민국 서울특별시 송파구 가락동에 있는, 농·수산물 도매시장이다.</p><br>
      <p><strong>가볼만 한 곳 </strong></p>
      <ul>
        <li>롯데월드</li>
        <img src="lw1.jpg"><img src="lw2.jpg"><img src="lw3.jpg">
        <p>롯데월드(영어: Lotte World)는 대한민국 서울특별시 송파구 올림픽로 240에 위치한 테마파크이다. 롯데그룹의 계열사인 호텔롯데 운영월드 사업부이다. 놀이시설은 실내의 롯데월드 어드벤처(Lotte World Adventure)와 야외의 매직아일랜드가 운영되고 있고, 민속박물관, 아이스링크, 백화점, 마트, 호텔이 포함된다.</p><br>
        <li>석촌동 고분군</li>
        <img src="gb1.jpg">
        <p>서울특별시 송파구 석촌동에 위치한 한성백제 시절 적석총(돌무지 무덤)이다. 사적 제 243호.1911년 일제에 의해 처음 유적 현황 조사가 이루어졌고 한성백제의 무덤으로 인식되었다. 1912년에는 간단한 조사가 이루어졌는데, 당시 제작된 분포도에 따르면 무덤을 크게 갑총(甲塚)과 을총(乙塚)[1]으로 나누어 표시해 놓았으며 갑총이 23기, 을총이 66기로 나타나고 있다. 1916~1917년 정밀 조사가 실시되었으며 무덤에 대한 내부조사와 실측이 이루어진 것으로 보인다. 특히 1917년 작성된 도면은 무덤의 위치와 대략적인 규모를 알 수 있을 정도로 제작되었는데, 자그마치 290여 기 이상의 무덤이 존재했던 것으로 나타나고 있다. </p><br>

      </section>
    </article>
    </div>
  </div>

  <aside>
    <a href="https://www.seoul.go.kr/main/index.jsp">서울 공식사이트</a>
    <a href="https://www.incheon.go.kr/index">인천 공식사이트</a>
    <a href="https://www.gg.go.kr/">경기 공식사이트</a>
    <a href="https://www.provin.gangwon.kr/gw/portal">강원 공식사이트</a>
  </aside>
  <footer>
    <p>본 사이트는 숙명여자대학교 웹프로그래밍개론 과제제출용사이트입니다. 비영리성 비상업성을 띄고 있습니다.</p>
  </footer>
  </body>
  </html>

 

2.html

<!doctype html>
<html>
<head>
  <title>incheon</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type = "text/javascript">
    function check_incheon(){
        var rec_incheon = prompt("인천의 가보고 싶은 곳을 추천해주세요! ");
        alert("소중한 의견 감사합니다. 더욱 더 좋은 정보로 다시 찾아뵙겠습니다!");
    }
  </script>
  <header>
  <h1><img src="seoul_shadow.png"name="deco"><a href="index.html">이달의 여행지(서울,인천,경기,강원)Ver</a><img src="seoul_shadow.png"name="deco"></h1>
  </header>
  <div id="grid">
    <nav>
    <ol class ="chart">
      <li><a href="1.html">서울</a></li>
      <li><a href="2.html">인천</a></li>
      <li><a href="3.html">경기</a></li>
      <li><a href="4.html">강원</a></li>
    </ol>
    </nav>
    <div id="article">
      <article>
      <br>
      <button onclick="check_incheon();"> 더 보고싶은 지역이 있다면 추천 </button>
      <h2>인천</h2>
      <br>
      <br>
      <section>
      <h3>1. 부평종합시장</h3>
        <img src="bp1.jpg"><img src="bp2.jpg"><img src="bp3.jpg">
        <p>인천시 부평지역에서 가장 역사가 오래된 재래시장. 시장의 형성 시기는 정확치는 않으나 지금으로부터 약 100년의 역사를 가지고 있다. 1950년대 한국전쟁 이후에 미군부대에서 흘러나온 군수품을 거래했는데 이 시기 부평시장은 일명 도깨비시장(양키시장)으로 불리며 그 규모를 점차 확대, 1970년대에 들어서 청과물도매시장이 생기며 인천은 물론 김포, 검단, 영등포 등지에서도 이곳으로 장을 보로 올 정도였다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>부평숲 인천나비공원</li>
            <img src="nb1.jpg"><img src="nb2.jpg"><img src="nb3.jpg">
            <p>인천나비공원(仁川나비公園)은 인천광역시 부평구 청천동에 위치하고 있는 생태학습장이나 공원이다. 주로 나비를 주제로 다루고 있는 생태학습장이며, 장수산 일대에 자리잡고 있다. 부근에는 청천동 인향아파트와 원적산이 마주하고 있으며, 경인고속도로를 건너, 계양구 효성동과도 바로 연결된다. 또, 평천로 서편을 건너 가정동(가정오거리 주변 지역에 있는 대다수의 건축물들은 현재 루원시티 개발 공사로 인해 주변 시설이 거의 없음)은 물론 인천국제공항, 청라국제도시까지도 접근 가능하다.</p><br>
        </ul>
      </section>

      <section>
      <h3>2. 인천 모래내시장</h3>
        <img src="mrn1.jpg"><img src="mrn2.jpg"><img src="mrn3.jpg">
        <p>모래내시장은 인천 지역 경제의 중심인 구월동에 위치한 전통시장으로서 모래땅 위에 좌판을 벌인 뒤 하나 둘 상인들이 늘어나며 시장이 형성된 것이 그 시작이며 이후 30년 세월을 걸쳐 조금씩 넓혀져 왔다.이후 지역 주민과 모래내시장을 찾는 고객들의 관심 속에 남동구의 으뜸 시장으로 변화, 성장했다.현대화 시설로 인한 깔끔한 이미지 쇄신, 상인들의 친절한 서비스 교육, 마케팅 및 의식 개혁 교육 등을 실시하여 시장을 이용하는 고객들에게 질 높은 서비스를 제공하고자 지속적으로 노력하고 있다.자동차가 지나갈 수 있는 약 400m의 대로를 중심으로 160여 개의 상점들이 일렬로 늘어서 있고, 두 개의 골목에 아케이드 시설을 갖춘 상점들이 나란히 이어진다.상점뿐만 아니라 시장 바깥 구역에서도 가판대를 펼친 전통재래시장의 모습이 많이 남아있기도 하다.</p><br>
      </section>

      <section>
      <h3>3. 신포국제시장</h3>
        <img src="sp1.jpg"><
        <p>대한민국의 재래시장으로, 인천광역시 중구 우현로49번길 11-5(신포동)에 있다.닭강정이 가장 유명하다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>차이나타운</li>
            <img src="china1.jpg"><img src="china2.jpg"><img src="china3.jpg">
            <p>인천 차이나타운은 인천역 앞에 있는 차이나타운이다. 중국 음식점이나 기념품 등을 파는 상점이 많은 편이다. 화교중산학교가 있다. 매년 9월과 10월엔 각각 인천-중국의날 문화축제와 짜장면 축제가 열린다. 1883년 인천항 개항 후 1884년에 만들어진 중국(청나라) 조계지에 화교들이 모여들면서 형성되었다. 인천 차이나타운은 특이하게 산둥 출신이 중심을 이룬다.</p><br>
        </ul>
      </section>

      <section>
      <h3>4. 인천 종합 어시장</h3>
        <img src="icj1.jpg"><img src="icj2.jpg"><img src="icj3.jpg">
        <p>인천광역시 중구 연안부두 어시장사거리에 위치한 인천종합어시장은 인천항 남항부두와 인접해있고, 국내 최대의 수산물 유토시장으로 전국으로 당일 직송되는 수산물을 수도권으로 유통하는 곳이며, 황해안 인근 연안에서 인천 어민들이 직접 포획한 싱싱한 수산물을 공급하는 곳이기도 하다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>월미도</li>
            <img src="wmd1.jpg"><img src="wmd2.jpg"><img src="wmd3.jpg">
            <p> 월미도(月尾島)는 인천광역시 중구 북성동에 속해 있는 섬이었다. 현재는 섬과 육지 사이가 메워졌다. 섬의 생김새가 반달 꼬리 모양 같아 붙여진 이름이다. 월미도 내에 위치한 놀이동산들이 유명하다. </p><br>
        </ul>
      </section>

      <section>
      <h3>5. 강화 풍물시장</h3>
        <img src="gh1.jpg"><img src="gh2.png"><img src="gh3.jpg">
        <p>풍물시장은 강화민속장 명소화사업으로 현대화되어 2007년 신축되었다. 시장 1층에는 풍물장, 회센터가 있어 가격 흥정하는 재미와 싱싱한 회를 즐길 수 있고, 2층에는 풍물장과 식당이 있어 강화 여행길에 배고픔을 잊게 해 줄 맛난 먹거리와 볼거리가 있다. </p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>강화도</li>
            <img src="ghd1.jpg"><img src="ghd2.jpg"><img src="ghd3.jpg">
            <p>강화도(江華島)는 대한민국 경기만에 있는 섬이다. 대한민국에서 4번째로 큰 섬으로, 면적은 302.6 km²이다. 행정구역상으로는 인천광역시 강화군에 속해 있으며, 동쪽으로 경기도 김포시와 도로가 직접 연결되어 있다.</p><br>
        </ul>
      </section>
      </article>
      </div>
  </div>

  <aside>
    <a href="https://www.seoul.go.kr/main/index.jsp">서울 공식사이트</a>
    <a href="https://www.incheon.go.kr/index">인천 공식사이트</a>
    <a href="https://www.gg.go.kr/">경기 공식사이트</a>
    <a href="https://www.provin.gangwon.kr/gw/portal">강원 공식사이트</a>
  </aside>
  <footer>
    <p>본 사이트는 숙명여자대학교 웹프로그래밍개론 과제제출용사이트입니다. 비영리성 비상업성을 띄고 있습니다.</p>
  </footer>
  </body>
  </html>

 

3.html

<!doctype html>
<html>
<head>
  <title>gyeonggi</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type = "text/javascript">
    function check_gyeonggi(){
        var rec_gyeonggi = prompt("경기의 가보고 싶은 곳을 추천해주세요! ");
        alert("소중한 의견 감사합니다. 더욱 더 좋은 정보로 다시 찾아뵙겠습니다!");
    }
  </script>
  <header>
  <h1><img src="seoul_shadow.png"name="deco"><a href="index.html">이달의 여행지(서울,인천,경기,강원)Ver</a><img src="seoul_shadow.png"name="deco"></h1>
  </header>
  <div id="grid">
    <nav>
    <ol class ="chart">
      <li><a href="1.html">서울</a></li>
      <li><a href="2.html">인천</a></li>
      <li><a href="3.html">경기</a></li>
      <li><a href="4.html">강원</a></li>
    </ol>
  </nav>
    <div id="article">
      <article>
      <br>
      <button onclick="check_gyeonggi();"> 더 보고싶은 지역이 있다면 추천 </button>
      <h2>경기</h2>
      <br>
      <br>
      <section>
      <h3>1. 구리전통시장</h3>
        <img src="gri1.jpg"><img src="gri2.jpg"><img src="gri3.jpg">
        <p>돌다리라고 통칭하는 구리의 가장 번화가에 위치한 구리시장. 세련된  터널식 지붕이 설치되어 비와 바람도 피할 수 있고 잘 정리된 시장이라 언제나 많은 사람들이 북적인다. 시장 내부에서 맛난 간식거리를 파는 노점들도 많고 모든 상품의 품질이 좋다. 심심하지 않게 둘러보고 즐겁게 쇼핑할 수 있는 구리시장으로 떠나보자. 시장에서는 정기적으로 상인들을 위한 교육이 진행되며, 상인들의 따뜻한 서비스 속에 시장 내 이벤트가 진행되기도 한다. </p><br>
      </section>

      <section>
      <h3>2. 모란민속5일장</h3>
        <img src="moran1.jpg"><img src="moran2.jpg"><img src="moran3.jpg">
        <p>모란은 1960년대 성남 일대의 황무지를 개간하면서 붙인 지명으로, 닷새마다 열리는 모란장의 역사가 시작된 곳이다. 4, 9일 열리는 모란민속오일장은 도심 속 장터, 그 안에는 없는 물건 없고, 파는 물건만큼이나 많은 사람들이 있다. 도심에서 즐기는 오일장은 그래서 더욱 색다른 풍경을 선사한다. 대한민국 최대 규모로 손꼽히는 민속오일장이다.</p><br>
      </section>

      <section>
      <h3>3. 못골 종합시장</h3>
        <img src="mg1.jpg"><img src="mg2.jpg"><img src="mg3.jpg">
        <p>못골시장은 수원에 구도심에 있어 팔달문, 수원화성 등의 역사문화유산과 근거리에 있습니다. 수원 구도심의 9개 전통시장 중에서 가장 규모가 작고 늦게 형성된 시장이지만 이제는 주변 시장들뿐만 아니라 전국의 전통시장을 선도하는 문화시장이 되었습니다. 주로 1,2차 식료품을 판매하는 못골시장에는 주역주민과 소통할 수 있는 휴식터, 교육장, 공연무대의 공간을 마련하여 다채로운 문화활동을 하는 시장의 모습을 갖추고 있습니다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>수원화성</li>
            <img src="suwon1.jpg"><img src="suwon2.jpg"><img src="suwon3.jpg">
            <p> 수원 화성(水原 華城) 또는 화성(華城)은 경기도 수원시 팔달구와 장안구에 걸쳐 있는 길이 5.52킬로미터의 성곽이다. 1963년 사적 3호로 지정되었으며, 1997년 유네스코 세계문화유산으로 등록되었다.수원 화성은 한국 성의 구성 요소인 옹성, 성문, 암문, 산대, 체성, 치성, 적대, 포대, 봉수대 등을 모두 갖추어 대한민국의 성곽 건축 기술을 집대성했다고 평가된다. 지형에 맞추어 읍성과 산성의 구조가 모두 존재하도록 축조되었다.</p><br>
        </ul>
      </section>
    </article>
    </div>
    </div>


    <aside>
      <a href="https://www.seoul.go.kr/main/index.jsp">서울 공식사이트</a>
      <a href="https://www.incheon.go.kr/index">인천 공식사이트</a>
      <a href="https://www.gg.go.kr/">경기 공식사이트</a>
      <a href="https://www.provin.gangwon.kr/gw/portal">강원 공식사이트</a>
    </aside>
    <footer>
      <p>본 사이트는 숙명여자대학교 웹프로그래밍개론 과제제출용사이트입니다. 비영리성 비상업성을 띄고 있습니다.</p>
    </footer>
  </body>
  </html>

 

4.html

<!doctype html>
<html>
<head>
  <title>gangwon</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script type = "text/javascript">
    function check_gangwon(){
        var rec_gangwon = prompt("강원의 가보고 싶은 곳을 추천해주세요! ");
        alert("소중한 의견 감사합니다. 더욱 더 좋은 정보로 다시 찾아뵙겠습니다!");
    }
  </script>
  <header>
  <h1><img src="seoul_shadow.png"name="deco"><a href="index.html">이달의 여행지(서울,인천,경기,강원)Ver</a><img src="seoul_shadow.png"name="deco"></h1>
  </header>
  <div id="grid">
    <nav>
    <ol class ="chart">
      <li><a href="1.html">서울</a></li>
      <li><a href="2.html">인천</a></li>
      <li><a href="3.html">경기</a></li>
      <li><a href="4.html">강원</a></li>
    </ol>
  </nav>
    <div id="article">
      <article>
      <br>
      <button onclick="check_gangwon();"> 더 보고싶은 지역이 있다면 추천 </button>
      <h2>강원</h2>
      <br>
      <br>
      <section>
      <h3>1. 속초관광수산시장</h3>
        <img src="sokcho1.jpg"><img src="sokcho2.jpg"><img src="sokcho3.jpg">
        <p>속초관광수산시장(구 : 중앙시장)은 1954년도 시장택지조성에 의거 목조건물로 임시개설된 건물이 1982년도 중앙시장 현대화사업 추진에 의거 현재의 주상복합 중앙시장으로 개설되었으며 속초관광 수산시장으로 명칭이 변경되었다. 약 500여 개의 점포를 갖추고 있으며, 지하 1층은 수산물 판매 및 횟집, 지상1,2층은 일반 도·소매업(식품 및 의류상가 등)으로 구성되어 있습니다. 설악산과 동해바다가 인접한 곳이라 주말에는 전국각지에서 온 관광객들로 북적거리는 활기찬 시장입니다. 대표적인 먹거리로는 홍게라면, 오징어 순대, 속초 물회 등이 있습니다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>영랑호</li>
            <img src="rangho1.jpg"><img src="rangho2.jpg"><img src="rangho3.jpg">
            <p>속초의 심장이라고 불리는 영랑호는 동해안에 여럿 존재하는 호수로서 석호에 해당한다. 석호는 사주에 의해 바다와 분리되어 생기는 호수로 이후 하천을 통해 담수가 유입되면서 염도가 점차 낮아지고 담수호가 되게 된다.</p><br>
        </ul>
      </section>

      <section>
      <h3>2. 강릉 중앙시장</h3>
        <img src="center1.jpg"><img src="center2.jpg"><img src="center3.jpg">
        <p>강릉 중앙시장은 영동지역에서 가장 오래된 재래식 공설시장으로 동쪽으로는 동부시장, 서쪽으로는 서부시장 그리고 그에 이어 세 번째로 개장되어 핵심 유통시장기능을 100% 발휘하고 있는 시장입니다. 조선시대부터 남쪽으로는 삼척, 울진과 북쪽으로는 양양, 속초, 고성 그리고 서쪽으로는 대관령 넘어 진부, 평창을 연결하는 산해진미와 일상용품의 물류중심지였으며, 세계무형문화유산으로 선정된 강릉단오제 행사가 중앙시장주변 남대천 일대 단오장에서 약 1주일정도 거행될 경우 전국에서 각종 품목이 모여드는 영동중심의 전통 재래시장입니다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>오죽헌</li>
            <img src="oh1.jpg"><img src="oh2.jpg"><img src="oh3.jpg">
            <p>강릉 오죽헌은 강원도 강릉시에 있는 신사임당과 율곡 이이의 생가이다. 조선시대 중기의 양반집 모습을 보존한 희귀한 예로서 주심포 계통의 청순하고 소박한 팔작집이다. 평면구조는 왼쪽으로 향한 2칸이 대청이고 오른쪽 1칸이 온돌방으로 되었으며, 기둥머리에는 창방만이 돌려지고 그 위에 기둥머리를 놓고 초공 하나로 장설과 주심도리를 받도록 했고, 기둥 사이에는 화반이 한 개 있을 뿐이다. 추녀도 너무 들리지 않고 원만하다. 뒤뜰에 오죽이 자라고 있어서 오죽헌이란 이름이 붙여졌다.</p><br>
            <li>경포대 & 해수욕장</li>
            <img src="po1.jpg"><img src="po2.jpg"><img src="po3.jpg">
            <p>경포대(鏡浦臺)는 강원도 강릉시에서 동북쪽으로 7km 지점, 언덕 위의 누대(樓臺)로, 정면 5칸, 측면 5칸의 팔작지붕 건물이다. 관동팔경의 하나이다. 1971년 12월 16일 강원도의 유형문화재 제6호로 지정되었으며, 2019년 12월 30일 대한민국의 보물 제2046호로 지정되었다.</p><br>
        </ul>
      </section>

      <section>
      <h3>3. 원주중앙시장</h3>
        <img src="ju1.jpg"><img src="ju2.jpg"><img src="ju3.jpg">
        <p>1950년대 원주 중앙동일대에 열렸던 5일장을 시초로 지금의 상설시장인 중앙시장이 되었습니다. 식당 및 다양한 점포들이 입점하기 시작하면서 자연스럽게 먹거리골목이 등장하였고 횡성과 가까운 거리의 이점 덕분에 소고기 특수부위 전문 골목도 생기게 되었다. </p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>뮤지엄 산</li>
            <img src="san1.jpg"><img src="san2.jpg"><img src="san3.jpg">
            <p>뮤지엄산은 강원도 원주시에 소재한 한솔문화재단의 사립 박물관이다. 1997년 설립된 종이 박물관이 시초로, 2005년 이 종이 박물관을 시작으로 뮤지엄산 설립이 추진되었고, 2013년 개관한 미술관인 청조 갤러리와 통합하면서 현재의 모습을 갖추게 되었다. 건축가 안도 타다오의 작품인 것으로 유명하며, 현대 예술가 제임스 터렐의 작품을 살펴볼 수 있다. ‘산’이라는 테마에 착안하여 건물 한 동에 집중되어 있는 것이 아니라 실내와 야외를 직접 걸어다니며 관람해야 한다. 뮤지엄 전체 관람 소요시간은 2시간으로, 2.5km의 연장으로 확인된다.</p><br>
        </ul>
      </section>

      <section>
      <h3>4. 춘천중앙시장</h3>
        <img src="cc1.jpg">
        <p>춘천중앙시장(春川中央市場) 또는 춘천낭만시장(春川浪漫市場)은 강원도 춘천시 중앙로2가 42-18에 위치한 상설시장으로 지상3층으로 되어있다. 춘천의 대표적 재래시장으로서 2002년부터 실시한 활성화 사업으로 현대화 모습을 갖추었으며, 한복, 가방, 신발, 의류, 가전, 귀금속, 각종 먹거리 등이 있는 시장이다.</p><br>
        <p><strong>가볼만 한 곳 </strong></p>
        <ul>
            <li>남이섬</li>
            <img src="nam1.jpg"><img src="nam2.jpg"><img src="nam3.jpg">
            <p>남이섬은 강원도 춘천시 남산면 방하리에 있는 섬이다. 남이 장군의 묘역이 있는 문화유적지이자 관광휴양지로 개발된 곳으로서 2016년 현재 세계 122개국으로부터 130만명의 외국인관광객을 포함, 연간 총 330만명이 찾는 대한민국의 대표적인 관광지이다. 행정 구역상으로는 강원도 춘천시 남산면 방하리에 속해 있고 길은 경기도 가평군으로 통한다. 둘레가 약 5km로 작은 섬이지만 1960년대부터 나들이터로 이름을 떨쳤다. 현대에는 경춘선 복선 전철이 개통되면서 가평역에서 남이섬으로 바로 통한다. 한편 2010년 12월 세계에서 14번째, 한국에서는 최초로 유니세프 어린이친화공원에 선정되었다.</p><br>
            <li>김유정 문학촌</li>
            <img src="kim1.jpg"><img src="kim2.jpg"><img src="kim3.jpg">
            <p>김유정문학촌은 소설가 김유정의 사상과 문학을 기리기 위해 생가를 복원하고 전시관을 지어 2002년 8월 6일에 설립한 문학관이다. 김유정문학촌은 한국의 대표적인 단편문학작가 김유정의 사상과 문학을 기리며, 그 기념 및 연구사업 등을 추진하고 있는 춘천시가 2002년 8월 일반 시민들에게 김유정의 삶과 문학을 좀더 가까이 소개하기 위해 설립하였다.</p><br>
        </ul>
      </section>
    </article>
  </div>
  </div>
  <aside>
    <a href="https://www.seoul.go.kr/main/index.jsp">서울 공식사이트</a>
    <a href="https://www.incheon.go.kr/index">인천 공식사이트</a>
    <a href="https://www.gg.go.kr/">경기 공식사이트</a>
    <a href="https://www.provin.gangwon.kr/gw/portal">강원 공식사이트</a>
  </aside>
  <footer>
    <p>본 사이트는 숙명여자대학교 웹프로그래밍개론 과제제출용사이트입니다. 비영리성 비상업성을 띄고 있습니다.</p>
  </footer>
  </body>
  </html>

 

login.html

<!doctype html>
<html>
<body>
  <script type="text/javascript">
    function login() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if (username == null || username == "") {
            alert("Please enter the username.");
            return false;
        }
        if (password == null || password == "") {
            alert("Please enter the password.");
            return false;
        }
        alert('로그인이 완료되었습니다. 원래 창으로 되돌아 가세요');
    }
  </script>
  <form id="form1" runat="server">
    <div class="container">
        <div class="main">
            <h2>로그인</h2>
            <form id="form_id" method="post" name="myform">
            <label>
                User Name :</label>
            <input type="text" name="username" id="username" />
            <br><br>
            <label>
                Password :</label>
            <input type="password" name="password" id="password"/>
            <input type="button" value="Login" id="submit" onclick="login();" />
            </form>
        </div>
    </div>
  </form>
</body>
</html>

'Front-end > Web' 카테고리의 다른 글

HTML  (0) 2021.02.01
개요  (0) 2021.02.01
나만의 웹 애플리케이션 제작  (0) 2020.09.07
PHP 사용 기초  (0) 2020.09.06
JavaScript 기초 (사칙연산,switch,for,while,if-else)  (0) 2020.09.05

댓글