루체

이 수업은 두개의 산으로 이루어져 있습니다 하나는 웹페이지를 만드는 것이고 그 과정에서 코딩이 무엇인지 파악하는 것이 목표였습니다. 또하나는 내가 만든 웹페이지를 인터넷을 통해서 누구나 가져갈 수 있게 하는 것입니다. 그 과정에서 인터넷이 무엇인가를 이해할 수 있습니다. 이 글은 웹의 역사에 관한 수업을 정리한 글입니다. 웹이 등장한지는 벌써 29년이 지났습니다. 웹을 처음 공부하는 사람은 전체가 보이지 않습니다. 마치 지도 없이 여행하고 있는 기분이 들겁니다. 어떻게 하면 이 막막함을 낮출 수 있을까를 고민을 하셨다고 합니다. 하나의 가설을 세웠는데 우리가 웹의 역사를 거슬러 올라가서 웹이 세상에 처음 등장했을 때에 도착한다면 거기에 웹의 본질이 있을 것 같았다고 한다. 웹이 웹이기 위해서 필요한 있어..

지금까지 웹페이지를 만드는 것을 배웠습니다. 웹페이지와 웹페이지를 링크라는 길로 연결하는 법도 배웠습니다. 수업 처음에 만들고자 했던 페이지의 형식을 이런식으로 만들어 볼 것입니다. 이걸 하기 위해서 제일 먼저 할 것은 이 수업의 가장 큰 제목을 먼저 써 봅시다. 그러면 페이지에서는 이렇게 보일 것입니다. WEB과 HTML이 같은 서열이면 조금 그러니까 HTML의 서열을 내려줍시다. HTML이 WEB보다 글씨 크기가 작아진 걸 확인할 수 있습니다. 그리고 우리는 각각의 요소들을 링크로 만들 것입니다. 에디터의 기능(ctrl + 클릭)으로 한번에 작성을 해줍시다. 그 다음에 링크를 걸어줍시다. 링크를 걸어주고 나서 파일들을 각각 만들어 주는데 이때는 영상을 잠시 멈춰놓고 자신이 하고싶은대로 만들어 봅시다...

우리는 지금까지 문서를 만드는 법을 충분히 자세히 살펴봤다. 태그를 결합하는 법과 빈도수가 절대적으로 높은 태그를 봤다. 이 수업에는 두 개의 혁명적 순간이 있다. 하나는 태그라는 문법을 배운 순간이고 또 하나는 지금부터 설명드릴 태그를 알게 된 순간입니다. 태그가 웹의 왕국이라면 지금부터 설명드릴 태그는 이 왕국의 제왕입니다. 이 태그는 무엇일까요?? 이 태그가 없다면 검색엔진은 존재하지 않습니다. 이 태그는 도시의 길과 인체의 혈관과 같다. 기타 여러 말씀을 하셨다. 이 태그는 바로 anchor의 첫글자를 딴 태그입니다. 무슨 역할을 하는 태그일까요?? 바로 링크 입니다. 이 링크를 현재 만드는 중인 웹페이지에 적용을 해보겠습니다. 이 글에다가 Html의 공식 사용설명서를 링크를 걸겠습니다. 사용설명..

