WEB1 - HTML & Internet

웹사이트 완성

 

 

---

 

 

지금까지 웹페이지를 만드는 방법을 배웠습니다.


또 페이지와 페이지를
링크라는 길로 연결하는 방법도
배웠습니다.

 

 

링크는
본드,
실과 같은 것으로도
비유할 수 있습니다.

페이지가 모이면 책이 되듯이
웹페이지를 링크로 모으면
일종의 책이 만들어집니다.

이렇게
링크를 통해서 서로 결합되어 있는
웹페이지들의 그룹을
웹에서는 책이라고 하지 않고
웹사이트(web site)라고 합니다.

 

 

지금부터
웹사이트를 만들어 봅시다.

 

 

코딩을 시작하기 전에
완성된 결과물을 먼저 봅시다.
https://web-n.github.io/web1_html_internet/

 

 

웹사이트를 만들 때는
순서가 중요합니다.
어떤 순서로 작업을 진행할 지 잘 따져 보세요.

 

 

우선 이 웹페이지 전체를 대표하는
큰 제목을 만들겠습니다.
(동영상 참고 : https://youtu.be/w5S0GACgL3U?t=48)

 

 

그리고 각 부분에 링크를 걸어서
다른 페이지와 연결을 시키겠습니다.
아래 그림을 링크로 연결될 웹페이지의 파일명입니다.

 

 

우선 1.html 의 내용을 수정해서 링크를 거세요.
변경된 소스 보러가기

 

 

1.html 파일을 복제해서
index.html, 2.html, 3.html을 만듭니다.
그리고 각각의 파일에 맞게 내용을 수정합니다.
전체소스코드 다운로드

 

 

이렇게 하면 완벽하게 동작하는 웹사이트가 만들어집니다.
https://web-n.github.io/web1_html_internet/
잘 되나요? 축하드립니다. ^^

 

 

갈 길이 조금 남아 있기는 하지만,
우리는 지금 산의 정산에 올라왔습니다.
산에 정상에 올라왔는데
경치도 안 보고 내려간다면 얼마나 손해인가요?
잠깐 멈춰서서
우리가 만든 것을 보면서
'우와 내가 이런 것을 했다니'
이런 즐거운 기분을 음미하면서
천천히 하산 준비를 해 주세요.

 

다시 한 번 축하합니다!

 

댓글

댓글 본문
작성자
비밀번호
  1. 잘봤습니다~!! 이번꺼는 조금 헷갈려서 계속 돌려봤네요. 감사합니다
  2. 김민승
    웹사이트를 완성하였습니다 ㅠㅜ
  3. chingguhl@naver.com
    ㅋㅋㅋㅋㅋ 그러게 말이에요! 이런 등산이라면 매일매일 할수있겠어용!!ㅋㅋㅋㅋ
    대화보기
    • egoing
      반영했습니다! 이렇게 촘촘히 지적해주시니 대단하십니다!
      대화보기
      • 히작
        야호!
      • 이수민
        드디어 웹페이지를 하나 만들었습니다! 너무 신기하고 재미있어요. 이런 여정을 할 수 있게 만들어주신 모든 분들께 감사합니다..
      • Jihyun Lee
        완주를 목표로
      • 이피
        벌써 하산인가요?
      • 재밌어요
      • 한재민
        웹 페이지를 이렇게 쉽게 만들수 있군요.
      • 이근환
        감사합니다!
      • 김예령
        이렇게 웹사이트가 완성된다니 너무 감동이네요!
      • 윤장원
        감사합니다!
      • 차녕
        재밌어요~!!!
      • 김재학
        휴대폰으로도 어디서든 볼 수 있는 강의... 실습만 빼먹지 읺으면 최고의 강의 방법과 내용입니다
      • Jake
        이렇게 되네요.. ㅎㅎㅎ
        기쁩니다.
      • aimerthis(이성민)
        해봤는데. 잘되네요
      • home4u
        감사합니다. :)
      • 감사합니다 ^^
      • 잘할
        와 진짜 재밌어여ㅋㅋㅋ 저는 앞서 말씀하신대로 하고싶은 내용으로 하고 있는데
        되게 뿌듯하면서도 더 욕심이 나여!!! 시간이 진짜 넘 빨리간다눈 감사해여!
      • 2real0613
        여러분 축하드려요~ 도 얼마 안남았네요
        와 진짜 10분이 쑥쑥가네요 ^^
      • 팽석
        시간 가는 줄 모르고 듣고있어요. 잘들었습니다!
      • seokhee
        정말재밌다!
      • 소프트러브
        잘 따라 갑니다.
      • Jae Il Park
        이고잉님 감사합니다~
      • JN87
        180111 감사합니다!
      • Meflow
        늦은시간에 항상 잘 보고 있습니다. 좋은강의 감사합니다.
      • 아기백호
        고맙습니다. ^^
      • 코딩학습생
        잘 봤습니다~
      • 김민영
        잘보았습니다.
      • Deen
        웹페이지를 링크로 연결해서 웹사이트를 만들다니 신기하고 재미있네요 ^^
      • GoldPenguin
        감사합니다.
      • PassionOfStudy
        2018-01-09 - 첫 번째 수강완료!


        벌써 산 정상에 올랐다니 ㅎ
        항상 유익하고 재미난 강의 감사합니다!
      • Kwangsoo Koh
        잘 봤습니다 ^^
      • goosen
        많이배우고갑니다 감사합니다^^
      • 상원중 건축자
        잘 들었습니당^^
      • 유연우
        완전 재미써요
      • Jung Hoon Yoo
        정말 유익한 강의예요
      • 코딩코딩
        너무 좋은 강의 감사합니다~
      • 강동곤
        복붙을 하긴했지만...완료!
      • Seonghee Park
        드디어 정상? !!!!
      • 비오비
        좋은 강의 잘 들었습니다.
      • 김태현
        감사합니다
      • 이수현
        감사합니다.~^^
      • egoing
        고맙습니다! 큰 도움이 되고있습니다~
        대화보기
        • egoing
          shift + < : youtube 느리게 재생
          shift + > : youtube 빠르게 재생
          단축키입니다.

          또는 텍스트로 된 내용을 보시고 공부하셔도 좋을 것 같습니다 :)
          대화보기
          • 미도리
            따라만 했는데 웹페이지가 만들어졌네요~
          • koreano1cfp@paran.com
            동영상의 첫번째 그림에 나오는 "WAB"을 "WEB"으로 수정해야 함.

            "지금부터 웹사이트를 만들어봅시다."
            위에서는 "만들어봅시다."를 "만들어 봅시다."로 수정해야 함.

            "어떤 순서로 작업을 진행할지 잘 따져보세요."
            위에서는 "진행할지"를 "진행할 지"로, "따져보세요."는 "따져 보세요."로 수정해야 함.

            "이렇게하면 완벽하게 동작하는 웹사이트가 만들어집니다."
            위에서는 "이렇게하면"을 "이렇게 하면"으로 수정해야 함.

            "갈 길이 조금 남아있기는 하지만,"
            위에서는 "남아있기는"을 "남아 있기는"으로 수정해야 함.

            "경치도 안보고 내려간다면 얼마나 손해인가요?"
            위에서는 "안보고"를 "안 보고"로 수정해야 함.

            "와우 내가 이런 것을 했다니"
            위에서는 "와우"를 "우와"로 수정하는 것이 좋습니다.
            "와우"는 영어의 감탄사인 "wow"이고, "우와"는 우리말 감탄사입니다.

            "천천히 하산 준비를 해주세요."
            위에서는 "해주세요."를 "해 주세요."로 수정해야 함.

            "다시 한번 축하합니다!"
            위에서는 "한번"을 "한 번"으로 수정해야 함.
          • 이영현
            너무 빨라서 따라가기가 힘들어요 동영상을 계속 멈출 수도 없고.ㅠㅠ
          • 오베드로
            잘 안보이지만 일단 따라갑니다
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기