웹 애플리케이션 만들기

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. 너굴
    2/23 20시간 계속 듣기 완료!
  2. 저도 비슷한 문제 였는데, 맥에서는
    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이라고 할 수 있죠.
          대화보기
          • Funny
            2017/02/17
          • 이승룡
            좋은 강의 감사드립니다
          • Joie
            좋은 강의 감사드립니다!
            질문이 한가지 있는데요.
            index.html으로 저장했는데 그 파일을 실행하면 제가 만든 페이지가 나옵니다.
            그런데 다시 <h1>태그의 JavaScript 링크를 누르면 bitnami로 연결이 됩니다. (주소 http://localhost/)
            그런데 주소를 http://localhost/index.html로 변경하면 제가 만든 페이지가 나옵니다.
            index.html을 붙이는지 안붙이는지에 따라 다른 페이지가 보여질 수 있나요?
            기존에 디렉토리에 있던 index.html을 덮어쓰고 새로 저장한 것인데 왜 그렇게 연결이 될까요?ㅠ

            이고잉 선생님과 모든 학생분들 화이팅!!
          • 이영전
            index.html파일을
            index.html.html로 저장했었는데요
            파일명을 수정하고 다시 코딩했더니 문제 해결됬어요!
            아직은 시작단계라서 문제점이 발생했을때 어려움이 있지만 한 달 뒤 반 년 뒤 일 년 뒤에는
            스스로 주도적으로 학습하고 문제점도 해결 할 수 있는 프로그래머가 됬으면 합니다ㅎ
            도움주신분들 감사해요! 모두 화이팅이요!
          • InSoo
            170207
            감사합니다.
          • InSoo
            @이영전
            저같은 경우 홈에 해당하는 주소를 "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
            • Jaein
              태그명이 틀렸어요. <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을 자동적으로 붙여야할 거 같습니다!!
                  • 정상균
                    질문있습니다. 맥으로 텍스트에디터를 이용해서 연습해보려면 어떻게 해야하는건가요?
                    윈도우는 할 수 있겠는데 저는 맥을 쓰거든요ㅠㅠ
                    근데 맥은 저장하는게....맥도 텍스트에디터로 할 수 있는 거 맞나 모르겠습니다ㅠㅠ
                  • 디레
                    질문있습니다!!
                    <header>
                    <h1><a href="http://localhost/">JavaScript</a></h1>
                    </header>
                    여기서 헤더를 쓰니까 페이지에서는 안뜨고 헤더를 없애니까 잘 작동되는데 왜 그런지 알고 싶습니다~
                  • 구램그램
                    좋은 강의 감사합니다:)
                  • Kevin Seongho Na
                    자막에 오류가 있어 알려드립니다.
                    2번째 동영상 8:55에 아래와 같이 자막이 설정되어 있습니다.
                    "기분 나쁘지 않은 사람들이죠"

                    하지만 음성으로는 아래와 같습니다.
                    "기분 나쁘게 하는 사람들이 있죠"
                  • 임진웅
                    2017.1.16 잘봤습니다 감사합니다~
                  • 하루에 한 강의 라도 열심히 20170116 완료.
                  • ckyuseon
                    좋은 강의 잘 봤습니다.
                  • 임정훈
                    잘 봤습니다!
                  • 더 좋은 방법이 있었네요! :-0!! 알려주셔서 고맙습니다 ㅎㅎ
                    대화보기
                    • 매모리신
                      하나의 컨텐츠를 여러 태그로 마크업? 할때는 순서가 달라도 상관없나보네요.

                      <li><a href="http://localhost/">JavaScript</a></li>


                      <a href="http://localhost/"><li>JavaScript</li></a>

                      궁금해서 이거 둘다 해봤는데 똑같이 나오네요.
                    • 이상민
                      에디트 플러스로하면 왜 오류가 나는거죠..
                    • junezzz
                      안녕하세요!
                      저도 JinWoo Park님과 똑같은 이슈가 있어서 DEP H님이 알려주신대로 시스템 환경설정에서 텍스트 설정을 바꿔보았는데요, 이 방법을 쓰게 되면 컴퓨터 전체에 대한 시스템 환경설정이 바뀌길래, 다른 방법을 찾아봤습니다.

                      textEdit 어플리케이션 자체의 환경설정을 바꿔주는 방법인데요.
                      '텍스트편집기' 메뉴 > '환경설정' > '새로운 도큐멘트' > '옵션' 에서 '스마트 인용' 과 '스마트 대시'의 체크박스가 디폴트로 체크되어 있는데, 이를 해제해줍니다.

                      이 상태에서 작업을 다시 해보시면, 큰 따옴표의 모양이:
                      1) 기본 설정 하에서는 직선 짝대기(?)로 처음에 입력되었다가 다음 텍스트를 입력하면 자동으로 따옴표가 약간 구부러진 형태의(?) 큰 따옴표로 자동변환되었는데,
                      2) 변경된 설정 하에서는 자동변환 되지 않고 그대로 직선 짝대기로 남아있는 것이 보입니다.

                      저 완전 맥맹인데.. DEP H 님 덕분에 이리저리 둘러보다가 요런 야매팁을 알아냈네요.
                      부디 도움이 되셨기를 바랍니다.

                      (추가: 저의 경우에는, 설정을 바꾼 뒤에는 기존에 작업하던 도큐멘트가 아닌 새 도큐멘트를 열어서 다시 작업했습니다. 기존 도큐멘트에는 바뀐 설정이 적용되지 않더라구요. 기존 도큐멘트의 설정값도 바꿀 수 있는 방법 아시는 분은 좀 알려주세요..)
                      대화보기
                      • 울랄라부라더스
                        잘 들었습니다.
                      • JinWoo Park님
                        제가 고민했던 문제랑 같은 문제가 아닌가 해서 답글 달아봅니다 ㅎㅎ

                        HTML 이론 강의에서 Ino Jeong 님이 올린 글입니다:

                        MAC OS의 텍스트편집기를 사용해 HTML을 작성하는 경우
                        "기호를 제대로 인식하지 못해 작동이 정상적으로 되지 않는 경우가 있습니다.

                        이럴때는 시스템 환경설정 -> 키보드 -> 텍스트 -> 스마트 인용 및 대시 인용
                        여기에서 큰 따옴표 부분이 살짝 다른모양의 큰따옴표로 바뀌어 있는 것을 확인할 수 있습니다.
                        이부분을 정상적인 큰 따옴표로 변경하거나 체크 해제해주시고, 재작업하면 정상적으로 돌아갑니다. /
                        대화보기
                        • JinWoo Park
                          질문이 있습니다. 맥에서 textedit를 사용하여 작성중인데,
                          meta charset="utf-8" 혹은 a href="http://localhost:8080" 를 사용할 때

                          meta charset=utf-8
                          a href=http://localhost:8080

                          이렇게 ""를 붙이지 않아야 작동이 잘되고 ""를 붙이면 인코딩이 안맞거나 링크가 깨지곤 합니다.

                          제가 설정을 잘못한것인지, 아니면 os의 차이에 의한건지 궁금합니다.
                        • macbookrgh55
                          2017-01-03
                          9:58 am 잘봤습니다.. 저도 잘되니 기쁘네요
                        • 쌘진
                          2016-12-30 완료
                        • 정주행
                          161226 완료
                          강의 감사합니다.
                        • Donghee Lee
                          161223완료
                        • 냉수2C
                          index.html에서 대제목 javaScript로 갈때 페이지를 찾을 수 없다고 하고 L이 빠진 locahost로 찾느냐고 합니다
                          소스코드로 해도 마찬가집니다 어떻게 해야하나요
                        • 수호아빠
                          161222 완료
                        • 161218 01:05 완료
                        • 완료
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기