Web Programing22 [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. [HTML] 11장, 최후의 문법 속성과 <img> 태그 지금까지 HTML의 가장 중요한 문법인 태그를 배웠다. 이번 시간에는 속성이라 하는 태그의 심화된 문법을 배울 것이다. 이제까지 글씨만 있으니 답답하다는 느낌이 들며 시각적 요소로 사진을 넣고 싶어진다. 사진을 넣는 방법을 살펴보자. [ : 이미지를 포함시킬 때 사용하는 태그 ] 위에 코드와 같이 태그를 삽입하고 새로고침을 해보면 사진은 보이지 않는다. 사진이 보이지 않는 이유는 그냥 img라고 한다면 어떤 이미지를 보여줄 것이라는 이야기가 없기 때문이다. 태그의 이름만으로는 정보가 부적할 때가 있다는 것이다. 그래서 이 태그라는 문법을 만든 컴퓨터 공학자들은 태그의 이름만으로는 정보가 부족하다는 것을 인식하고 고민 끝네 새로운 문법을 출현시킨다. 태그에 src 속성을 추가하였다. 어떤 이미지인지 알려주.. 2021. 1. 7. 이전 1 2 3 4 다음
