[HTML] 생활코딩 WEB1 - HTML & Internet 정리

in Development on HTML


HTML에 대한 공부가 필요할 것 같아 생활코딩과 함께 공부를 해보려 한다.

생활코딩 WEB1 - HTML & Internet 정리

참고 : 생활코딩 WEB1 - HTML & Internet

  1. 토픽 목록
  2. 프로젝트의 동기
  3. 기획
  4. 코딩과 HTML
  5. HTML 코딩 실습 환경 준비
  6. 기본 문법 - 태그
     <strong></strong> 강조, 굵게 표시
 <u></u> 밑줄,under line
  7. 혁명적인 변화
  8. 통계에 기반한 학습
     코드 빈도가 많은게 중요하다
  9. 줄바꿈
     <br> 닫지 않는 태그로 단순히 줄바꿈을 해줌
 <p></p> paragrah의 약자로 열리는 태그, 닫는 태그로 문단을 표시해줌
 단점은 br처럼 원하는 만큼 공백을 만들기 어려움
 이때 쓰는 것이 CSS. HTML은 정보를 표현하고 CSS 정보를 꾸며줌
 여기서 쓰인 CSS 예제 <p style="margin-top:45px;"></p>
 margin-top은 문단의 위 여백을 뜻함. 45px는 여백 크기.
  10. HTML이 중요한 이유
     HTML은 
 비즈니스적인 측면에서도 중요하지만,
 휴머니즘적인 측면에서도 중요한 기술
  11. 최후의 문법 속성과 img
     img 태그
 이미지를 넣기 위한 태그
 <img src="(해당파일명) " (각종 속성, 크기 등)>
  12. 부모 자식과 목록
     태그간의 관계
 부모태그 자식태그
    
 <li> List - 앞에 순서대로 점이 붙음

 <ul> - unordered list 목록을 구분 할 때 사용
 <ol> - ordered list 숫자가 자동으로 붙음
  13. 문서의 구조와 슈퍼스타들
     <!---doctype html> 로 문서를 설명
 <html></html> 태그로 전체 묶어주기

 <head>
 설명
 <meta charset="utf-8"> 이거 써야 한글 안깨짐
 </head>

 해드태그 안에
 <title> <meta charset="UTF-8">


 <body>
 본문
 </body>
  14. HTML 태그의 제왕
     <a href="연결할 링크"
 target="_blank" #새탭
 title="커서 갖다내면 나오는 내용">

 href=HyperText Reference의 약자
  15. 웹사이트 완성
     html을 3개 만들어서 
 아래의 웹페이지 만들기
 https://web-n.github.io/web1_html_internet/
  16. 원시웹
     Internet vs WEB : 인터넷이 운영체제라면, 웹은 운영체제 위의 하나의 앱 
 웹의 역사 : 1960년에 핵공격에 통신시스템이 취약하니까 중앙이 없는 인터넷 만듦 -> 1990년에 스위스에서 팀버너스 리가 웹페이지 만듦 (원시웹 : info.cern.ch)
  17. 인터넷을 여는 열쇠 : 서버와 클라이언트
     인터넷이 동작하기 위해서 필요한 컴퓨터 수는? : 2개 (웹 브라우저와 웹 서버가 필요)
 웹 브라우저가 index.html을 request하면 웹 서버가 response해서 줌(어떠한 전기적인 신호로)
 고객과 사업자의 관계라고 볼수 있어서 요청하는 컴퓨터를 클라이언트, 응답하는 컴퓨터를 서버 컴퓨터 라고 한다.
 서버를 설치하는 방법은 내 컴퓨터에 직접 설치하는 방법과 웹호스팅 업체를 쓰는것이 있다.
  18. 웹호스팅 (github pages)
    • 웹서버 운영하는거 어려움, 컴퓨터가 항상 켜져있어야됨
    • 그래서 대신 웹서버를 빌려주닌 회사가 웹호스팅 회사 ex.깃허브
    • 깃허브에서 깃허브페이지 master branch하면 내가 만든 index.html을 웹으로 쏴주고 주소 치면 나올수 있게 해줌

    아래 그림 참고 하면 플로우가 어떻게 되는지 알 수 있음


    • 웹서버 운영을 직접하는 경우는 흔치 않음. 전문적으로 하는 회사에 맡기는게 대부분
    • 깃허브가 마음에 안들면 검색 : free static web hosting
  19. 웹서버 운영하기
  20. 웹서버 운영 : 윈도우
    • 웹서버에 설치, https://bitnami.com/stack/wamp에서 다운받아서 설치, sql 비밀번호 입력
    • 실행 안되면 Bitnami를 설치한 디렉토리의 manager-windows라고 되어 있는 프로그램을 실행

    • 매니저에서 Go to Application 버튼을 눌러서 bitnami 웹페이지 나오면 성공

    • Apache Web Server를 선택한 후에 Start, Stop 버튼을 눌러서 웹서버를 켜고 끌 수 있습니다.(초록:웹서버 켜짐)

    • http://localhost/index.html, http://127.0.0.1/index.html 둘다 내 컴퓨터의 index.html을 요청하는 주소
    • 127.0.0.1은 모든 컴퓨터들이 자기 컴퓨터를 칭하는 ip주소

    • 아래 그림처럼 자기 자신에게 요청 보내서 보여주는 것

    • 만약에 htdocs 디렉토리를 내 프로젝트 index.html 파일로 바꾸면 그것으로 나오게 된다.

    • 왼 : 웹서버를 이용하는 방법, 오른 : 그냥 웹서버로 파일을 직접 열기

    • 두대의 컴퓨터가 서로 웹페이지를 주고 받는 방법 :
    • 자신의 아이피를 알아야 하고, 두개의 컴퓨터(실습에서는 컴+폰)의 와이파이나 인터넷이 같아야 한다.
  21. 웹서버 운영하기 : 맥
  22. 웹서버 운영 : 리눅스
  23. 수업을 마치며 1
  24. 수업을 마치며 2
  25. 수업을 마치며 3
  26. 부록 : 코드의 힘
  27. 부록 : 코드의 힘 - 동영상 삽입
  28. 부록 : 코드의 힘 - 댓글 기능 추가
  29. 부록 : 코드의 힘 - 채팅 기능 추가
  30. 부록 : 코드의 힘 - 방문자 분석기



© 2018. by statssy

Powered by statssy