WEB/HTML (9) 썸네일형 리스트형 [8장_] GitHub로 웹 호스팅 이용하기 웹 호스팅(web hosting) 그리고 깃허브(GitHub) 안녕하세요. 저번시간에는 서버와 클라이언트가 무엇인지에 대해 알아봤습니다. 이번 시간에는 '깃허브'에서 지원하는 '웹 호스팅'을 이용하여 서버를 구축해 보겠습니다. 웹 호스팅이란, 기업(혹은 개인)이 웹 서버를 '대여'해주는 서비스입니다. '깃허브'라는 웹사이트에서는 웹 호스팅을 무료로 제공하는데요. 이번 장에서는 'GitHub'의 '웹 호스팅 서버'를 사용해 보겠습니다. 깃허브 사용법 깃허브는 소프트웨어 개발자들에게는 성지 같은 웹사이트로 알려져 있죠. ㅎㅎ 수많은 개발자들의 공개된 코드(오픈소스, open source)가 저장되어있고, 소스 코드를 저장뿐 아니라 공유, 버전 관리 등 다양한 서비스를 제공하고 있는데요. 이번에는 이런 기능 .. [7장_] 서버와 클라이언트 서버(server)와 클라이언트(client) 이번 시간은 실습이 없는 쉬어가는 장입니다. ㅎㅎ '서버'와 '클라이언트'에 대해서 알아볼 건데요. 서버와 클라이언트를 단어의 의미 그대로 받아들여 봅시다. 무엇이 떠오르시나요? 서버와 클라이언트의 관계 저는 식당에서 서빙을 하는 웨이터(server)의 모습과 식당에 방문한 고객(client)이 떠오르는데요. 컴퓨터의 세계에서도 서버와 클라이언트 관계의 본질은 크게 다르지 않습니다. '서버'는 특정 서비스를 제공하는 '서비스 제공자'의 역할이구요, '클라이언트'는 서비스를 요청하는 '서비스 소비자'의 역할입니다. 위의 그림처럼 서버와 클라이언트는 서로 정보를 주고받는 관계에 있습니다. 웹 서비스를 타인에게 제공하기 저번시간까지 만든 웹사이트에는 한가지 아쉬운.. [6장_] 웹페이지에서 웹사이트가 되는 법 웹페이지에서 웹사이트로 태그와 하이퍼링크(hyperlink) 저번시간에 이어, 태그에 대해 얘기해보겠습니다. 태그는 웹페이지들을 서로 '연결'해주는 역할을 하는데요. 저번 시간엔 이 기술이 '하이퍼링크'라고 언급을 했습니다. 이름만 들어도 어렵다는 생각이 드시나요? ㅎㅎ 하이퍼링크를 구현한 기술은 어려울지 모르겠습니다. 하지만, 태그는 다른 HTML 태그들처럼 사용법이 매우 간단한데요. 이번 장에서는 태그로 웹페이지를 연결해 웹사이트를 만들어보도록 하겠습니다. 태그를 사용해봅시다 웹페이지를 서로 연결하려면 2가지 이상의 웹페이지가 있어야 하는데요. 태그의 사용법을 배울 수 있는 간단한 예제를 살펴볼까요? :D 예제로 사용할 2개의 html 문서입니다. 각 HTML 파일이 어떻게 연결되어있는지 코드와 함께.. [5장_] 자주 사용되는 HTML 태그_2 자주 사용되는 HTML 태그 (2) 웹페이지를 꾸며주는 태그들 이번 장에서는 내가 만들 웹페이지를 조금 더 풍성하게 꾸며줄 태그들에 대해서 배워봅시다. 쉽고 사용 방법이 간단하니, 잘 따라오시면 좋은 결과가 있을 겁니다! :D 다음은 이번 장에서 배울 태그들의 목록들입니다. ~ , , , , 자, 그럼 시작해보도록 하죠! ~ - 웹 문서에 제목 붙이기 태그는 heading(제목, 주제)이란 단어의 앞글자 'h'를 따온 태그입니다. 의미에서 알 수 있듯이 제목을 작성할 때 사용하는데요. ~ 범위에 있는 6가지 종류의 제목을 붙일 수 있습니다. 예제 코드는 다음과 같습니다. 예제 코드 h1 태그는 제목을 정할 때 사용하는 태그입니다. h2 태그는 제목을 정할 때 사용하는 태그입니다. h3 태그는 제목을 정할.. [4장_] 자주사용되는 HTML 태그_1 자주 사용되는 HTML 태그 (1) 기본적이고 중요한 태그들 이번 시간에는 사용 빈도가 높고 필수적인 HTML 태그에 대해 알아볼 건데요. 어떤 태그가 자주 사용되는지 알아봐야겠죠? 구글을 열어 검색해보겠습니다. 저는 "frequency of html tag"라는 검색어로 검색했는데요. 그렇게 제가 얻은 검색 결과는 아래의 사이트입니다. 링크: https://css-tricks.com/average-web-page-data-analyzing-8-million-websites/ 이 웹사이트의 해당 기사는 무려 800만 개의 웹사이트를 조사했다고 하는데요. 꽤 신뢰할 수 있는 통계자료겠죠? ㅎㅎ 다음 그래프를 보시죠. 웹사이트의 첫 페이지(인덱스 페이지)에 사용된 태그의 개수를 조사한 결과라고 합니다. 26.. [3장_] HTML 태그들에 대해 알아봅시다 HTML의 Tag에 대해 배워봅시다 HTML 태그란 무엇인가? 'HTML(HyperText Markup Language)'은 '웹 페이지(Webpage)'를 구성하는데 사용되는 언어로써, 'HTML 태그(Tag)'로 이루어진 언어를 말합니다. 그렇다면 HTML Tag란 무엇일까요? 설명보다는 직접 보는 게 더 좋겠죠? 복잡하지만 어디선가 한번 본 적 있는 이미지인가요? ㅎㅎ 위 사진처럼 꺾쇠괄호''로 구성된 형식을 우린 앞으로 HTML 태그, 줄여서 '태그'라고 부를 겁니다. 자, 이제 이 태그가 어떻게 쓰이는지 알아보고 직접 코딩을 해볼 건데요. HTML 태그 맛보기 저번 시간에는 html 문서를 통해 원하는 문장을 웹브라우저에 출력해보는 예제를 배웠는데요. 무난하고 밋밋한 글씨체로만 되어있어서 심심하.. [2장_] HTML을 배우기 전에 할 일 HTML을 배우기 전에 해야 할 일 본격적으로 HTML을 배워보기 전에 앞서 우리가 설치 해줘야 할 프로그램이 있습니다. 'HTML 에디터'라는 프로그램인데요. 앞으로 HTML을 배우는 데 사용하게 될 도구라고 할 수 있겠습니다. HTML 에디터 설치하기 우리는 GitHub에서 개발하고 무료로 배포하고 있는 'Atom 에디터'를 사용해볼 건데요. HTML 편집기능을 제공하는 IDE(통합 개발 환경)은 여러 종류가 있으니, 본인이 선호하는 HTML 에디터가 있다면 기호에 맞는 에디터를 사용하셔도 무방합니다. 아톰 에디터를 설치하는 방법은 '아톰 에디터(Atom Editor) 설치하기'를 클릭해보세요. Atom 에디터 세팅하기 에디터 설치를 마치셨나요? 그렇다면 이제 작업을 할 수 있도록 세팅을 해보겠습니다.. [1장_] Web이란 무엇일까요? 웹(Web)이란? 웹이란 무엇일까요? 분명 알고 있지만 뭐라고 정의하기가 힘드신가요? 월드 와이드 웹(World Wide Web), 인터넷(internet), 웹 페이지(Web Page), 브라우저(Browser) 등의 용어가 생각나셨을 수도 있습니다. 추상적으로만 알고 있던 웹. 지금부터 웹이 무엇인지 알아봅시다. 웹의 정의 1960년 인터넷이 세상에 등장한 이후, 20년이 지난 1980년. '팀 버너스 리(Tim Berners-Lee)'라는 영국의 소프트웨어 공학자에 의해 만들어진 '웹'은, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있게 고안된 전 세계적인 정보 공간을 말합니다. 거미줄처럼 엮인 공간이라는 뜻의 월드 와이드 웹(World Wide Web)을 줄여서 웹(Web)이라고 부.. [Prologue_] Web과 HTML을 배워봅시다 Web 초보가 알려주는 HTML 튜토리얼! Hello Blog! 안녕하세요~ kwiskey입니다. 공부한 내용을 정리하고 복습을 해볼 겸 블로그를 시작하게 되었습니다.^^ 이번에 이고잉(egoing)님의 '생활코딩'을 통해 배우고 있는 웹과 HTML을 주제로 업로드할 예정인데요. 제가 생활코딩을 통해 배웠던 것 처럼 강의 형식으로 재구성해서 진행해볼 생각입니다. 웹의 'ㅇ'자도 몰랐던 초심자가 배운내용을 복습하며 적은 내용이니 틀린 내용을 발견하신다면, 알려주시면 감사하겠습니다. :D 아, 그리고 무료로 고품질의 강의를 제공해주시는 이고잉님께 닿을지 모를 깊은 감사의 인사를 전합니다.ㅎㅎ(꾸벅) 여기에 '생활코딩'과 관련된 링크를 남겨 두겠습니다. 생활코딩 웹사이트 주소: https://opentutor.. 이전 1 다음
