생활코딩

Coding Everybody

코스 전체목록

닫기

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>

Sound of coding 

복습 하실 수 있게 뮤직 비디오로 예제를 만들었습니다. 멍 때리고 싶은 때 틀어놓고 보셔요~ 전체 뮤직 비디오 보러가기

쉬어가기

소스코드

 github

참고

여기까지 공부한 분들께 드리는 편지 (코딩야학 2기에게 보낸 편지)

댓글

댓글 본문
  1. HyeonHui Jeong
    5/7
  2. 산노을
    good job!
  3. jo7753@naver.com
    저도 사파리로 했는데 오류가 떠서
    크롬으로 다시 해봤더니 되네요ㅠ
    그리고ㅜ 저도 텍스트파일 하나하나 열어서 일반텍스트로 변경하고
    ㅜ저장을 따로 따로 해주느라 뭔가 복잡하고 어렵게 했어요ㅠ
    맥쓰시는분이라고 해서 공감가서 댓글 달아요^^
    대화보기
    • 공부
      네 지금은 그냥 에디터로 사용중인데요,
      vs code를 사용하여 작성중인데
      링크를 누르면 "Forbidden

      You don't have permission to access this resource."
      이라는 오류가 뜹니다.
      크롬이랑 사파리에서 둘다 이런 오류로 떠요! 아예 링크가 안되는것 같아요
    • 재미있다아
      혹시 링크에 8080입력하셨나요?
      대화보기
      • 공부
        감사합니다!!
        재미있다아님이 알려주신대로 별도 저장해보았는데 파일 저장은 따로 되긴하지만 링크가 걸리지 않네용..
        뭐가 문제일까요? 알려주신대로 코드도 제대로 텍스트편집기에 저장했고
        오타났을까봐 복사해서 저장해봤는데도 링크를 누르면 "Safari가 서버에 연결할 수 없음" 이 떠요 !ㅠㅠ
        링크 자체가 작동을 안하는것같아요
        대화보기
        • 재미있다아
          질문의 의도가 이게 맞는지는 모르겠지만,
          윈도우처럼 변경하시고, 옵션키 누르신 상태에서 파일 누르면 별도저장이 떠요
          (단축키로는 option+shift+command+S)
          거기서 원본파일에 변경사항 저장 체크 없애주시면 강의 내용처럼 됩니다!
          맥 기본 에디터가 조금 불편한데.. 뒤에 다른 에디터 알려주세요 ~
          대화보기
          • 공부
            Mac에서 만드는중인데
            page_html / page_vc / page_op 를 텍스트 파일에다가 새로 만들어서 저장하는건가요..?
            아니면 그냥 윈도우처럼 변경된 내용들을 계속 다른이름으로 저장하는 형태로 갱신(?)하는건가요?
            이 부분에서 너무 헷갈려서 진도를 못나가고 있습니다ㅜㅜㅜ
          • 열심히사는사람
            2020 3 30 끝까지 완료
          • guddk1999
            2020.3.26 하루한시간 꾸준히
          • LittleDuck
            check
          • 내22살동년배들다코딩배운다
            2020-02-05
          • 캐나다아조씨
            몇년이 지난 영상이지만 새롭게 공부하고 있습니다.
            좋고 알찬 내용 너무 감사드리고 쭉 열심히 하겟습니다!
          • 스티븐잡숴
            완료
          • 곤이
            감사합니다!
          • 제이리치
            19-12-23
            1번째
          • 아르하트
            감사합니다^^.
          • 코딩왕김꿈나무
            완료
          • 잘살자
            감사합니다. 완료
          • 완료!
          • 2019-11-29 완료
          • 남자태호
            20191114 완료 감솨합니다!
          • 웹초보
            20191021 완료

            감사합니다
          • 수강완료
          • 들국화
            감사합니다
          • bangbyb
            완료쓰
          • sssssa
            너무 좋은 강의 였습니다!
          • Hee-ung Lee
            너무나도 알찬 강의 <strong>감사합니다.</strong>
          • idontknow
            https로 localhost를 불렀는데 크롬에서 계속 오류로 뜨네요, 그런데 http는 정상작동하는데 저만 그런건가요?
          • ㅇㄹ
          • 완료!!
          • 김민준
            강의 잘 보고 있습니다.
            근데 제가 예전에 jsp를 공부하면서 아파치 톰캣에서 사용했었는데
            똑같은건가요 ?
            아니면 음,, 아파치 톰캣에서는 이 강의 내용을 따라할수 있나요 ?
          • 유관동
            답을 찾았습니다. 파일 저장시에 utf-8로 저장하지 않아서 그랬습니다. 감사합니다.
          • 유관동
            질문 있습니다.
            똑같이 따라 했는데 한글이 깨지는 이유는 뭔가요?
          • 칠칠석
            2019년 4월 7일

            완료!
          • 셜리
            완료!
          • 리마인더
            완료!
          • 열공
            apache 포트값은 없앨 수 없나요? 포트값을 링크 클릭 할때마다 입력하지않으면 not found에러가 계속 뜨네요 ㅠㅠ
          • 감자
            apache 포트값은 없앨 수 없나요? 포트값을 링크 클릭 할때마다 입력하지않으면 not found어레가 계속 뜨네요 ㅠㅠ
          • 쫄롱이
            많은 강의 친절히 설명해 주시느라 고생하셨습니다.
          • KimJunYoung
            *도움이 필요합니다.*
            http://localhost:8080/ 이 링크를 거니까 bitnami.index 화면이 뜨는데 어떻게 해결해야되나요?
            어쩔수 없이 http://localhost......ml/ 여기까지 다 타이핑해서 링크를 걸어놓은상태인데
            이렇게하니까 해결이 되었습니다.
            http://localhost:8080/ 여기까지만 타이핑해서 되게끔하고싶은데 방법 좀 가르쳐주세요 !
          • 초록매실
            뮤직비디오 넘 멋있어 고잉이형~~
          • 구관조
            document 루트에 저장한 index.html 파일을 알려고 동영상처럼 localhost/index.html를 입력했는데, 계속 404 found 에러가 나는데 어떻게 해야하나요?
          • ksh0712
            프론트와 백엔드 둘 다 다뤄볼 수 있다는 수업구성이 제가 딱 원하던 강좌이고 설명도 알기 쉽게 해주셔서 듣기 좋아용
          • psy1088
            감사합니다!!
          • Unga
            정말 감사합니다. 많은 도움이 되고 있습니다.
          • James
            질문 드립니다

            위에 3번째 동영상으로 NAV 기능을 배우다가 프로그램(메모장) 작성시 Localhost에 대한 이해가 잘 안되네요
            제가 다운받은 Bitnami창의 주소는 c:wBitnamiWwampstack-7.1.21 이렇게 시작해서 어떻게 NAV 기능 배우는지 어렵네요
            도와 주실 분이 있으신가요?
          • osten
            다양한 코드 작성 도구가 있어도 편향되지 않고,
            간단한 메모장으로도 작성할 수 있을정도로 간단한 코딩이라는 것을 강조하시는 것 같아요.
            이고잉님께서 강의하실때 좋아하시는 코드 작성 툴 써도 상관은 없는데,
            강의 듣는 사람들이 괜히 그 것 때문에 코드 작성 툴 설치하고 적응하는데 시간 걸릴 수도 있는 것을
            염려하신 것 아닐까요?
            대화보기
            • 이청블웨하스
              파일을 저장하실때 인코딩 형식을 utf-8로 하셔야 한글이 깨지지 않습니다
              대화보기
              • 근데 왜 메모장에 하는거죠?
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기