카테고리 없음

(생활코딩) HTML & Internet 공부 요약

초콜릿나라첩자딸기요정 2024. 5. 15. 20:08

큰그림

<현재 나의 수준에 맞춘 공부 계획(변경가능)>

HTML&Internet(생활코딩) → Django WebFramework(생활코딩) → Python(점프 투 파이썬 등) → Django WebFramework(인프런 이진석님 강의)

 

공부를 통해 최종적으로 인공지능 기술을 활용한 웹을 만드는 것이 목표다. 인공지능과 관련된 라이브러리가 풍부한 Python(파이썬)을 사용하기로 하였다. Django(장고)는 대표적인 Python 웹 프레임워크 중 하나인데, 기본적인 기능이 탑재되어 있어 개발하기에 편리하고 초보자에게도 좋을 것 같아 선택하였다. 

 

 

공부 내용 정리

생활코딩님의 HTML & Internet 강의을 듣고 공부한 내용을 정리해보았다.

https://opentutorials.org/course/3084

 

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

opentutorials.org

 

<12강. 부모 자식과 목록>

2대가 같이 다님. <ul><li></li><ul> 혹은  <ol><li><li></ol>

<li>는 list(목록), <ul>은 unodered list이고 <ol>은 ordered list임.

3대가 같이 다님. <table><tr><td></td></tr></table>

 

+참고) VSCode 커서 여러 개 마우스로 클릭해서 추가하기 : Alt + Click

https://week-book.tistory.com/entry/VSCode-%EC%BB%A4%EC%84%9C-%EC%97%AC%EB%9F%AC-%EA%B0%9C-%EC%84%A0%ED%83%9D%ED%95%98%EA%B8%B0-%EB%A9%80%ED%8B%B0-%EC%BB%A4%EC%84%9C

 

VSCode 커서 여러 개 선택하기, 멀티 커서

코드 강의를 보다가 선생님이 갑자기 커서를 여러 개 설정하고 한 번에 코드를 치는 모습에 당황하신 적 있으시죠? 멀티 커서의 존재를 알고 나면 선생님처럼 빠르게 코딩이 가능합니다. 반복되

week-book.tistory.com

 

 

<13강. 문서의 구조와 슈퍼스타들>

<!doctype html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

    </body>

</html>

 

<14강. HTML 태크의 제왕>

<a href = " ..." ></a>

링크를 눌렀을 때 새 탭에서 열리게 하기 : target속성을 _blank로 설정

마우스를 올렸을 때 설명이 뜨도록 하기(툴팁 뜨게 하기) : title 속성

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/index.html" target="_blank" title="html5 sepcification"> Hypertext Markup Language (HTML)</a>

 

<15강. 웹사이트 완성>

페이지와 페이지를 링크로 연결

페이지들의 그룹 - 웹사이트

출처: https://opentutorials.org/course/3084/18431

WEB을 눌렀을 때 index.html로 이동

 

index.html

<!DOCTYPE html>
<html>
<head>
    <title>WEB1 - Welcome</title>
    <meta charset="utf-8">
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>WEB</h2>
    <p>월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공유 시스템을 말한다.
         간단히 웹(the Web)이라 부르는 경우가 많다. 이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다. 웹은 전자 메일과 같이 인터넷 통신망에서 동작하는 하나의 '서비스'일 뿐이다. 그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
          인터넷에서 HTTP 프로토콜, 하이퍼텍스트, HTML형식 등을 사용하여 그림과 문자를 교환하는 전송방식을 말하기도 한다. </p>
</body>
</html>

 

html을 눌렀을 때 1.html로 이동

 

1.html

<!DOCTYPE html>
<html>
<head>
    <title>WEB1 - Html</title>
    <meta charset="utf-8">
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
        <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>HTML</h2>
    <p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/index.html" target="_blank" title="html5 sepcification"> Hypertext Markup Language (HTML)</a> is standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
        Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    <img src="image1.jpg" width="40%">
    <p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents
         by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. </p>
</body>
</html>

 

위와 같은 식으로 css, javascript를 누르면 각각을 설명하는 페이지가 나오도록 함.

 

<17강. 인터넷을 여는 열쇠: >

웹 브라우저 쪽의 컴퓨터는 정보를 요청하고 있고 (클라이언트),

웹 서버 쪽의 컴퓨터는 정보를 응답하고 있음(서버).

방법1. web hosting

방법2. web sever

출처: https://opentutorials.org/course/3084/18890

 

<18강. 웹 호스팅 github pages>

인터넷에 연결된 컴퓨터 하나 = host

인터넷에 연결된 컴퓨터를 빌려주는 사업 = hosting, cloud

1. 깃허브에 repository(저장소) 생성 후 파일 업로드

https://github.com/ChocoLandStrawberrySpyFairy/my-web-site-by-lifecoding

 

GitHub - ChocoLandStrawberrySpyFairy/my-web-site-by-lifecoding

Contribute to ChocoLandStrawberrySpyFairy/my-web-site-by-lifecoding development by creating an account on GitHub.

github.com

2. 해당 repository의 settings → Pages → Branch의 None을 main으로 변경 후 저장(Actions 탭에서 과정 볼 수 있음.)

settings의 Pages 상단에 주소 나옴. 

https://chocolandstrawberryspyfairy.github.io/my-web-site-by-lifecoding/

3. 수정 시 파일 재업로드하면 자동으로 반영(Actions 탭에서 과정 볼 수 있음.)

 

출처: https://opentutorials.org/course/3084/18891

 

<19강. 웹서버 운영하기>

스마트폰에 설치된 웹브라우저와 실습용 컴퓨터에 설치된 웹서버가 통신하도록 하는 과정

1. 웹서버 제품군 : Apache, IIS, Nginx .. 중 Live Server(VScode 확장 프로그램) 사용 - 우측 하단의 Go live 버튼

출처: https://opentutorials.org/course/3084/31144

- http : 웹페이지를 주고받기 위한 통신 규약

- 127.0.01 : 내 컴퓨터 자신을 가리키는 주소 (IP Adress는 0.0.0.0부터 255.255.255.255까지의 약 43억개 주소가 존재)

- Port는 컴퓨터에서 여러 개의 서버가 동작하고 있을 때 서버를 구분하는 정보. 주소의 port 번호가 5500이면 5500에서 동작하고 있는 Web server와 통신

2. 휴대폰과 노트북을 같은 와이파이에 연결

3.. IP Address 설치(VS 코드 확장 프로그램) - 웹 서버가 설치된 컴퓨터의 IP address가 우측 하단에 표시됨.

4. 휴대폰 웹 브라우저에서 해당 IP주소와 포트번호를 입력 (IP주소:포트번호)

결과

 

<부록1: 코드의 힘 - 동영상 삽입>

유튜브 동영상 - 공유 버튼 - Embed(퍼가기, Source) 클릭 - 복사&붙여넣기

iframe 태그

<p>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE?si=FjAWvV4g0TMIyvr4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</p>