웹 애플리케이션 만들기

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. mellow
    161209 완료
  2. 괭이심장
    연재찡님 질문하신지 오래되어서 확인이 되실지 모르겠지만 답을 달아 드립니다.

    우선 글을 읽다보니 '닫혀있다'라는 것에 대해서 조금 착각이 있으신것 같습니다.
    아마도 지금은 <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 학습완료!
      • 연재찡
        강의 너무 잘 들었씁니당! 너무 쉬운 질문이지만, 그래도 확실하게 확인하고 싶어서요!
        <a href=“http://localhost/”>JavaScript</a> 이거나
        <a href="http://localhost/index.html">JavaScript</a>랑 결국은 같은거인 셈인거네요?!

        저도 이전 이론에서 meta 뒤에 / 가 없길래 밑에 댓글로 확인해보니 img, br, meta태그는 닫지 않아도 된다고
        되어있더라구요.

        근데 여기서
        <h1><a href="http://localhost/">JavaScript</a></h1> 같은 경우는 닫혀있고,
        <li><a href="http://localhost/page_html.html">JavaScript란?</a></li> 는 또 닫혀있지 않았는데, 차이가 있는건가요? 아니면 크게 img, br, meta 처럼 닫지 않아도 상관없는 애들인가요?

        감사드려용♥
      • 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 대제목을 누르면 처음으로 돌아가는게 아니라
              비트나미사이트로 가는건뭐죠..ㅠㅠ흑흑
            • 2016.10.17 재밌군요!!
            • 김용운
              2016.10.14 완료
            • 안재우
              2016.10.12 완.료.
            • dawooning00@gmail.com
              161012 수강완료
            • bluegun
              20161011 수강완료. 감사합니다
            • veritas3264
              2016.10.12. 감사합니다. 많이 배웠습니다.
            • San Koh
              2016-10-11 완료했습니다.
            • 날고기는람쥐
              인터넷 부분 강좌를 듣고 생각한건데 제가 무선공유기를 쓰고있어서 그런건가요?
              대화보기
              • 이신규
                재미가 쏠쏠하네료!
              • 날고기는람쥐
                <a href="http://localhost8080/"></a>로 하니깐 잘 되긴하는데 왜 제 로컬에선 그냥 안되는지 이유가 궁금하네요.
                아시는분 또는 같은경험을 하신분은 어떻게 해결하셨나요?
                대화보기
                • 날고기는람쥐
                  <a href="http://localhost/">자바스크립트란</a>
                  로 링크를 주었을때 ERR_CONNECTION_REFUSED 가 뜨고
                  localhost에서 연결을 거부했다는 말이 뜹니다. 어떻게 해결해야 하나요

                  웹브라우저는 크롬을 썼습니다.
                • 날고기는람쥐
                  class 나 id 이용해 태그들 마다의 이름을 지어줄 수 있습니다.
                  대화보기
                  • egoing
                    부주의했나보네요 ^^.안 닫는 걸 닫는다고 큰 문제는 없습니다. 오히려 꼭 닫아야하는데 안 닫으면 큰 일이 납니다.
                    대화보기
                    • 고산
                      이고잉님 그럼 앞강의 html예제에서는 왜 닫으신 건가요??
                    • 류엶
                      20161007완료
                    • egoing
                      내용이 필요없는 몇몇 태그는 닫지 않아요.
                      img, br, meta가 그래요~
                      대화보기
                      • San Koh
                        <head>태그 안에 utf-8 적는 부분에 <meta charset="utf-8" />라고 앞의 예전 강의(예제 만들때)에서는 했었는데
                        여기서는 <meta charset="utf-8"> 이라고 뒤에 슬래시가 없네요. 무슨 차이인 건가요?
                      • Ryu Keunwon
                        10월 5일 수강완료했습니다!
                      • SUNYORK
                        크롬 웹 스토어 가시면 네이버사전 있어요~
                        대화보기
                        • Kang Seonghyeon
                          html이라는 새폴더 만드신건가요?
                          나중에 강의 보니깐 html이란 폴더를 만드신거 같던데...

                          그리고
                          C:\Bitnami\wampstack-5.6.26-2\apache2\htdocs 에 있는

                          html의 index를 메모장으로 열어서 바꾸는 건가요?
                        • k-319@naver.com
                          기존의 bitnami홈페이지로 지정된 파일을 index.html로 되어 있으실텐데 다른 이름으로 저장해두시고요.


                          기존의 파일이 어디에 있나요?
                          대화보기
                          • Kang Seonghyeon
                            http://localhost......tml 라 치면
                            bitnami 사이트로 가져요..

                            http://localhost......tml.html로 치면 정상적으로 가지고...

                            뭐가 문제죠?
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기