Web Programing/생활코딩! HTML+CSS+자바스크립트11 [HTML] 18장, 웹 호스팅: 깃허브 페이지 우리가 직접 웹 서버를 운영하는 것은 쉽지 않은 일이다. 우선 컴퓨터가 있어야 하고 냉장고처럼 항상 켜져 있어야 한다. 언제 클라이언트가 접속할지 모르기 때문이다. 그리고 웹 서버라는 프로그램을 배워서 설치해야 한다. 또한 인터넷을 통해 웹 서버에 연결될 수 있게 조치해야 한다. 인터넷이 연결된 컴퓨터 하나하나를 호스트(host)라고 한다. 웹 서버를 운영하기 위한 컴퓨터, 다시 말해 호스트를 빌려주는 회사를 웹 호스팅 업체라고 한다. 수많은 웹 호스팅 업체 주에서 무료이면서 굉장히 유명한 사이트를 이용하겠다. 바로 깃허브(https://github.com/)라는 서비스이다. 깃허브는 프로그래머에게는 성지와 같은 아주 중요한 서비스이다. 왜냐하면 전 세계의 수많은 오픈 소스 프로젝트가 이곳에서 만들어지기.. 2021. 1. 11. [HTML] 17장, 인터넷을 여는 열쇠: 서버와 클라이언트 인터넷이 동작하려면 컴퓨터가 최소 몇 대 있어야 할까? 답은 2대이다. 1대는 인터넷이 아니고, 3대는 본질적이지 않다. 2대의 컴퓨터가 서로 정보를 주고받는 순간 인류는 완전히 새로운 존재가 된다. 팀 버너스 리느 2대의 컴퓨터를 장만한다. 또 2개의 프로그램을 개발하는데, 하나는 웹 브라우저라는 프로그램이고, 또 하나는 웹 서버라는 프로그램이다. 이 2대의 컴퓨터는 인터넷으로 연결돼 있다. 웹 서버가 설치된 컴퓨터는 info.cern.ch라는 주소를 가지고 있다. 그리고 웹 서버가 설치된 컴퓨터에는 하드디스크가 있다. 그리고 그곳의 어느 디렉토리에 index.html이라는 파일이 저장돼 있다. 그리고 웹 브라우저 주소창에 ' https://info.cern.ch/index.html '이라는 주소로 들.. 2021. 1. 11. [HTML] 15장, 웹 사이트 완성 맨 위에 있는 'WEB'이라는 부분은 index.html이란 파일로 링크를 걸어줄 거다. 즉, 'WEB'을 클릭하면 index.html 파일로 갈 것이며, 그곳에서 우리 수업에서 말하는 홈페이지가 나올 것이다. 마찬가지로 'html' 링크를 클릭하면 1.html로 가서 우리가 지금까지 만든 웹 페이지가 나올 것이며, 'CSS'를 누르면 2.html, 'JavaScript'를 클릭하면, 3.html이 나오게 할 것이다. 이렇게 만들기 위해 먼저 가장 큰 제목인 'WEB'을 써보겠다. 가장 큰 제목이기 떄문에 태그로 묶는다. 'WEB'과 'HTML'의 레벨이 같은 레벨이므로 HTML의 을 로 강등시킨다. 그러면 서열에 맞는 제목을 갖게 된다. 그리고 각각의 목록을 링크로 만들 건데, 다음과 같이 작성한다. .. 2021. 1. 8. [HTML] 14장, HTML 태그의 제왕 이번에는 본문의 HTML에 링크를 달 것이다. HTML의 기술 공식 사용 설명서를 링크 걸면 좋을 것 같다. 공식 사용 설명서를 링크 걸어보자! 링크 걸고 싶은 곳을 태그로 감싸면 된다. 페이지를 새로고침해 보면 링크가 걸리지 않은 것을 확인할 수 있다. 그 이유는 정보가 부족하기 때문이다. 이 링크가 어디에 닻을 내려야 할지 정보가 부족하다. 그래서 이동할 주소(https://www.w3.org/TR/html5/)를 복사해서 태그의 속성에 적는데, 앞에서 하이퍼텍스트는 링크이다. 하이퍼텍스트의 h와 웹 브라우저에게 이 페이지를 참조하라는 의미의 reference에서 앞의 세 글자인 href라고 하는 속성을 지정한다. Hypertext Markup Language (HTML) 위와 같이 수정하고 새로고침.. 2021. 1. 8. [HTML] 13장, 문서의 구조와 슈퍼스타들 다른 사이트는 내용을 잘 표현하는 제목을 표시하고 있는 반면 우리 예제는 파일명이 제목이다. 페이지의 제목을 "WEB1 - html"과 같이 만들고 싶다면 다음과 같은 태그를 이용하면 된다. 태그 안에 작성한 것처럼 제목에 표시된 것을 확인할 수 있다. 보다시피 이라는 태그를 사용하면 웹 페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐더러 검색 엔진과 같은 기계들이 바로 이다. ' html이란 무엇인가? ' 라고 바꾸었을 때 0과 1을 어떻게 컴퓨터에 저장할 것인지에 관한 여러 가지 약속들이 있는데 이 약속 중 하나가 에디터 하단에 있는 UTF-8이다. 현재 우리가 작성한 파일은 UTF-8이란 방식으로 저장된 상태이다. 우리가 웹 브라우저에게 이 웹 페이지를 열 때 UTF-8로 열라고 지시할 때.. 2021. 1. 8. [HTML] 12장, 부모 자식과 목록 다음과 같이 와 라는 두 개의 태그가 있다고 하자. 이처럼 태그가 서로 포함 관계에 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라 한다. HTML에 있는 여러 태그는 부모 자식 관계가 막 바뀌기도 한다. 그런데 자식이 있는 곳에 항상 부모가 있고, 부모가 있는 곳에 항상 어떤 특정한 자식 태그가 있는, 아주 사이가 좋은 태그가 있다. 그 중 목차 태그에 대해 알아보자. 상단에 다음과 같이 HTML, CSS, JavaScript를 추가하였다. 페이지를 새로고침한 후 결과를 보면 우리가 원하는 결과가 아니다. 목차답게 줄바꿈이 되었으면 좋겠다. 저번에 배운 태그인 을 이용한다. 결과를 보면 꽤 그럴듯하게 보인다. HTML을 만든 사람들은 목차를 쓸 때 사용하라고 어떠한 태그를 고안해냈.. 2021. 1. 8. 이전 1 2 다음
