BINABLE

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18889 원시웹 - 생활코딩 --- 우리 수업은 두 개의 산으로 이루어져 있습니다. 하나의 산은 웹페이지를 만드는 것입니다. 여러분은 방금 이 산을 멋지게 넘었습니다. 또 하나는 내가 만든 웹페이지를 인터넷을 통해서 누 www.opentutorials.org 웹의 역사 웹은 1990년 처음 등장한 이후 2021년 지금까지도 가장 중요한 정보기술로 자리잡고 있다. 지금부터는 웹이 이 세상에 등장했는가 그 역사를 살펴볼 것이다. 먼저 이 질문에 대한 답을 먼저 생각해보자. Q. Internet과 WEB은 같을까 다를까? A. 두 가지는 다른 것이다. 인터넷이 도시라면, 웹은 그 ..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18431 웹사이트 완성 - 생활코딩 --- 지금까지 웹페이지를 만드는 방법을 배웠습니다. 또 페이지와 페이지를 링크라는 길로 연결하는 방법도 배웠습니다. 링크는 본드, 실과 같은 것으로도 비유할 수 있습니다. 페이지가 모이면 www.opentutorials.org 간단한 웹페이지 완성 #index.html WEB HTML CSS JavaScript WEB The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identifie..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18418 HTML 태그의 제왕 - 생활코딩 우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다. 태그를 결합하는 방법을 완전히 마스터했고, 빈도수가 절대적으로 높은 태그들을 살펴봤습니다. 앞으로 배울 것 보다, 지 www.opentutorials.org 태그가 무엇인지 웹 브라우저에 검색해보자. https://www.w3.org/TR/html5 HTML Standard html.spec.whatwg.org 위의 페이지에서 HTML 태그들의 각종 사용법을 알 수 있는데, 이 중에서도 태그가 어떤 기능을 하는지 설명하는 웹 페이지는 다음과 같다. ( html.spec..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18409 문서의 구조와 슈퍼스타들 - 생활코딩 --- 우리는 HTML의 문법을 마스터했다고 말씀드렸습니다. 말하자면 문장을 만드는 방법을 마스터했다고 할 수 있습니다. 더 복잡한 것은 단언컨대 존재하지 않습니다. 문장이 모이면 무엇이 되나 www.opentutorials.org 태그 우리의 웹페이지는 파일의 이름으로 저장한 '1.html'이라는 도메인 주소를 가지고 있다. 하지만 다른 웹페이지들은 제목이 내용을 잘 표현하고 있다. 내가 가진 웹페이지의 제목을 지정하기 위해서는 이라는 태그를 사용하면 된다. 이라는 태그를 사용해서 아래와 같이 코드를 작성해보자. WEB1 - h..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18408 부모 자식과 목록 - 생활코딩 --- 이번 시간에는 태그 간의 관계를 나타내는 표현인 부모(parent),자식(child)에 대해서 알아보겠습니다. 아래 코드를 보시죠. (저런 이름의 태그는 없습니다) parent 태그에 대해서 child 태그를 자식 www.opentutorials.org 목록 HTML, CSS, JavaScript 라는 목차(목록)를 만들고 싶을 때는 어떻게 할까? 우선 에디터에 아래와 같이 써본 후 웹페이지를 새로고침해보자. 세 개의 단어가 어떠한 구분도 없이 단순히 나열된 것을 확인할 수 있다. 세 개의 목차를 만들기 위해서는 라는 태그를 사용..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18407 최후의 문법 속성과 img - 생활코딩 --- 지금까지 가장 중요한 문법인 태그를 배웠습니다. 이번 시간에는 태그의 심화된 문법인 속성(attribute)을 배우게 될 것입니다. 이것까지 배우면 HTML의 기본 문법을 완전히 마스터한 것이 됩니 www.opentutorials.org 이미지 첨부 이렇게 텍스트만 있는 페이지는 너무 삭막하다. 이미지를 첨부해보자. 이미지를 첨부할 때 사용하는 태그는 이다. 하지만 이 태그의 이름만으로는 내가 원하는 이미지를 불러올 수 없다. 내가 원하는 이미지를 불러오기 위해 속성(attribute)을 적용하게 되는데, 이 때 태그에 ..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18403 줄바꿈 - 생활코딩 --- 이번 시간에는 인기있는 태그 두 가지를 살펴볼 거에요. 이 두 태그는 서로 경쟁관계에 있는데요. 어떤 경쟁관계에 있는가를 통해서 정보로서 웹이라는 관점에 대해서 생각해 봅시다. 또 CSS www.opentutorials.org 먼저 예제의 내용을 입력한 후 결과가 어떻게 나오는지 웹 페이지를 통해 확인해보자. HTML Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.Web browsers rece..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18452 통계에 기반한 학습 - 생활코딩 --- 이번 시간에는 통계에 기반을 둬서 공부하는 방법에 대한 이야기를 해보겠습니다. 오늘날의 HTML은 약 150개가 넘는 태그가 존재합니다. 그럼 그 많은 태그를 다 외워야 할까요? 앞에서 우리가 www.opentutorials.org 전세계에 있는 웹페이지들은 몇 종류의 태그로 이루어져있을까? https://advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses thirty-t..

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다. www.opentutorials.org/course/3084/18392 기본 문법 - 태그 - 생활코딩 --- 이제부터 진짜로 코딩을 해보겠습니다. 먼저 우리가 만들었던 기획서를 다시 보시죠. 이런 모양의 웹페이지를 한 번에 만들수는 없습니다. 조각조각 구현하면서 전체적으로 완성해 나가면 www.opentutorials.org www.opentutorials.org/course/3084/18400 혁명적인 변화 - 생활코딩 --- 제가 오랜 시간 공부에 대해서 오해한 게 있습니다. 중요한 것은 어렵고 쉬운 것은 사소하다는 것입니다. 이렇게 생각하게 된 이유가 무엇인지 가만히 생각해 보니까 쉬운 것은 시험에 나오 www.opentutori..