생활코딩 WEB1 - 5. HTML코딩과 실습환경 준비 > HTML

생활코딩 | WEB1 - 5. HTML코딩과 실습환경 준비

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

생활코딩님의 HTML강의 청각장애인을 위한 자막

우리가 웹페이지를 만들기 위해서는

html 이라는 언어를 사용해야 된다는 것은 앞서 설명을 들었습니다
그럼 이제부터 우리 html 이라 언어를 이용해서 진짜로 코딩을 해
봅시다 자 이걸 하기 위해서 필요한 준비물은 크게 두 가지입니다 하나는
웹브라우저가 있어야 됩니다 웹페이지 니까 당연히 그렇겠죠
그리고 또 하나는 어 html 이라고 하는 컴퓨터도 이해할 수 있고
사람도 이해할 수 있는 컴퓨터 언어의 문법을 아케 우리가 이제 코드를
작성해야 되는데 그 코드를 작성하는 프로그램이 필요합니다
그래서 이러한 프로그램을 뭐라고 하냐면 편집하는 프로그램 이란 뜻에서
에디터 라고 부르는데요 여러분의 컴퓨터에 는 이미 훌륭한 에디터들이 다
대장 돼 있습니다
일테면 윈도우에서는 어 메 모 장 그리고 매 개선은 텍스트 에디트 라는
텍스트 편집기 라는 프로그램이 있구요
그리고 리눅스의 는 머치 에디트 라든지 여러가지 에디터들이 이미 내장되어
있습니다
근데 이 에디터들이 다 사용 방법이 다 다르기 때문에 제가 설명하기가
조금 벅차요
그리고 어 각각의 에디터들이 갖고 있는 기능이
원래 코드를 작성하는 용도는 아니기 때문에
어우 우리는 코드를 작성하는 데 최적화되어 있는 전문적인 도구를 사용할
겁니다
예 제가 선택한 도구는 아톰 인데요
어 미래의 여러분들이 이 강의를 보는 시점에서 는
어제가 사용할 아톰 보다 더 좋은 에디터가 나와 있을 가능성도 있고
그리고 또 여러분톰 말고 다른 에디터를 쓰고 싶을 수도 있단 말이죠
예 그렇기 때문에 그렇기 때문에 어제가
아톰 이라는걸 쓰는 것은 그냥 예제 1 뿐이니까
여러분이 참고 삼아서 실습을 따라오시면 되겠구요
더 중요한 것은 여러분이 필요한 편집기를 찾아낼 수 있는 능력입니다
자 그럼 제가 어 추천 검색 을 알려드릴께요
그럼 나중에 에디터를 원하실 때 이런 식으로 찾아내 시면 됩니다
html 에디터 또는 현 시점에서 최신 에디터가 무엇인가가 궁금하다면
현 시점이 2017년 이라고 했을 때 4
트 html 에디터 2017 이렇게 검색해 보시면 아마 최신 에디터를
찾을 수 있을 겁니다
어쨌든 우리 수업에서는 아톰 이란 에디터 를 채택해 쓰니까 저는 그
에디터를 사용하는 방법을 설명해 드릴 거야 자 이렇게 아톰 점
io 라고 하는 주소로 들어오시면 이렇게 생긴 페이지가 나오고
거기에서 다운로드 포 윈도 또는 다운로드 4men 다운로드 포
리눅스 라고 되어 있는 버튼을 클릭하시면
어 되겠습니다 자 이걸 어떻게 설치하는 지는 여러분이 잘 아실 수 있을
거라고 믿고 요 설치하시고 그 다음에 이 프로그램을 우리 다같이 한번
실행해 봅시다
그 다음부터는 사용법은 모두가 똑같아 지니까 설치를 잘 의 사이 하시기
바랍니다
자 아톰을 설치 하셨으면 이렇게 아톰이 실행이 될겁니다
여기에서 지금 열려 있는 것들은 다 끄시면 되요
저랑은 좀 다를 어질 수 있습니다 미래에는
자 이렇게 끄시고 요 이제부터 저는 오른쪽에 있는 에디터에서 html
어 파일을 만들 거구요
그리고 그 결과를 왼쪽에 있는 웹브라우저로 주력할 겁니다 자 해봅시다
자 우성 여러분들 바탕화면에 다가 웹 이라는 디렉토리를 각자 만드세요
맥을 쓰시는 분 도 마찬가지 리눅스 도 마찬가지
자 해봅시다 윈도우를 기준으로 설명 드리지만 요정도 하실 수 있을 거라고
좀 기대 할게요 자 바탕화면에 다가 저는 좀 영문판을 쓰고 있지만 게
바탕화면입니다
여기서 오른쪽 클릭을 해보면 새로 만들기 라는 항목에 홀더 라는 곳이
있을겁니다
요걸 누르면 바탕화면에 디렉토리를 만들 수 있는데요 저는 웹 이란이 랙
이름의 디렉토리를 만들고 저 디렉토리를 우리의 프로젝트에 폴더로 만들
거예요
다시 말해서 우리가 지금 하고 있는 웹사이트를 만드는 프로젝트에서
사용되는 파일들은
저 웹이라는 디렉토리 안에 앞으로 저장될 것이다 라는 그런 뜻입니다
자 요건 이제 끄시고 요 자 그 다음에 이 에디터에서
파일을 선택하면 거기에 보면 뭐가 있냐면 오픈 폴더 뭐 한글판 이면 폴더
열기 정도가 있겠네요
자 이걸 한번 선택해 보십시오
자 그러면 어 파일을 선택하는
대화상자가 뜨는데 예 그 중에서 우리는 아까 바탕화면에
왜 b 라는 디렉토리를 만들어 썼죠
그럼 저 웹이라는 디렉토리 안으로 들어간 다음에
셀렉트 폴더 버튼을 누르면 됩니다
지금 우리는
파일을 선택하는 것니라 폴더를 선택하는 거에요 자 셀렉트 폴더
그러면 이렇게 왼쪽 오른쪽으로 화면이 조개 질 겁니다
그럼 여기 있는 이 왼쪽은 뭐냐 웹 이라고 하는 바탕화면에 생성한
디렉토리를 관리하는 화면이에요
그리고 오른쪽은 먹고 설명드릴께요
자 그러면 우리 파일 하나 만들어 봅시다
파일의 이름은 1점
html 입니다 자 여기 폴더에서 오른쪽 클릭하시면
뉴 파일 이라는 항목이 있을 거에요 새로운 파일이 란 뜻이죠
저걸 누르면 이렇게 생기 화면 애들 건데
거기에다가 1점 html 이라고 치면 됩니다
여러분이 마이크로소프트 워드 를 써 보셨으면
워드 문서는 파일의 확장자가 뭔가요
d 오십니다 예
한국에서는 아래 한글이라는 프로그램을 쓰는데 그건 확장자가 hwp 줘
웹페이지는 확장자가 뭐냐
html 이라고 일단은 생각하시면 되겠습니다
그래서 우리는 일 이라는 이름의
웹페이지를 만들고 있는 겁니다
이 뒤에는 확장자는 여러분들 맘대로 바꾸면 안 되고 앞에 있는 이름은
여러분들 맘대로 아무거나 하시면 됩니다
전단지 1 점 html 이라는 이름을 쓰고 있는 겁니다
제가 센터 를 치면 어떤 일이 생기냐 하면 이렇게 왜 b 라고 하는
디렉토리 안에
1점 html 이라는 파일이 생겼습니다
정말 생겼는지 볼까요
자 여기
데스크 탑으로 가서 웹을 보면 보시는 것처럼 이렇게 파일이 생성된 것을
볼 수가 있습니다
자 그럼 이렇게 만든 웹 페이지를 우리 웹브라우저로 열어 볼 건데요
아마 여러분이 보통 웹 페이지를 연다 고 하면 아마도 여기 있는 주소창에
다가
주소를 입력해 쓸 겁니다 그 이유는 뭐냐면
내 컴퓨터가 아닌
저 주소에 해당되는 다른 컴퓨터에 저장되어 있는 웹페이지를 여러분이 읽고
싶을 때는
주소를 입력하는 겁니다 우리가 지금 하려고 하는 것은
웹브라우저 와 같은 컴퓨터에 있는 파일인 1점
html 을 읽으려고 하는 거에요 자 그런 경우에는 파일 열기 라는
기능을 쓰면 됩니다
자 거의 대부분의 브라우저에서
윈도우를 쓰시면 컨트롤 알파벳 o 키를 누르시면 됩니다
또 맥을 쓰신다면 커맨드 알파벳 o 키를 누르시면 되요
그렇게 해서 단축키를 눌러 보시면 이렇게 파일을 선택하는 창마도
뜰겁니다
네 여러분이 브라우저 중에 말코 소프트 엣지 브라우저를 쓰고 있다면 이
기능이 작동하지 않을 거거든요
그런 경우에는 크롬이나 또는 뭐 있나요
인터넷 익스플로러에서 하면 잘 될 겁니다
안되면 다른 브라우저로 바꿔보세요
자 그리고 우리 바탕화면으로 가서 거기에 웹이라는 디렉토리 안에 있는
우리가 생성한 1점 html 파일을 선택하고 오픈을 누르면 어떻게 되냐면
하얀색 화면이 뜰겁니다
여기에다가
헬로
이라고 하고
저장해 보세요 컨트롤 알파벳 s
맥은 커맨드 알파벳 s
어 단축키가 기억이 안나면 파일에서
저장하기 세이브 자 그렇게 되면 우리가
1점 html 파일을 저장한 거에요 그러면 웹브라우저로 와서 새로고침
버튼을 누르면 뜨게 되요
헬로 웹 이라고 하는 텍스트가 문자가 떴으면
여러분은 웹페이지를 만드는 걸 했고 그 만들어진 웹 페이지를 웹브라우저로
실행한 것 또는 여러 본 것에 성공한 겁니다 여러분 축하드려요
자 여기까지 하고 우리 이번시간은 마무리하겠습니다.