웹 애플리케이션 만들기

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. Kevin Seongho Na
    자막에 오류가 있어 알려드립니다.
    2번째 동영상 8:55에 아래와 같이 자막이 설정되어 있습니다.
    "기분 나쁘지 않은 사람들이죠"

    하지만 음성으로는 아래와 같습니다.
    "기분 나쁘게 하는 사람들이 있죠"
  2. 임진웅
    2017.1.16 잘봤습니다 감사합니다~
  3. 90ano
    하루에 한 강의 라도 열심히 20170116 완료.
  4. ckyuseon
    좋은 강의 잘 봤습니다.
  5. 임정훈
    잘 봤습니다!
  6. DEP H
    더 좋은 방법이 있었네요! :-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 님 덕분에 이리저리 둘러보다가 요런 야매팁을 알아냈네요.
      부디 도움이 되셨기를 바랍니다.

      (추가: 저의 경우에는, 설정을 바꾼 뒤에는 기존에 작업하던 도큐멘트가 아닌 새 도큐멘트를 열어서 다시 작업했습니다. 기존 도큐멘트에는 바뀐 설정이 적용되지 않더라구요. 기존 도큐멘트의 설정값도 바꿀 수 있는 방법 아시는 분은 좀 알려주세요..)
      대화보기
      • 울랄라부라더스
        잘 들었습니다.
      • 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 완료
        • 완료
        • 김명균
          한글 깨지시는 분들 저장할때 유니코드 필수! ㅋㅋㅋㅋ
        • 에헤라디야
          161213
        • 161212
        • mellow
          161209 완료
        • 괭이심장
          연재찡님 질문하신지 오래되어서 확인이 되실지 모르겠지만 답을 달아 드립니다.

          우선 글을 읽다보니 '닫혀있다'라는 것에 대해서 조금 착각이 있으신것 같습니다.
          아마도 지금은 <a href=.... host/"> 에서 가장 뒤의 /를 보시고 닫다라고 생각하시는 듯 합니다.
          닫혀 있다는 것은 같은 명령어, 즉<a>나 <li>등...에 대해서 동일한 </a>나 </li>를 제공하는 것을 말합니다.
          즉 <a> = 열다 , </a>=닫다 입니다.

          <meta>에 대해서 닫을 필요가 없다는 것은 가장 뒤에 </meta>를 붙이지 않아도 된다는 뜻입니다.

          그렇기에 질문에 예로 드신 2종류의 <a>태그는 둘 다 닫혀있는 상태입니다. (</a>랑 </li>가 달려있으니까요)
          그리고 이 경우에 </a>나 </li>를 붙이지 않으면 오류가 생깁니다.
          어디까지가 그 태그의 끝인지 컴퓨터는 인식할 방법이 없으니까요.
          대화보기
          • 생활코딩 짱
            감사합니다 !
            대화보기
            • Jenna Agnes Kim
              생활코딩 짱 님~
              OSX 사용하시는거면 <a href="http://localhost:8080/page_html.html">JavaScript란?</a> 와 같이
              localhost 뒤에 :8080 를 붙여 수정하니 정상 작동 되더라구요 한 번 시도해 보세용!
            • 생활코딩 짱
              각각의 태그 항목들을 저장한 후 클릭하는데, 링크를 걸었음에도 불구하고 3개의 항목 모두 페이지가 찾을 수 없는 페이지로 나오는데 왜그럴까요ㅜ.. 항목들에 대한 링크 페이지도 다 저장했습니다

              수정: os환경인데 각각의 링크가 걸린 항목을 누르면, url에서 localhost:8080인 8080이 사라져서 링크가 연결이 안되고 찾을 수 없는 페이지로 나옵니다. 해결방법이 없을까요ㅜㅜ..
            • 윤지은
              열심히 듣고 있습니다~ 감사합니다!
            • Yonjung Ji
              완료. 오늘도 친절한 선생님모드..^^ 감동이에요
            • 쿠티뉴 부상
              16.11.30 완
            • harris
              2016.11.30 23.28
            • 문성은
              16.11.29 완료
            • 16.11.23 학습완료!
            • cluelin
              HTML 실습 부분에서 공동공부 팝업 창이 안뜨는것 같습니다~~
            • JustStudy
              파일이 있는 디렉토리를 확인해 보시죠.
              홈디렉토리에 있는지, 또는 홈디렉토리의 소속 경로(이런경우 경로명 기입)에 있는지 확인요.
              대화보기
              • 이현식
                JavaScript란? 에 링크를 걸어두는데에 연결이안됩니다 ㅜㅜ
                맨처음 홈페이지를 index.html로 저장하고 page_html.html파일도 저장했고
                이제 링크를 클릭하면 같은화면이 나와야하는데 not found가 뜨네요

                홈페이지를 임의로 ex_html_4.html로 바꾸고 링크를 걸었더니 그건또 됩니다
                무슨원리인가요?
              • Chang Joon Rick Kim
                11.09 완료
              • 당당비
                11.07완료
              • 배둘
                11/07완료
              • Bogwang Jung
                11.5 완료
              • 으잉
                11/4 6:39
              • 2016. 11. 04 1/4주차 완료
              • 강연지
                16.11.03
              • Sanguk An
                11.02 23.23분 완료
              • 다람쥐님
                localhost:8080 입니다 사이에 : 가 빠졌어요
                대화보기
                • 감사합니당
                  대화보기
                  • Dong-woo Nam
                    jw // index파일을 지우고 작성한 코드로 메모장에서 다시 index로 저장하세요
                    비트나미 설치할때 인덱스파일이 같이 설치되는데 그게 비트나미사이트로 연결되있어요
                  • 활화산
                    완료합니다
                  • 실습3 에서 Java Script 대제목을 누르면 처음으로 돌아가는게 아니라
                    비트나미사이트로 가는건뭐죠..ㅠㅠ흑흑
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기