듣게된 이유
학교에서 웹프로그래밍 강의를 듣고있는데 자세히 설명해주시지 않고 바로바로 넘어가셔서 생활코딩 웹 강의를 듣게 되었다.
후기
확실히 유명한 강의이다보니 귀에 잘 들어왔다. 무료 강의라고 품질이 떨어진다는 생각을 안해도 좋을 것 같다. HTML이 뭔지를 공부해보고 싶은 사람이라면 하루 날 잡고 이 강의를 들으면 아주 도움이 되고 웹프로그래밍에 대해 전반적인 지식을 쌓을 수 있을 거라고 생각된다.
셀프 필기
HTML
- 배우기 쉽다
- 중요하다(아주 많이 쓰인다)
- public domain → 저작권이 없는 완전한 자유 언어
- 특정 기업이 독점하지 않았기에 오래가고 있다
준비물
- 웹 브라우저 + 에디터 (맥→text edit)
- Atom을 추천 → 본인은 구름IDE를 사용
- HTML Editor 이라고 검색하면 최신 에디터를 추천 받을 수 있음
코드 작성
- 태그를 활용해서 HTML의 기본적인 꾸미기가 가능
- <strong> (Bold)
- <u> (Underline)
- 태그라는 말을 일상에서 쓴다 → 옷을 사면 태그가 붙여서 나옴
- 이 태그는 옷을 설명한다. 즉, 특정 문자를 설명하는 것.
태그 찾는법
-
HTML h1 tag 라고 검색하면 h1 이라는 태그에 대해 알 수 있다.
-
이와 같이 모르는 태그를 검색하고, 정의와 예제를 보고 이해하는 것이 좋다.
-
요즘은 정보기술이 고도로 발전되어서 검색하는 능력이 중요하다.
-
태그는 150개 이상이 있으니… 그래도 몇개는 알고 있어야한다 (아니면 너무 오래 걸림)
-
평균적으로 많이 쓰는 tag
- 보통 25~26개로 웹페이지가 이뤄져있음
-
중요한 태그 2가지 공부
- 줄바꿈 태그
- <br>
- 단락 태그
- <p></p>
- css 사용 예시
- <p style =”margin-top:45px;> 이런식으로 표현하면 좀 더 정교하게 제어가 가능함.
(CSS는 나중에 배우니 일단 넘어가도 됨)
- <p style =”margin-top:45px;> 이런식으로 표현하면 좀 더 정교하게 제어가 가능함.
- 줄바꿈 태그
-
블로그나 글을 웹에 작성할 때 HTML을 작성하고 있었던 것이었다.
-
이렇게 두가지로 작성한 태그가 있다고 예를 들어보겠다. 검색을 하게 된다면 h3이 제목이기에 검색엔진에는 h3로 만든 글이 더 앞으로 많이 올것이다. 즉, 경우에 따라서는 검색엔진에 검색이 잘되도록 코드하는 것도 중요하다.
-
HTML의 속성 (심화된 문법)
- 이미지 삽입 <img>
- 태그만으로 정보가 부족할 때 속성을 추가해서 좀 더 정보를 구현해줌
-
부모 자식 태그 (parent, child)
- 목록을 만들기 (ul, li)
- ul이 li를 묶는 부모 태그. 안써도 되지만 프로그래밍적으로 ul로 구분하는게 좋다
<ol> 태그로 하면 숫자를 자동으로 생성해줌
- ol = ordered list, ul = unordered list
- list는 2대가 같이 다니지만 table은 3대가 같이 다닌다 (table, tr, td) -
HTML의 슈퍼스타(가장 빈도수 높은 태그 사용)
-
<title> → 웹페이지 제목 설정
-
<meta> → utf-8 파일로 열라는 명령어(글씨 안깨지게) ((meta charset =”utf-8”))
-
본문은 <body>, 본문을 설명하는 태그는 <head>로 묶기로 사람들 끼리 약속함
-
현대 태그의 제왕 (anchor, <a>)
- 링크를 해주는 태그
- 링크뿐만 아니라 홈페이지 왔다갔다도 가능함
- 링크를 해주는 태그
-
-
원시앱 (앱의 태초)
- 인터넷 vs 웹
- 둘은 다르다 (인터넷은 도시라면, 웹은 건물 하나이다)
- 즉, 인터넷 안에 웹, 이메일, FTP등등 많이 있다.
- 1960 인터넷 등장, 1990 웹 등장
- 1960에는 핵전쟁이 화두였다. 미국은 핵공격을 당하면 통신시스템 마비 → 그래서 인터넷을 개발함
- 망 형식으로 하나가 없어져도 중앙집중식이 아니기 때문에 한 점이 없어져도 그래도 구동이 가능함.
- 허나 1990, 웹이 등장하면서 일반 사용자들도 사용할 수 있게됨. (유래는 스위스)
- 팀 버너스 리, 웹의 태초를 만듬
- 인터넷 vs 웹
-
인터넷을 동작하기위해서는 2대의 컴퓨터가 필요하다
- 1개는 웹브라우저, 1개는 웹서버
- 이 둘은 인터넷으로 연결이 되어있음
- 웹브라우저는 request, 웹서버는 response를 해준다고 말함.
- client, server로 불리기도 함.
- 계속 웹클라이언트를 공부했으나 이제 웹서버를 공부해야한다.
-
직접 웹호스팅
- 계속 컴퓨터 켜져있어야한다 + 설정이 어렵다
- 대행업체가 있다. 호스팅사업(클라우드 사업)이라고 불림
- 깃허브를 사용할 것 이다.
- repository 만들기 → Settings → Pages → Main → Save
- 이러면 바로 안만들어지기에 Action에 진행상황 알려줌
- 웹사이트
-
웹서버 운영하기
- 웹브라우저 → 제품군
- 웹서버 → 제품군
- Webserverfor chrome 을 사용 할 것
- 크롬으로 웹서버를 만들 수 있기 때문이다.
-
http는 웹 서버를 거쳐서 문서를 연것이고, file은 그냥 디렉토리에 있는 index.html을 연 것
-
허나 클라이언트 + 서버 두개의 기기가 있어야하는데 이는 컴퓨터 + 핸드폰으로 가능
-
두 개 모두 같은 와이파이에 연결 시킨 후 사이트에 연결 시킬 수 있다.
-
동영상 삽입하기
- 유튜브 → Share → Code 부분을 복붙하면 해당 영상을 삽입 할 수 있다.
-
댓글 삽입하기
- 댓글은 백엔드 기술을 사용해야한다 (데이터베이스와 함께) 상당한 기술력이 필요하다
- 남들이 만든 댓글 서비스를 넣으면 직접 구현안해도됨.
- Disqus
- LiveRe
- 이 둘을 통해서 댓글 기능을 구현할 수 있음
-
채팅기능
- tawk 사용
- 제공해주는 태그를 제작한 코드에 삽입만 해주면 사용이 가능
- 이를 통해 고객들과 채팅이 가능함
-
웹사이트 방문 분석기
- 구글 애널리스틱스
- 이 도구를 통해서 고객들의
