생활코딩 WEB1-HTML&Interent
1.생활코딩 WEB1-2.프로젝트 동기
첫 시작은 동료들에게 SQL언어 알려주기 위해 강의 제작 시작당시, 유튜브와 같은 HD 화질 급 무료 동영상 플랫폼이 생기면서 강의 무료 배포 가능해짐
2.생활코딩 WEB1-1.수업소개
이 수업이 지식 보단 공부와 친해지는 계기가 되었으면 좋겠음
3.생활코딩 WEB1-4.코딩과 HTML
사람이 하는 일(원인) : code( 부호, 신호 라는 의미 ), source( 원천이라는 의미 ), Language ( 약속이라는 의미 )기계가 하는 일(결과) : 애플리케이션, 앱, 프로그램, 웹 페이지/웹 사이트 ( 웹 페이지모이면 )코드 핵심 : 원인인 코드를
4.생활코딩 WEB1-3.기획
무엇을 만들것인가 미리 상상하고 계획하고 구체화 해야함. 하지 않을 경우 문제가있거나 원하는 게 아니면, 여러 사람이 같이 했는데 생각하는 바가 다르면 굉장히곤란해짐.
5.생활코딩 WEB1-5. HTML코딩 실습환경 준비
준비물1) 웹 브라우저 : 웹 페이지 제작 이니까2) 에디터 : 코드 작성 프로그램, 프로그램 편집하는 프로그램 ex)윈도우 메모장, 맥 텍스트 에디트 등, 하지만 코드 작성에 최적화된 전문도구인 ATOM사용 (1) 에디터 찾기 HTML Editor
6.생활코딩 WEB1-6.기본 문법 태그
태그 ( HTML구성하는 가장 중요한 문법 )1) 작성법 : <열리는 태그> .. </닫히는 태그>2) 종류 (1) .. : 글씨 강조 (2) .. : 밑줄 표시
7.생활코딩 WEB1-7. 혁명적인 변화
h1태그 : 제목 태그, h1 ~ h6까지 있음. 숫자가 올라갈수록글자가 작아짐처음 배우는 것들은 쉽지만 자주 쓰이고 중요함
8.생활코딩 WEB1-8.통계에 기반한 학습
처음 공부하는 것은 자주 사용되고 창조성 원천, 나중에 공부하는 것은 특수한 상황 적용. 공부할 때 통계에 기반해서 자주 사용하는 것부터 공부태그 사용 빈도 분석 사이트 주소www.advancedwebranking.com
9.생활코딩 WEB1-9.줄바꿈 br, p
<br> : 줄 바꿈. 닫는 태그 없음. 여러 번 붙여서 사용 가능<p>..</p> : 단락 표현. 웹 페이지를 정보로서 의미있게 함.
10.생활코딩 WEB1-10. HTML이 중요한 이유
웹 기술적 측면검색엔진이 span태그와 h3태그 내용을 비교 할 때태그를 근거로 해서 정리해놓음. 즉, 제목이라는 의미를 가진 h3태그 내용을 웹사이트 앞쪽에 노출 하고, span태그 내용은 웹 사이트 뒤쪽으로 노출되서 사용자가 볼 가능성이 적음.결론 : 웹을 화려하게
11.생활코딩 WEB1-11.최후의 문법 속성, img
<img> : 이미지 넣음. 안에 src속성 작성해야 함.<img src( source 줄임말 )="파일명.jpg" width = 100% 등>속성 위치는 상관 없음속성은 태그 만으로 정보 부족 시 사용
12.생활코딩 WEB1-12. 부모자식과 목록
부모 태그 : 태그 포함 관계에서 포함 하는 태그자식 태그 : 태그 포함 관계에서 포함된 태그<li> : 리스트 나타냄<ul> : li태그 그룹핑 해줌. unoderlist 약자li태그를 숫자로 표현 안함<Ol> : li태그 그룹핑 해줌. orderl
13.생활코딩 WEB1-13.문서의 구조와 슈퍼스타들
본문 설명<head> : 본문 제목, 본문 설명<title> : 웹 페이지 제목 표시<meta charset= "utf-8"> : 우리가 만든 파일은 utf-8 형식으로 저장됨. 웹 브라우저가 열 때도 utf-8로 열라고 알려줘야 내용이 오류 ( 글씨
14.생활코딩 WEB1-14.HTML태그 제왕
<a> : anchor(닻) 첫 글자 땀. 정보의 바다에 정박한다. 링크 기능href : h는 hypertext 약자. ref는 refernece (참고) 약자\_blank : 새 탭에서 열림title : 링크 클릭 전, 툴팁으로 무엇인지 알려줌
15.생활코딩 WEB1-15.웹 사이트 완성
링크를 통해 여러 웹 페이지 연결
16.생활코딩 WEB1-16. 원시 웹
수업 목표웹 페이지 제작하며 코딩 문법 숙지만든 웹 페이지를 인터넷으로 누구나 가져갈 수 있게하는 것인터넷핵 전쟁으로 분산 통신 시스템 환경이 필요함에 따라 1960년 대 탄생웹팀 버너스 리가 1990년 대 스위스 유럽 입자 물리 연구소에서만듦.
17.생활코딩 WEB1-17.인터넷을 여는 열쇠, 서버와 클라이언트
client : 고객, 정보 요청하는 쪽server : 서비스 제공하는 사람, 정보 제공하는 쪽client computer : 정보 요청하는 컴퓨터server computer : 정보 제공하는 컴퓨터web browser : 웹 클라이언트web servergame cli
18.생활코딩 WEB1-18.웹 호스팅 github page
호스트 : 인터넷이 연결된 컴퓨터 한 대, 한 대호스팅 사업 : 인터넷 접속된 컴퓨터 제공하는 사업웹 호스팅 : 호스팅 사업 목적이 웹 서버 제공하는 것웹 호스팅 업체 : 웹 서버 운영하기 위해 호스트 빌려주는 회사github : 무료 웹 호스팅 업체 가입 ->
19.생활코딩 WEB1-19. 웹 서버 운영하기
웹 브라우저, 웹 서버는 제품 군임. 그 안에 다양한 제품들이 있음아파치 : 무료 오픈소스 소프트웨어, 웹 서버 제품설치방법 : How to install apache http( 또는 web ) server 운영체제 명 + 해당년도 ( 윈도우, 맥, 리눅스 )
20.생활코딩 WEB1-23. 웹 서버 설치(MAC)
맥에는 기본적으로 아파치가 설치되어 있음. 하지만 켜고, 설정하는 것들이 바뀌게 되면 실습하기 어려워서 다른 방법 활용아파치 설치 방법Bitnami mamp stack ( 아파치 직접 설치하는게 다소 까다로운 일, Bitnami MAMP라는 프로그램 설치하면 아파치 관
21.생활코딩 WEB1-24. 웹 서버와 HTTP(MAC)
application -> MAMPstack폴더 -> Apache2폴더 ->htcdocs폴더 ( ht는 하이퍼텍스트, doc는 문서 ) -> index.html파일 비롯해 여러 파일 있음. ( bitnami를 통해 apache깔면 bitnami가 그 디렉토리 안에 저
22.생활코딩 WEB1-25. 웹 서버와 웹 브라우저 통신
ip주소를 입력해서 웹 브라우저가 설치된 컴퓨터에 설치된 웹 서버를 통해 컴퓨터에 저장된 파일 (웹 페이지) 보는 것은 의미 없음. 직접 command + O로 열면됨우리가 하고 싶은 것은 서로 다른 컴퓨터에 설치된웹 서버와 웹 브라우저가 있을 때 웹 서버가 설치된컴퓨
23.생활코딩 WEB1-27. 수업을 마치며 1/3
처음 배우는 것은 쉽지만 자주쓰이고, 중요함나중에 배우는 것은 어렵지만 특수한 상황에서 쓰이고, 덜 중요함처음에는 배우는 속도가 빠르지만 실력이 낮아서 조급해하고, 나중에는 실력은 높지만 느는 속도가 느려서 조급해함. 하지만 만족감, 자신감, 기대감으로 공부하면 좋겠음
24.생활코딩 WEB1-31.부록- 코드의 힘, 동영상 삽입
<iframe>: 동영상 삽입 태그<iframe width="560" height="315 src="링크">
25.생활코딩 WEB1-32. 코드의 힘, 댓글 기능 추가
댓글 기능 댓글기능은 HTML로는 불가능하고, 백엔드 기능을 알아야 함. Php, jsp, python 등 기술을 이용해서데이터베이스까지 활용해서 구현하는 것이 필요지금은 DISQUS서비스 이용해서 웹 페이지 하단에 댓글 추가함.LiveRe 서비스도 있음.웹 서버를 통
26.생활코딩 WEB1-33. 코드의 힘, 채팅 기능 추가
tawk.to서비스 통해 구현 가능웹 서버로 HTML파일 열어야 실행됨. ( 127.0.0.1, localhost, 도메인 이름 활용 )
27.생활코딩 WEB1-34. 코드의 힘, 웹 사이트 방문자 분석기
웹 페이지 분석기 : 웹 사이트 방문자 수, 들어온 경로, 어떤 환경에서 웹사이트를 탐색하고있는지와 같은 고급정보를 제공해주는 서비스구글 애널리틱스 활용웹 사이트 만들면 분석기 활용해서 데이터는 무조건 쌓아둬야 함.