웹 애플리케이션 만들기

HTML 실습

모델링을 HTML로 만들기

의미론적인 웹

 사이트 완성

실습환경으로 codeanywhere를 이용하고 계신 분은 링크가 작동하지 않는 문제가 있을 수 있습니다. 다음 영상을 참고하시면 문제를 해결할 수 있습니다. https://youtu.be/A67-fpyujzQ

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. 티롤
    하루동안 열심히 듣고 따라하면서 여기까지 왔네요!
    자바에 대한 걸 정말 간단하게 들어본 적 밖에 없어서 대부분의 것을 잘 몰랐는데 이번 기회로 자세히 알게 되어서 정말 다행이라고 생각해요!
    기본을 배웠으니 이제 저 나름대로 여러 번 html 파일? 을 만들어서 실행해 보려구요!
    많은 내용이 들어가니까 조금 헷갈리기는 했지만 정리를 차근차근히 하면서 다시 만들어보면 습득이 가능하겠죠!!
    이런 좋은 강의 찍어주셔서 감사합니다!
  2. 빵터진볼살
    textedit 사용자분들! 제가 어려웠던 부분들 정리합니다. 이틀 걸렸네요. 후....
    참고로 저는 맥북 언어가 영어로 설정 되어 있기에 제가 해석해서 댓글 달아요. 그러니 의미가 같은 탭/메뉴를 고르시면 되겠어용.

    1) 다른이름으로 저장(Save as..)하는 방법: 맥북 환경설정에 keyboard 들어가셔서 shortcut을 duplication: shift+command+s 설정하고, index원본 파일에서 shift+command+s누르면 바로 복사 된 파일 뜹니다.
    이 글로 이해가 안가시면 네이버 같은 곳에 "맥 다른이름으로 저장하기" 등으로 검색 해 보세요.

    2) 코드 수정하려는데 누르면 바로 chrome이 뜨면, textedit 환경설정 들어가서, 열기 및 저장(open and save) 들어가서 html로 열기 박스에 체크하시고, 다시 열어보세요. 그래도 바로 구글 연결되면 오른쪽 마우스 클릭 후 textdedit으로 열기 누르시면 됩니다.

    3)이래저래 다~제대로 했는데 링크가 안걸리거나 한글이 깨지면 따옴표의 문제일 가능성이 큽니다.
    textedit 환경설정(preference)들어가셔서 Option-스마트 인용/스마트 대시 모두 다 체크 "해제"하시고,
    따옴표("") 수정해주세요. 체크 해제하고 다시 쓰시면 따옴표 모양이 조금 다를 겁니다. 새 따옴표로 꼭 모두 바꿔주셔야 합니다.

    4)mac은 주소에 꼭 :8080붙여야 하더라고요. <h1>에도 :8080 붙여주세요. 그러면 링크 잘 걸립니다.

    처음엔 내 컴퓨터/서버가 이상한가보다 했는데.. 역시.. 제 잘못이었네요.
    한글이 깨질리도 없고, 링크가 안 걸릴리도 없습니다. 절대..네이버

    다들 화이팅이용!!
  3. Seo Yun Seok Tudoistube
    의미별로 묶어서 감싸도록 해야겠습니다^_____^
  4. 허스키
    완주했습니다
  5. 송재욱
    완주 완료 !!!
  6. ylee
    위쪽 charset encoding 부분 끝쪽에 슬레쉬 '/' 가 있고 없고에 차이가 있나요? 전수업들에서는 끝에 슬레쉬를 붙이셔서 여쭈어봅니다.
  7. 이삭
    codeanywhere로 따라하는중인데 혹시 다큐먼트 루트 어떻게 설정해야 하나요?
  8. 쿠쿠다스
    점점 복잡해지네요 ㅎㅎ
    잘듣고 갑니다~!
  9. 이상엽
    좋아요!
  10. mama
    웹에 대한 문외한이였는데 하루동안 꾸준히 들어서 여기까지 왔습니다.
    강의가 너무 고급스럽고 초보자들에게도 하나하나 개념을 일깨워주는 강의는
    제가 지금까지 살아오면서 들어본 강의 중에 최고입니다~
    정말 감사의 말씀을 드려야 할것 같아서요^^
    그럼 다음으로 넘어가보겠습니다.ㅎ
  11. John Lee
    깨지는 문제에 대해서 답을 찾았습니다.
    아마도 mac의 텍스트 편집기에서만 생긴 문제이지 싶은데요
    텍스트 편집기 상단메뉴에서 편집 / 대체 / 스마트인용에 체크가 되어 있을 겁니다.
    이 체크를 풀고 다시 말따옴표를 새로 입력해 보세요

    코드를 완벽히 따라 썼다고 생각했는데도
    한글깨짐, 링크깨짐을 경험하신 분들이라면
    이것 한방으로 모두 해결 될 겁니다.

    p.s : 다음 강의를 들으면 이 모든것이 헛되다는 것도 아실겁니다.. ㅎㅎ
    운영자님 말대로 그냥 무시하시고 다음강의 들어보셔도 좋습니다.
    운영자님 표현을 빌자면, 제가 지금 말씀드린건 삽에 이쁜 스티커 하나 붇여준 셈이구요
    다음강의에서 여러분은 포크레인을 구입하실 겁니다.. 그것도 공짜로 ㅎㅎ
    대화보기
    • John Lee
      저도 자꾸 한글이 깨져나와서 뭐가 문제인가 살펴봤어요
      <meta charset="utf=8">도 다시 넣어보고 했는데 잘 안되더군요
      그런데 한가지 발견한 건, 저 말따옴표 " <- 요녀석이 좀 다르더라구요
      예제를 복사 붇여넣기 해서 쓰면 정상적으로 나타나는데
      키보드로 직접 써 넣으면 쪼금 다르게 써져요
      살짝 끝도 가늘어지고 눕는다고나 할까.;;;
      보통 익숙하게 보는 그 말따옴표로 표시되고 나면 코드가 정상작동을 안하더라구요
      키보드로 써 넣어도 정상적으로 입력되게 하는 방법은 아직 모르겠습니다.
      아마도 아래에 같은 현상이신 분들은 저랑 같은 것 아닐까 생각됩니다.
      그외에 하이퍼링크가 안먹는 것도 아마 동일할꺼 같구요

      참고로 저는 맥에서 텍스트 편집기로 사용하고 있습니다.

      p.s: 운영자님이 한글깨지는건 나중에 다 해결된다 하시니 그냥 믿고 다음단계로 가보렵니다 ㅎㅎ
    • Seunghyun Shin
      개쩐디 ... 직감적인 교육
    • 독할할래요
      \apache2\htdocs

      입니다~
      대화보기
      • 슈퍼디벨로퍼
        완료!
      • 서동주
        첫번째 강의에서 저장하는거요
      • 서동주
        document root 가 어디에 있나요?
      • 지미
        2017/04/29 완료! 감사합니다.
      • Hai-2
        Mac으로 공부중입니다.
        강의 잘 듣고있어요!
        질문있습니다.
        제가 한 페이지 씩 저장해서 html에 저장하고 링크도 넣어줬는데 왜
        index 페이지에서 링크를 누르면 blank로 나올까요?
      • Samuel K
        MAC에서 공부중입니다. 하나하나 따라가고 있습니다.
        질문 드릴 것이 있는데요.

        INDEX페이지 로딩의 경우, 사파리에서는 bitnami메인페이지를(기존 index삭제)보여주고,
        크롬의 경우, 작성한 INDEX페이지로 로딩이 됩니다. 사파리로도 보일 수 있게 하는 방법이 있을까요?

        좋은 강의 감사합니다.
      • 2017/04/21
        정말 강의도 알기 쉽고 너무 재밌고 내용도 쉬워서 좋네요
      • quodvide
        시간가는줄 모르고 지금까지 안쉬고 강의 들었는데 정말 너무 설명 잘하시네요 감탄하고갑니다
        얼마전에 웹프로그래밍 좀 관심생겨서 구글링하면서 어떻게 동작하는지 좀 알아보려고했는데 너무 어려운 용어들만 나열하여서 이해하기 힘들었는데 너무 쉽게 이해되네요 뭐 전공자라 좀더 빨리 알아듣는것도 있겠지만..
        아무튼 강의 너무 잘 보고있고 마지막까지 다 보겠습니다 감사합니다 !!
      • 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>사이에 넣으셨나요?
          대화보기
          • 그건 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속성을 꼭! 잘 살펴봐 주세요~ ^^ 파일명이 정확히 일치해야 합니다~~
                      • 답변 너무 감사합니다! ^^
                        대화보기
                        • 직접하자
                          도와주시려는 마음 감사합니다. 정말 함께 같은 강의실에서 수강하는것과 똑 같은 효과네요
                          제가 했던, 그 틀렸던 코딩은 바로 다 지워버렸어요. 그래서 보여드릴수가 없게된것이 참 아쉽네요
                          보여드릴수가 있다면, 제가어디가 틀렸고, 뭐가 잘못되었는지를 알 수가 있어서 도움이 많이 되었을것 같은데 말이죠. 이 강의만 제가 몇번을 반복해서 들으며 따라했어요. 이제 되기는 하는데, 며칠 후에 혼자서 한번 더 해보려고합니다. 그때 잘 되면 그다음강의로 넘어가고, 잘 안되면, 다시 또 들어야겠죠? ...
                          그래도 참 재미있고, 함께 수강하는 분들이 있어서 좋습니다. 감사합니다.
                          대화보기
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기