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. 별별이
    180423 / 감사합니다
  3. 시깅
    재밋고 공부 열심히하고있습니다^^
  4. 누러버
    정말 재미있고 쉽게 알려주셔서 감사드립니다!
  5. 스페이스몽키
    제가 산 정상에 올랐다니, 항상 어렵게만 생각했었던 Web이었는데 제가 할 수 있다는 자신감을 얻었어요 감사합니다!
  6. 솔백아
    2018.04.17 감사합니다 잘 봤습니다!
  7. 호기심많은도도새
    감사합니다.
  8. Dreaming_Joyy
    우와 완벽한 책을 만들었어요!!! 글자와 그림에도 링크를 걸고, 글자에 밑줄도 넣고, 서로간에 hyperlink도 걸어보고... 글 안에서 다시 ordered list도 만들어보고 했어요!!! 진짜 재밌어요!!
  9. 보생
    코딩을 시작하기 전에
    완성된 결과물을 먼저 봅시다.
    https://web-n.github.io......et/

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

    위에 연결된 링크에서 결과물은 어떻게 보냐요?
  10. Ji Hye Yu
    너무 재밌어요~!! 이미지랑 동영상도 올려봤는데 ㅜㅜ 뿌듯하네요~!!
  11. 정승호
    오..응용해서 이미지에 링크걸기도 해봤는데 잘되네요..너무재밌네요 감사합니다.
  12. cactusky
    이번 강의보고 서툴지만 코드 보기 전에 미리 만들어봤는데, 잘 나와서 정말 뿌듯하네요!
    감사합니다!
  13. 정말 재밌어요!!
    감사합니다
  14. 제갈량
    이미 알고 있는 내용이지만
    기초를 탄탄히 다져나가고 있습니다.
    감사합니다. ㅎㅎ
  15. TiaFenrir
    오늘 강의도 잘들었습니다.
  16. 코딩의신이되고픈자..
    오옷 해결 완료!! 감사합니다!!!! 강의 항상 잘 보고 있어요!
    대화보기
    • egoing
      atom word wrap로 검색해보셔요~
      대화보기
      • 코딩의신이되고픈자..
        흐음.. 하나만 여쭤봐도 될까요
        그.. 복사붙혀넣기 기능을 사용하면 좀 적당히 정렬되는 기능을 찾고 있어요
        저는 복붙하면 매~우 길어지더라고요
        이고잉님처럼 정렬 한계점을 조정하고 싶은데 어떻게 하면 되나요??
      • 김현
        와 제가 페이지를 만들었다니...그치만 저는 얼른 하산하러 갑니다. 직접 얼른 제대로만들어봐야죠
      • 우리에게 열린 다른 문을 보지 못한다
        감사합니다
      • 정삿갓
        감사합니다 ^^ 정상 !!
      • LuminousCoding
        요즘에는 수많은 앱들이 나와가지고 스마트폰으로도 코딩 작업이 편리해졌습니다. Google Play Store에서 'Anwriter', 'AWD', 'Quoda' 등의 코딩 앱을 추천드립니다. 위 세 앱은 키보드 바로 위에 입력 툴이 표시되어서 문자 표기가 빠르면서 쉽고, 제작과 동시에 자신이 만든 웹페이지를 확인할 수도 있습니다. 나중에 PHP를 스마트폰으로 실행하실거면 PHP 서버를 열어주는 앱들도 많습니다. 한번 설치해보시기를 추천드립니다.
        대화보기
        • 설렁탕
          처음으로 만들어 봤지만, 쉽고 잼나디
        • 잘봤습니다~!! 이번꺼는 조금 헷갈려서 계속 돌려봤네요. 감사합니다
        • 김민승
          웹사이트를 완성하였습니다 ㅠㅜ
        • chingguhl@naver.com
          ㅋㅋㅋㅋㅋ 그러게 말이에요! 이런 등산이라면 매일매일 할수있겠어용!!ㅋㅋㅋㅋ
          대화보기
          • egoing
            반영했습니다! 이렇게 촘촘히 지적해주시니 대단하십니다!
            대화보기
            • 히작
              야호!
            • 이수민
              드디어 웹페이지를 하나 만들었습니다! 너무 신기하고 재미있어요. 이런 여정을 할 수 있게 만들어주신 모든 분들께 감사합니다..
            • Jihyun Lee
              완주를 목표로
            • 이피
              벌써 하산인가요?
            • 재밌어요
            • 한재민
              웹 페이지를 이렇게 쉽게 만들수 있군요.
            • 이근환
              감사합니다!
            • 김예령
              이렇게 웹사이트가 완성된다니 너무 감동이네요!
            • 윤장원
              감사합니다!
            • 차녕
              재밌어요~!!!
            • 김재학
              휴대폰으로도 어디서든 볼 수 있는 강의... 실습만 빼먹지 읺으면 최고의 강의 방법과 내용입니다
            • 이렇게 되네요.. ㅎㅎㅎ
              기쁩니다.
            • aimerthis(이성민)
              해봤는데. 잘되네요
            • home4u
              감사합니다. :)
            • 감사합니다 ^^
            • 잘할
              와 진짜 재밌어여ㅋㅋㅋ 저는 앞서 말씀하신대로 하고싶은 내용으로 하고 있는데
              되게 뿌듯하면서도 더 욕심이 나여!!! 시간이 진짜 넘 빨리간다눈 감사해여!
            • 2real0613
              여러분 축하드려요~ 도 얼마 안남았네요
              와 진짜 10분이 쑥쑥가네요 ^^
            • 팽석
              시간 가는 줄 모르고 듣고있어요. 잘들었습니다!
            • seokhee
              정말재밌다!
            • 소프트러브
              잘 따라 갑니다.
            • Jae Il Park
              이고잉님 감사합니다~
            • 180111 감사합니다!
            • Meflow
              늦은시간에 항상 잘 보고 있습니다. 좋은강의 감사합니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기