여기에 HTML에서 자주 사용되는 태그들의 순위가 있다. 이번 글에는 자주 쓰이는 TOP5의 태그들에 대해 알아볼 것이다. 이라는 태그는 웹페이지에서 보이는 제목을 변경할 수 있게 해준다. 검색엔진에서 이 title 태그를 책 표지와 같은 정보로 사용을 한다. 그래서 웹페이지를 만들 때 이 title 태그를 사용하지 않는 것은 굉장히 손해이다. Atom 프로그램에서 한글을 작성하면 페이지에서는 한글 그대로 보이지 않는다 이유는 Atom은 UTF-8이라는 것을 사용하기 때문이다. 따라서 우리가 작성한 한글이 웹브라우저에서 보이게 하려면 UTF-8로 열어야만 한다. 그래서 우리가 웹브라우저에게 이 웹페이지를 열 때 UTF-8로 열렴 이라고 할 수가 있다. 아래 사진 처럼 하면 된다. (최신 버전에는 그냥 한..

이렇게 태그가 서로 포함관계로 연관되어 있을 때 포함하고 있는 태그를 부모 태그 포함된 태그를 자식태그 라고 부른다. 어떤 태그들은 부모 태그에 항상 특정한 자식 태그가 있는 태그들이 몇개가 있습니다. 이번 글에서는 그런 태그들을 알아볼 것입니다. 그리고 목차를 만드는 법도 알아볼 것입니다. 목차를 만들기 위해 우선 Atom에 이런식으로 코드를 작성해준다. html에서는 목차를 만들기 위해 사용하라고 있는 태그가 있다. 그것을 사용해줘야 그 태그가 의미에 맞게 사용이 되는 것이다. 이라고 되어이쓴 부분을 다 지워주고 의 열린 태그와 닫힌 태그를 써주자. 그리고 1. 2. 3. 앞에 태그를 다 작성을 해줘야 하는데 이때는 ctrl을 눌러서 줄을 클릭하면 커서가 여러 곳에 생기게 된다. 이 상태에서 작성을 ..

이렇게 태그의 이름만 적은 경우 정보가 부족할 수도 있다. ""이 사이에 이미지의 주소를 적게 되면 웹브라우저는 저 주소에서 태그의 위치에다가 이미지를 그려주게 된다. 이미지의 주소가 그냥 웹사이트에서 줏어온 주소가 아닌 자신의 컴퓨터에 저장되어 있는 어떤 파일의 파일명을 뜻하는 것 같다. width="100%"는 내가 올리고 싶은 이미지 크기가 자동으로 창에 맞게 변하는 것을 뜻한다고 했다. src="code.jpg" width="100%" 이렇게 작성된 코드를 속성이라고 부른다. 이 속성은 위치는 상관이 없다. 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해서 더 많은 의미를 부가할 수 있게 된 것이다.

이번 글에는 인기있는 태그 두종류를 살펴볼 것입니다. 웹페이지에서 줄바꿈을 하는 태그를 검색을 해보자 HTML new line tag 이 이라는 TAG는 단지 줄바꿈이라는 시각적 의미만을 가지고 있기 때문에 무언가를 감쌀 필요가 없어서 닫는 TAG가 없습니다. 이 TAG 이외에 다른 줄바꿈 TAG도 있습니다. HTML paragraph tag 라는 키워드로 검색을 해봅시다. 그러면 아마도 이 TAG가 나올 것입니다. 결과는 같지만 TAG는 닫는 TAG가 있습니다. 그리고 이 두가지 방법 중 더 괜찮은 방법은 TAG 입니다. 왜냐하면 이 태그는 이 웹페이지를 정보로써 더 가치있게 만들기 때문입니다. 단락이라는 걸 명확하게 보여주기 때문인 것 같습니다... 단락을 바꿀때 여백이 너무 좁으면 태그는 여러번 쓰..

중요한 것은 어렵고 쉬운 것은 사소하다라고 하셨다. 이렇게 생각하게 된 이유는 쉬운 것은 시험에 나오지 않기 때문이 아니였을까.. 시험의 목적은 누가 어떻게 열심히 공부를 했느냐를 구분하는 것이라 자연스럽게 틀릴만한 것이 문제로 나오게 된다. 이런 상태에 오래 노출이 되면 위에 처럼 생각을 하게 되는 것 같다.. 생활코딩을 하시면서 꼭 이런 것만은 아니라는 것을 알게 되셨다고 한다. 처음 배우는 것들은 가장 자주 사용되는 부품이면서 이 부품들을 결합해서 새로운 완제품을 만들어내는 가장 자주 사용하게 되는 결합방법이다. 우리는 html의 아주 가장 기본적인 문법인 TAG를 배웠다. 우리의 인생은 이것을 배우기 전과 후로 나눌 수 있다. 웹페이지에 오른쪽 클릭을 해서 페이지 소스 보기를 누르면 이상한 것들이..

Create Web을 웹페이지에서 강조시키고 싶다면 이렇게 따라하면 된다. 이렇게 작성을 하고 저장을 하면 아래 사진처럼 보이게 된다. 이런 을 TAG라고 부른다. 근데 여기서 강조를 한번 더 하고 싶다면 이렇게 하면 된다. 진하게 강조는 해봤으니 다른 강조를 해보자. 바로 밑줄을 치는 것이다. 이런식으로 작성을 하면 웹페이지에서 밑줄이 생기게 된다. Create Web 앞에 있는 TAG를 열리는 TAG 뒤에 있는 태그를 닫히는 TAG라고 부른다. 일상에서 TAG라는 단어를 어디서 많이 쓰냐면 옷에 달린 TAG에서 많이 쓴다 TAG란 무엇이냐면 이 옷을 설명하는데 쓰인다.

우리가 웹페이지를 만들기 위해서는 HTML이라는 언어를 이용해야 한다. 이를 위해 준비해야 할 것이 2가지가 있다. 1. 웹브라우저 2. HTML(컴퓨터 언어) 이 HTML을 작성할 수 있는 프로그램이 필요한데 이것을 에디터라고 부른다. 윈도우에서는 메모장, 맥에서는 텍스트 에디트 라는 프로그램이 있다. 각각의 에디터가 코드를 작성하는 용도의 프로그램이 아니기 때문에 코드를 작성하는데 최적화 되어있는 전문적인 도구를 사용할 것이다. 바로 ATOM이라는 프로그램이다. 이 프로그램은 현 동영상의 시점인 2017에서는 쓸만하지만 추후에는 더 좋은 프로그램이 나올 수 있다. 따라서 그런 프로그램을 찾기 위한 키워드로는 "Best HTML Editor 2019" 이다. https://atom.io/ A hacka..