루체

내가 만든 웹페이지에 저 Web이라는 글자가 이 페이지에 메인인데 조금 더 컸으면 좋겠다 라는 생각을 할 수가 있다. 그리고 가운데 정렬또한 하고 싶다라는 생각을 할 수가 있다. 그럼 자연스럽게 어떤 생각을 하게 되냐면 이 WEB이라고 하는 텍스트가 웹페이지에서 어떤 태그인지 찾아야 합니다. 찾아보니 h1 태그입니다. 이 h1 태그의 글을 더 크게 하고 싶다 라는 마음을 가지게 됩니다. 다행스럽게도 지금 h1 태그는 하나니까 선택자로 h1을 지정해서 텍스트를 크게 키워주면 됩니다. 근데 이 방법을 모릅니다. 근데 우리는 우리가 무엇을 모르는지 아니까 검색을 하시면 됩니다. CSS Text Size Property 라는 키워드로 검색을 해봅시다. 검색을 해서 사이트에 들어가보니 Text가 아니라 font인..

모든 'a' 태그를 선택한다라는 점에서 선택자, Selector라고 부릅니다. 그리고 저기 있는 'color:red; 라는 부분은 바로 선택자가 지정하는 태그들에 대해서 어떠한 효과들을 줄 것인가에 대한 것입니다. 선언 또는 효과 Declaration이라고 합니다 또 여기서 color를 Property red를 Value라고 합니다. 여기서 이것을 이해했다는 것은 굉장히 중요한 것입니다. 왜냐하면 모르는 효과를 만나거나 필요한 경우 무엇을 모르는지 알게 된 상태가 된 것입니다. 알게 되었다는 것은 검색을 할 수도 있고 질문을 할 수도 있게 됩니다.

웹페이지에 css를 포함시키기 위해선 html과 css가 완전히 다른 언어이기 때문에 웹브라우저로 하여금 어디서부터 어디까지가 CSS인지 알 수 있게 해줘야 합니다. 바로 style이라는 태그가 그런 역할을 하는 겁니다. 그 외에 한가지 방법이 더 있습니다. 바로 이런 태그를 통한 것이 아니라 속성을 이용하는 방법입니다. 현재 우리가 만든 웹페이지에서는 사용자가 어떤 목록을 클릭한 상태인지 알기가 힘듭니다. 그래서 현재 사용자가 이곳에 머물고 있다 라는 뜻에서 사용자가 클릭한 곳을 빨간색으로 표시하게 할겁니다. 처음에 이렇게 추가를 했는데 이렇게 추가를 하면 어디서부터 어디까지가 html이고 css인 것을 프로그램이 알 수가 없다고 합니다. 그래서 css라는 것을 속성에서 표시하기 위해서 사용하는 것이 ..

이 수업은 두개의 산으로 이루어져 있습니다 하나는 웹페이지를 만드는 것이고 그 과정에서 코딩이 무엇인지 파악하는 것이 목표였습니다. 또하나는 내가 만든 웹페이지를 인터넷을 통해서 누구나 가져갈 수 있게 하는 것입니다. 그 과정에서 인터넷이 무엇인가를 이해할 수 있습니다. 이 글은 웹의 역사에 관한 수업을 정리한 글입니다. 웹이 등장한지는 벌써 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 입니다. 왜냐하면 이 태그는 이 웹페이지를 정보로써 더 가치있게 만들기 때문입니다. 단락이라는 걸 명확하게 보여주기 때문인 것 같습니다... 단락을 바꿀때 여백이 너무 좁으면 태그는 여러번 쓰..