부록 : 코드의 힘 – 동영상 삽입 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 동영상 넣기 유튜브 영상을 추가하고자 한다면… 영상 하단에 공유 버튼을 누른다. 퍼가기(혹은 소스)를 누른다. 이제 HTML 태그로 된 코드를 원하는 단락에 복사해서 붙여 넣으면 된다. 그 외 강의에는 동영상을 넣는 것 이외에도 다른 기능을 소개한다. 3가지 강의 내용은 … 더 읽기
인터넷에서 웹이 동작하는 기본적인 원리 인터넷이 동작하려면 최소 2대의 컴퓨터가 필요하다. 역할에 따라서 서버와 클라이언트로 부른다. 따라서 웹이 인터넷에서 동작하려면 웹 클라이언트와 웹 서버가 필요하다. 인터넷에서 웹이 동작하는 과정을 살펴보자. 이미지 출처 : https://youtu.be/yBPyzaccbkc 웹 서버를 운영하는 하는 방법은 크게 2가지다. 우리는 두가지 방법을 모두 해보자. 웹 호스팅 (깃허브 페이지) 웹 호스팅은 웹 서버를 직접 … 더 읽기
HTML 태그의 제왕 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. a tag 지금의 웹을 만든 중요한 태그가 있다. 웹과 웹이 서로 연결하는 <a> 태그가 그것이다. href : Hypertext + reference 자주 쓰는 형식은…. 출처를 표시하기 위해서 나무위키로 링크를 만들어보자. 웹 페이지 완성하기 강의에서는 위와 같이 링크를 연결한다. 나는 참고해서 링크를 구성하자. … 더 읽기
HTML이 중요한 이유 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. HTML을 의미에 맞게 사용한다는 것 중요하다. 검색 엔진은 웹 페이지에 담긴 html 코드를 분석한다. 태그에 근거해서 정리 정돈한다. 현대 사회에서 검색 엔진의 위상을 고려해 볼 html의 의미에 맞게 사용한다는 것은 비즈니스 측면에서 중요하다. 또 신체적 장애가 있는 분들이 사용하는 청각화 장비도 html을 … 더 읽기
HTML 코딩 실습 환경 준비 – 생활코딩 HTML 코딩 실습 환경 준비 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 준비 강의에서는 atom editor로 진행하지만, 나는 vs code를 사용하기로 했다. 바탕화면에 web이라는 디렉터리를 만든다. 프로젝트에 사용할 파일은 이곳에 저장한다. 강의 목표 오픈 튜토리얼 html 강의의 목표는 아래와 같은 웹 페이지를 만드는 것이다. 강의에서 … 더 읽기
Anatomy of an HTML document HTML 문서의 구성 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> HTML document의 시작은 <!DOCTYPE html>로 시작한다. A DOCTYPE is a required preamble. DOCTYPE은 필수적인 서문입니다. DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering … 더 읽기
Attributes example Attributes contain extra information about the element that won’t appear in the content. Anchor for a hyperlink. <a> : a는 anchor를 뜻한다. hyperlink를 끌어오는 느낌으로 anchor를 사용하는 듯하다. 각 element마다 사용할 수 있는 attributes가 다른 듯하다. a의 경우 대표적으로 href, title, target을 사용할 수 있다. Boolean attributes values 없이 쓰이는 경우가 있다. 이 경우 … 더 읽기
