웹 애플리케이션 만들기

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. whon
    2017/04/21
    정말 강의도 알기 쉽고 너무 재밌고 내용도 쉬워서 좋네요
  2. quodvide
    시간가는줄 모르고 지금까지 안쉬고 강의 들었는데 정말 너무 설명 잘하시네요 감탄하고갑니다
    얼마전에 웹프로그래밍 좀 관심생겨서 구글링하면서 어떻게 동작하는지 좀 알아보려고했는데 너무 어려운 용어들만 나열하여서 이해하기 힘들었는데 너무 쉽게 이해되네요 뭐 전공자라 좀더 빨리 알아듣는것도 있겠지만..
    아무튼 강의 너무 잘 보고있고 마지막까지 다 보겠습니다 감사합니다 !!
  3. egoing
    그렇다고 보셔도 무방합니다.
    (실제론 좀 더 복잡한 내부 구현이 있습니다)
    대화보기
    • novel2958603
      그러면https://opentutorials.org라고 주소창에 입력하면 index.html이라고 적힌 파일이 뜨는건가요?
    • 윤상철
      Mac의 텍스트 편집기에서 복제(Shift+Command+S)시 텍스트 파일로 저장되시는 분들은
      텍스트 편집기의 환경설정 - 열기 및 저장하기 탭의
      파일을 저장할 때: "일반 텍스트 파일에 ‘.txt’ 확장자 추가"를 체크 해제 하시고
      복제시에 파일 확장자명 .html까지 입력해 보세요.
    • SeongJoo Hong
      2017.04.08
      오~신기해
    • 도디아
      감사합니다. 알고있는 지식을 나눠준다는건 정말 큰 재능인것 같아요 존경스럽습니다!!
    • bigmoon
      정말 대단하시네요 엄청난 분량을 직접 다 강의하시고 ㅠㅠ 멋지십니다
    • 성단
      <meta charset="UTF-8" />
      을 <head></head>사이에 넣으셨나요?
      대화보기
      • dongs
        그건 html 파일 저장할때 인코딩을 utf-8로 다 잘했는지, head 부분 문자셋팅(charset="utf-8")이 모든 파일 다 되어있는지 다시한번 시도해보는건 어떨까요?? 예전에 그런경험이 있었던적이 있거든요..
        대화보기
        • 혹시 웹서버를 설치하지 않으셨나요?
          그렇다면, 위 쪽에 있는 강좌인, [xxx에 웹서버 설치] 라는 강좌 중에 자신의 OS에 맞는 강좌를 보고 따라해 보세요.

          그리고 여기서 말하는 document root 폴더의 위치 또한, 해당 강좌에 나와있습니다.
          대화보기
          • 왕왕초보밥
            localhost로 안들어가지면 안되는건가요??
            ip주소로 들어가도 안되고... 인터넷에 검색해서 설정이란 설정도 다 바꿨는데도
            안들어가지구 에러창만 뜨네요....... ㅜㅜㅜㅜ 어떻게 하면좋을까용...

            저는 조립식컴이구요.. 공유기sk꺼입니다 ㅜㅜㅜ
          • 이은학
            ~3.29
          • 강민수
            03.29
          • 최지웅
            안녕하세요 document root에 저장하라고했는데 이게 어디에 저장하면되는건가요?
          • egoing
            한글 깨지는 문제는 나중에 해결하게 됩니다~ 지금은 무시하고 지나가셔요!
            대화보기
            • 전영재
              사이트도 열리고 링크도 되고 잘작동하는거 같은데
              영문은 잘표현되는데 한글부분만 ㅁㅁㅁㅁㅁ이렇게 네모난 모양으로 보이네요..
              왜이런지 모르겠어요..ㅜ
            • 배태성
              localhost 같은 링크를 어떻게 만드나요?? ㅠㅠ
            • 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
                  저도 그게 궁금합니다.. 아시는 분 알려주세요.
                  대화보기
                  • 안녕하세요! 저는 맥 os사용중 입니다~
                    텍스트 편집기로 작업한다음에 html로 저장을 하고,
                    이 파일을 다시 텍스트 편집기로 열면 코드를 볼 수가 없네요ㅠ
                    제가 쓴 코드를 다시 보려면 어떻게 해야하는지요?
                  • 청춘맨
                    아직 시작단계일 뿐이지만 무척 재밌습니다! 계속 열심히..!!
                  • Min Goo
                    여러분, 저도 오류났었는데요! 링크클릭했는데 안나오는건 페이지주소를 정확히 입력하지 않아서입니다.
                    a태그의 href속성을 꼭! 잘 살펴봐 주세요~ ^^ 파일명이 정확히 일치해야 합니다~~
                  • 답변 너무 감사합니다! ^^
                    대화보기
                    • 직접하자
                      도와주시려는 마음 감사합니다. 정말 함께 같은 강의실에서 수강하는것과 똑 같은 효과네요
                      제가 했던, 그 틀렸던 코딩은 바로 다 지워버렸어요. 그래서 보여드릴수가 없게된것이 참 아쉽네요
                      보여드릴수가 있다면, 제가어디가 틀렸고, 뭐가 잘못되었는지를 알 수가 있어서 도움이 많이 되었을것 같은데 말이죠. 이 강의만 제가 몇번을 반복해서 들으며 따라했어요. 이제 되기는 하는데, 며칠 후에 혼자서 한번 더 해보려고합니다. 그때 잘 되면 그다음강의로 넘어가고, 잘 안되면, 다시 또 들어야겠죠? ...
                      그래도 참 재미있고, 함께 수강하는 분들이 있어서 좋습니다. 감사합니다.
                      대화보기
                      • ㅇㅇㄹㅈ
                        님의 코드를 올려주시면 도움이 될 듯합니다
                        대화보기
                        • 직접하자
                          제 코딩에 문제가 있었나봅니다. 요 위에 선생님이 올려주신 것을 그대로 카피해서 저장하고 열어보니 잘 되네요. 하나하나 보면서 똑같이 했다고 생각하는데, 제가 뭘 틀리게 했는지 당췌 못찾겠네요.
                          ㅠ.ㅠ
                          대화보기
                          • 직접하자
                            도와주세요. 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
                                    감사합니다.
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기