생활코딩 | WEB1 - 15. 웹사이트 완성
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
생활코딩님의 HTML강의 청각장애인을 위한 자막
지금까지 우리는 웹페이지를 만드는 방법을 배웠습니다
또 웹 페이지와 웹페이지를 링크 않은 길로 연결하는 방법도 배웠어요제가 링크를 길로 비유 했습니다만 링크는 뻔 듯도 는 실 이라고도
저는 비유할 수 있을 것 같아요 서로 연관된 웹 페이지들을 결합해서
하나의 책으로 엮어내는
말하자면 본드와 실과 같은 역할을 하는 것이 바로 링크 라고도 볼 수
있거든요
물론 웹에서는 책이 라는 표현 대신에 웹사이트 라는 배려 냈습니다
자 그럼 우리 지금부터 우리가 만든 웹 페이지들을
어여 꺼서 하나의 완성된 웹사이트를 만들어 봅시다 자 그럼 지금부터
하려고 하는 일이 무엇인지를 설명을 먼저 드릴께요 잘 한번 들어보세요
자 이렇게 우리가 만들려고 1월 페이지는 요런 모습입니다
그런데 그 중에서 우리 아직 하지 않은 부 번 저부분을 만들 거구요
그리고 여기에서 우리가 이걸 말하자면 책처럼 역 그려면 각각의 링크들을
생성 해야 되는데 이런 식으로 처리를 할 겁니다 자 저 젤 위에 있는 웹
이라고 되어 있는 부분은
ex 점 html 이란 파일을 링크로 갈 거에요 저걸 클릭하면 ex 점
html 파일로 갈 것이고 거기에는 우리 수업의 말하자면 홈페이지
웰컴 페이지가 나올 겁니다 자 그리고 html 링크를 클릭하면 1점
html5 가서 우리가 지금까지 만들어왔던 웹 페이지가 나올 것이구요
css 를 클릭하면 2점 html 자바스크립트 를 클릭하면 3 점
html 이 나오도록 할 거에요
자 이걸 하기 위해서 우리 잘 먼저 뭘 할거냐 면 이 수업의 가장 큰
제목을 여기다가 써 봅시다 자 가장 큰 제목 이니까
이 웹을 h1 으로 부 거야
그리고 리로드를 해보면 보시는 것처럼 이렇게 되죠 그럼 웹과 html 이
같은 레벨이 니까 밑에 있는 h 원을
h2 록 이 강등시키는 거죠
작은 어떻게 되요 이렇게 서로 서열에 맞는 제목을 갖게 됩니다
자 그리고 우리는 여기 있는 욕 각각의 요소들을
이제 링크로 만들 건데요 저는 제가 가지고 있는 에디터의 기능을 이용해서
이렇게 이렇게 하고
a hr 일부 땡땡 슬래시 2
그리고 요렇게
요렇게 여기 이렇게 하고
링크를 닫았습니다
자 그 다음에 여기에다가 는 웹을 클릭해 스 tex 점 html 이
나오게 하구요
html 클릭해 쓴 1점 html 현재 페이지 입니다
이점 html 3 점
html 이 나오도록 할 거에요
됐죠 그럼 이렇게 링크가 만들어 지는데요
그럼 우리 잠깐 수업을 번 쳐놓고 여러분이 한번 직접 한번 해보셨으면
좋겠는데
예 잘 안 되시겠지만 잠깐 멈춰 놓고 한번 여러분이 어떻게 하면 될까 를
좀 구상을 한번 해 보세요
그리고 자 안될겁니다 점하는 입장에서는 제가 알려드릴 테니까 그래도 한번
지도는 해 보시라는 얘기입니다
자 그럼 한번 해보죠 음
자 이렇게 되어있는데요 어 여기 있는 1점 html 을 바라 자면 종의
뭐 템플릿으로 해가지고
요거 를 복사합니다 오른쪽 클릭해 보시면 듀플리 케이트 하고 있을 거에요
복제 라는 뜻입니다
여러분이 저런 다른 에디터를 쓰고 계시다면 그냥 1점 html 파일을
복사해서 새로운 파일 만들는 얘기에요
그리고 이름은 이점 html
그리고 다시 복사해서
3 점 html
그리고 또 복사해서 인덱스 점
html 을 만드는 거에요
자 그러면 내용은 똑같지만 어쨌든간에 여기 있는 각각의 링크가 가리킬
파일들을 우리는 만든 거죠
그쵸 자 그러면 이제 내용을 수 조금씩 수정하면 되겠죠
자 이 점 html css 를 클릭하면 어디로 가요
이점 html5 갈건데 2점 html css 의 내용이니까
올해 cs 라고 요렇게 해서 가 주고요
그리고 여기있는 본문의 내용은 5월 일단 지운 다음에
저는 위키피디아에 가서 css 에 대한 페이지를 가져오겠습니다 여러분
여기 똑같이 51로 전혀 없습니다
그냥 본인이 쓰고 싶은 내용을 아무거나 적어주시면 되요
자 복사 해서
css 내용을 여기다 이렇게 붙여넣기 했어요
자 이렇게 넣구요
그리고 확인해볼까요
리로드 했을 때 보시는 것처럼 css 에 대한 내용이 포함되어 있는걸
볼수가 있구요
여기 있는 웹 다시 우 원 대시 html css 로 바꾸면 더 좋겠죠
그 다음에 3 점 html 은 클릭해 스트 자바스크립트가 되는 페이지
입니다
그럼 저는 위키피디아 같은 데 가서 자바스크립트에 대한 설명을 가져오면
되겠죠
자바스크립트는 무엇이다 라는 설명이 나와있네요
그래서
잡 여기에다가 요렇게
자바스크립트에 대한 설명을 추가 했고요 그리고 현재 페이지는
자바스크립트의 된 내용이니까 이 부분을 자바스크립트로 바꿨습니다
자 리로드 한번 해볼까요
짜잔 자바스크립트 아 여기도 바꿔야 줘
자바스크립트로 이렇게 마 꾸고
그리고 왠지 css 도안 바꿨던 것 같아요
바뀌었군요 css 는 그리고 html5 갔을 때 여기
title 태그 갑천 대문 자면 더 완벽하게 네요
자 그 다음에 홈페이지 라고 할 수 있는
ex 점 html 여기는 저는 웰컴 이라고 이렇게 쓰고요
그리고 여기에는 웹 으로 이렇게 하고
그리고 웹이 무엇인지를 위키피디아에서 역시 검색해서
어 웹
월드 와이드 웹을 찾아서
여기 적혀있는 내용을 카피해서
여기 본문 에다가 붙여넣기를 하겠습니다
이렇게요
그리고 리로드 하면 어떻게 되요
이렇게 되는 것이죠
자 그럼 이제 우리 감상할 때 줘 우리가 만든 앱 페이지 한번 감상해
봅시다 자 보시는 것처럼 이걸 클릭하면 홈이 나오고 이것을 클릭하면
html 페이지가 나오고
css 자바스크립트 가 이렇게 나오는 완벽한 웹사이트를 우리가
완성했습니다
여러분 축하드려요 예 우리 앞으로 뭐 갈 길이 조금 더 남아 있긴 하지만
지금을 여러분은 산의 정상에 올랐습니다 이제부터는
하산한 시간이에요 산의 정상에 올라 왔는데
내려 갈 길이 멀다고 해서 젊 경치도 안보고 내려가는 거 얼마나 서
냅니까
예 잠깐 멈춰서서 우리가 만든 걸 보면서 와 내가 이런걸 했다니 라는
그런 즐거운 마음을 좀 가져 보시고
예 하산 준비를 산천이 생각하시면 좋겠습니다.
댓글 0개
등록된 댓글이 없습니다.