웹 애플리케이션 만들기

HTML 실습

모델링을 HTML로 만들기

의미론적인 웹

 사이트 완성

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
  		<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost/page_op.html">연산자</a></li>              
		</ol>
	</nav>
</body>
</html>
만약 포트 번호가 8080이라면 (접속 할 때 localhost:8080으로 접속한다면) 링크를 아래와 같이 작성하셔야 합니다. 
  		<li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost:8080/page_op.html">연산자</a></li>  

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>변수와 상수</h2>
    변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

쉬어가기

소스코드

 github

댓글

댓글 본문
작성자
비밀번호
  1. 최지웅
    안녕하세요 document root에 저장하라고했는데 이게 어디에 저장하면되는건가요?
  2. egoing
    한글 깨지는 문제는 나중에 해결하게 됩니다~ 지금은 무시하고 지나가셔요!
    대화보기
    • 전영재
      사이트도 열리고 링크도 되고 잘작동하는거 같은데
      영문은 잘표현되는데 한글부분만 ㅁㅁㅁㅁㅁ이렇게 네모난 모양으로 보이네요..
      왜이런지 모르겠어요..ㅜ
    • 배태성
      localhost 같은 링크를 어떻게 만드나요?? ㅠㅠ
    • purin
      2017.03.20.잘봤습니다~
    • 박상범
      저도 안되더라구요 동영상엔 어떻게 하는지 안나와있어서 혼자 해봤는데
      <li><a href=page_html.html>JavaScript란?</a></li>
      <li><a href=page_vc.html>변수와 상수</a></li>
      <li><a href=page_op.html>연산자</a></li>
      이런식으로 ""랑 앞에 localhost:8080/ 까지를 지우고 뒷부분만 치니까 링크연결되네요
      대화보기
      • publicum
        맥에서 한 번 작성한 코드를 텍스트편집기에서 다시 열 때, 코드가 아니라 웹 브라우저에서 처럼 결과물이 보인다는 말씀이시라면 이렇게 해보세요. [*제가 맥 기본언어를 영어로 설정해둬서 메뉴 이름이 정확하지 않을 수 있습니다]

        1) 텍스트편집기 메뉴에서 설정(Preference) -> '열기 및 저장(Open and Save)' 탭으로 갑니다.
        2) 맨 위의 "파일을 열 때(When Opening a File)"라는 항목 중, 첫 번째 부분:
        "HTML을 파일을 열 때 형식문서 대신 코드로 디스플레이하기(Display HTML file as HTML code instead of formatted text)" 단추에 체크해주세요. 다음부터 HTML파일을 열 때, 결과물이 아니라 코드를 보여줍니다.

        물론 다음 강좌에서 소개해주시는 Atom같은 코드에디터를 사용하시는 경우, 텍스트에디터를 더 사용하실 필요가 없긴 하겠지만요.
        대화보기
        • 14번째
          3.17.
        • koolkon
          동영상이 안 나오는 것 같습니다
        • limlim
          저도 텍스트 편집기로 열면 코드를 볼 수가 없네요 ㅠㅠㅠ
          여기서 막힙니다.
          그리고 텍스트 편집기에서 다른이름으로 저장은 command+shift +s 로 저장을 하면
          작동이 되지 않아 매번 현 파일을 저장 후 닫고 새 파일을 만들어 앞전 작업분을 따로 복사해 붙여 넣고 다시 저장해야 작동이 됩니다. 혹시 다른이름으로 저장하는법 아시는분 있을까요?
        • Lee Hackrea
          저도 그게 궁금합니다.. 아시는 분 알려주세요.
          대화보기
          • nakra
            안녕하세요! 저는 맥 os사용중 입니다~
            텍스트 편집기로 작업한다음에 html로 저장을 하고,
            이 파일을 다시 텍스트 편집기로 열면 코드를 볼 수가 없네요ㅠ
            제가 쓴 코드를 다시 보려면 어떻게 해야하는지요?
          • 청춘맨
            아직 시작단계일 뿐이지만 무척 재밌습니다! 계속 열심히..!!
          • Min Goo
            여러분, 저도 오류났었는데요! 링크클릭했는데 안나오는건 페이지주소를 정확히 입력하지 않아서입니다.
            a태그의 href속성을 꼭! 잘 살펴봐 주세요~ ^^ 파일명이 정확히 일치해야 합니다~~
          • Joie
            답변 너무 감사합니다! ^^
            대화보기
            • 직접하자
              도와주시려는 마음 감사합니다. 정말 함께 같은 강의실에서 수강하는것과 똑 같은 효과네요
              제가 했던, 그 틀렸던 코딩은 바로 다 지워버렸어요. 그래서 보여드릴수가 없게된것이 참 아쉽네요
              보여드릴수가 있다면, 제가어디가 틀렸고, 뭐가 잘못되었는지를 알 수가 있어서 도움이 많이 되었을것 같은데 말이죠. 이 강의만 제가 몇번을 반복해서 들으며 따라했어요. 이제 되기는 하는데, 며칠 후에 혼자서 한번 더 해보려고합니다. 그때 잘 되면 그다음강의로 넘어가고, 잘 안되면, 다시 또 들어야겠죠? ...
              그래도 참 재미있고, 함께 수강하는 분들이 있어서 좋습니다. 감사합니다.
              대화보기
              • ㅇㅇㄹㅈ
                님의 코드를 올려주시면 도움이 될 듯합니다
                대화보기
                • 직접하자
                  제 코딩에 문제가 있었나봅니다. 요 위에 선생님이 올려주신 것을 그대로 카피해서 저장하고 열어보니 잘 되네요. 하나하나 보면서 똑같이 했다고 생각하는데, 제가 뭘 틀리게 했는지 당췌 못찾겠네요.
                  ㅠ.ㅠ
                  대화보기
                  • 직접하자
                    도와주세요. index.html 로 저정한 파일을 열면 페이지는 열리는데 아무것도 안떠요
                    Not Found 라는 말이 안뜨는거 보면 페이지는 열린것 같은데, 제가 코딩을 잘못한것인지 뭐가 잘못된것인지 대체 모르겠어요. 이것땜에 진도를 나갈수가 없네요. 앞의 강의 (html 이론)에서 hello world 는 잘 되었습니다.
                    그리고 제꺼는 localhost81 로 저장되거든요. 도대체 뭐가 문제일까요?
                  • 윤미선
                    오류가 나는데 원인을 모르고 있습니다.
                    맥/텍스트에디터 쓰는데요. http://localhost......tml 이렇게 치면 잘 나오는데,
                    페이지에서 링크를 누르면 주소창이 http://localhost......ot; 이렇게 바뀌면서

                    Not Found
                    The requested URL /“http://localhost:8080/page_html.html” was not found on this server.

                    이렇게 나옵니다. 왜 그런 걸까요?
                  • Sang Hyun Park
                    공동공부 창을 열었을 때 움직인 페이지 위치가 공동공부 창의 헤더 부분을 가려서 닫기 버튼이 안보여서 한참을 찾았습니다.
                    또, 공동공부 창을 닫았을 때 페이지가 갱신되어서 시청중이던 영상이 중단되는 불편함이 있었습니다.
                    생각 났을 때 적기 위해서 이 곳에 남긴 점을 양해 부탁드립니다.
                  • 이승우
                    20170301완료
                  • 가드
                    3/01완료
                  • 너굴
                    2/23 20시간 계속 듣기 완료!
                  • 저도 비슷한 문제 였는데, 맥에서는
                    localhost 뒤에 localhost:8080 을 붙이면 해결 되는거 같아요~
                    대화보기
                    • 무르김
                      head 태그 안에
                      <meta charset="utf-8"> 이거 쓰시면 돼요!

                      저게 한글 안 깨지게 해주는 거라고 영상에서 봤던 것 같아요.
                      대화보기
                      • 무르김
                        저 모든 article 들이 '연산자' 링크로 연결되는데 어떻게 해야 할까요... 틀린 내용들은 없는 것 같은데..
                      • 이지연
                        안녕하세요.
                        항상 잘 보다가 처음 댓글 달아봐요. : )

                        맥에서 실습 해 보았는데요.
                        <a> 태그로 링크 연결 하고
                        각 'page_html.html', 'page_vc.html', 'page_op.html' 만들어 저장하고
                        링크 클릭해보았을 때 '페이지를 찾을 수 없음' 페이지로 이동하더라고요.

                        혹시나 다른 이유가 있을까 해서 문의드려요.
                      • 흑염룡
                        한글이 꺠지는 오류가있는데 어떻게 해야하나요?
                        대화보기
                        • 흑염룡
                          한글이 꺠지는 오류가있는데 어떻게 해야하나요?
                        • vgb000123@gmail.com
                          http://localhost와 http://localhost......은 전혀 다른 페이지 입니다. 간단하게 생각하신다면 localhost라는 사이트 그룹안에 있는 멤버 중 하나가 localhost/index.html이라고 할 수 있죠.
                          대화보기
                          • 2017/02/17
                          • 이승룡
                            좋은 강의 감사드립니다
                          • 좋은 강의 감사드립니다!
                            질문이 한가지 있는데요.
                            index.html으로 저장했는데 그 파일을 실행하면 제가 만든 페이지가 나옵니다.
                            그런데 다시 <h1>태그의 JavaScript 링크를 누르면 bitnami로 연결이 됩니다. (주소 http://localhost/)
                            그런데 주소를 http://localhost/index.html로 변경하면 제가 만든 페이지가 나옵니다.
                            index.html을 붙이는지 안붙이는지에 따라 다른 페이지가 보여질 수 있나요?
                            기존에 디렉토리에 있던 index.html을 덮어쓰고 새로 저장한 것인데 왜 그렇게 연결이 될까요?ㅠ

                            이고잉 선생님과 모든 학생분들 화이팅!!
                          • 이영전
                            index.html파일을
                            index.html.html로 저장했었는데요
                            파일명을 수정하고 다시 코딩했더니 문제 해결됬어요!
                            아직은 시작단계라서 문제점이 발생했을때 어려움이 있지만 한 달 뒤 반 년 뒤 일 년 뒤에는
                            스스로 주도적으로 학습하고 문제점도 해결 할 수 있는 프로그래머가 됬으면 합니다ㅎ
                            도움주신분들 감사해요! 모두 화이팅이요!
                          • 170207
                            감사합니다.
                          • @이영전
                            저같은 경우 홈에 해당하는 주소를 "http://localhost/index_1.html" 로 지정해놨습니다.
                            "http://localhost" 의 주소가 저같은경우 다른곳으로 지정되어 있어서
                            모든 html파일에 <h1><a href="http://localhost/index_1.html">JavaScript</a></h>
                            로 지정해놨네요.

                            아니면 다른 문제라면 utf-8의 파일로 저장 안하셔서 그런거 일수도 있지 않을까요?
                          • 이영전
                            @장수환
                            네 4개의 html파일에
                            <header>
                            <h1><a href="http://localhost/">JavaScript</a></h>
                            </header>
                            잘 입력했는데요
                            강의 들을 때도 확인했고 수환님께서 말씀하셔서 한 번 더 확인해봤는데도 도통모르겠네요 ㅠ
                            JavaScript를 누르면 웹브라우저가 localhost로 표시되는데... 아무런 화면이 안뜨는건 왜일까요 ㅠ
                          • 장수환
                            4개 html파일에
                            <header>
                            <h1><a href="http://localhost/">JavaScript</a></h1>
                            </header>
                            잘 입력한거 맞아요?
                            대화보기
                            • 프라
                              정말 많이 배웁니다! 원래 작심삼일하는 성격이지만 이번만큼은 끝까지 강의 들으려고합니다!
                              좋은 강의 정말 감사합니다!!
                            • 이영전
                              강의 잘 들었습니다!
                              그런데 한가지 궁금한 점이 있어요
                              <header>
                              <h1><a href="http://localhost/">JavaScript</a></h1>
                              </header>

                              헤더를 다음과 같이 설정?했는데요 왜 누르면 아무 창이 안뜨죠...
                              이고잉님께서 JavaScript를 누르시면 대문페이지가 열리던데....저는 왜 안될까요??
                              공동공부님들 도움 요청할게요 ㅠ
                            • 강경호
                              감사합니다
                              170204
                            • 태그명이 틀렸어요. <head></head>입니다. header이 아니구요~
                              대화보기
                              • sinclair
                                덕분에 해결되었습니다. 감사합니다.
                                대화보기
                                • sinclair
                                  좋은강의 잘 들었습니다. 감사합니다 !!!
                                • 심재엽
                                  좋은 강의 잘 따라가게 촘촘히 구성해 주셔서 감사합니다^^
                                • 첨지
                                  완료!
                                • egoing
                                  textedit로 하시면 됩니다~
                                  대화보기
                                  • 열혈학생
                                    질문이 있습니다~!!!

                                    현재 맥을 쓰고 있는데요...
                                    사파리에서 열 때는 왜 글씨가 깨져서 나올까요??크롬에서는 정상적으로 나옵니다
                                  • 열혈학생
                                    맥으로 공부하시는 분들 중에 저와 같은 애러를 경험하실거 같아서 올려봅니다.

                                    링크 아티클이 깨지시는 분들 있을텐데요...
                                    그럴때는 index파일의 코딩 중 링크 주소에 :8080을 붙여야되더라구요~

                                    예를 들어
                                    index파일 링크 코딩에 <a href="http://localhost:8080/page_html.html">
                                    또한 page_html파일에도 <a href="http://localhost:8080/page_html.html"> 등등

                                    맥으로 링크 주소 쓸 때는 :8080을 자동적으로 붙여야할 거 같습니다!!
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기