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. 김언성
    감사합니다~ 확신이 서네요.
    대화보기
    • egoing
      웹페이지와 같은 디렉토리에 있는 파일은 파일이름만으로도 링크를 걸 수 있어요. 상대주소라는 개념이에요.
      대화보기
      • 김언성
        질문하나 올립니다!
        링크를 걸어줄때 단순히 html 파일 명만 적어도 링크가 잘 작동되는 이유가 뭔가요?

        저는 //C:/Users/admin/Desktop/WEB/INNOV/drawing" 와 같이 폴더 속 파일의 위치를 링크해줬는데
        단순히 drawing이라는 파일 이름으로만 링크해도 연결이 되는게 이상하다 생각했습니다.
        폴더속에 있는 파일이라면 단순히 파일 이름만 링크로 걸어둬도 바로 적용되는건가요?
      • 유하
        코딩 공부를 이렇게 재미있게 알려주시다니 이야기를 듣다보니 아니 내가 이런것도 알아! 하는 깨우침을 얻게 되는 강의네요.. 컴퓨터공학을 전공했지만 이고잉님 같은 교수님을 만났더라면.. 지금까지도 개발자를 하고 있을텐데 하는 아쉬움이 남네요~!
      • 별별이
        180423 / 감사합니다
      • 시깅
        재밋고 공부 열심히하고있습니다^^
      • 누러버
        정말 재미있고 쉽게 알려주셔서 감사드립니다!
      • 스페이스몽키
        제가 산 정상에 올랐다니, 항상 어렵게만 생각했었던 Web이었는데 제가 할 수 있다는 자신감을 얻었어요 감사합니다!
      • 솔백아
        2018.04.17 감사합니다 잘 봤습니다!
      • 호기심많은도도새
        감사합니다.
      • Dreaming_Joyy
        우와 완벽한 책을 만들었어요!!! 글자와 그림에도 링크를 걸고, 글자에 밑줄도 넣고, 서로간에 hyperlink도 걸어보고... 글 안에서 다시 ordered list도 만들어보고 했어요!!! 진짜 재밌어요!!
      • 보생
        코딩을 시작하기 전에
        완성된 결과물을 먼저 봅시다.
        https://web-n.github.io......et/

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

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