수정입니다

<생활코딩> WEB 1 - HTML & Internet 본문

web

<생활코딩> WEB 1 - HTML & Internet

nongdamgom 2024. 1. 22. 23:30

 

WEB 1 실습

 

<!doctype html>
<html> <!-- 모든 html 코드는 head와 body 안에 놓이고, head와 body는 html 태그 안에 존재-->
    <head> <!-- body를 설명하는 코드-->
        <title>웹 실습</title> <!--title :  web 자체 제목-->
        <meta charset="utf-8">
    </head>
    
    
    <body> <!-- 본문에 관한 코드 -->
        <h1>이번 방학</h1>  <!--header 1 : 제목-->
        <!-- header의 중요성 -->
        <!-- 검색엔진에 더 잘 걸릴 수 있다.. -->

        모든 공부 / 플젝 내용은
        <a href="https://roooga.tistory.com" target="_blank" title="tistory"><h2>수정입니다</h2></a>
        <!-- 
            a : link , href : hyperlink reference
            target="_blank" : 새 페이지로 열리게
            title : 커서 올려놓으면 뜨는 타이틀
        -->
        와 함께합니다.

        <ol>
            <li><a href="1.html" target="_blank">HTML</a></li>
            <li><a href="2.html" target="_blank">CSS</a></li>
            <li><a href="3.html" target="_blank">JavaScript</a></li>
        </ol>

        <p style="margin-top: 45px;">
            자 내가 이번 겨울 방학에 뭘 해야할까...<br> 
            <!--br : 줄바꿈-->
            <!--p : 단락 구분-->
            일단은 <strong>web</strong> 찍먹하면서 공부 좀 하고, <br> <!--strong : 진하게-->
            아무래도 난 <strong><u>백앤드</u></strong>로 갈 것 같으니까, <strong>spring</strong> 강의 들으면서 공부.. <!--underline : 밑줄--></p>
        <p style="margin-top: 45px;">
            <strong>알고리즘</strong> 공부도 좀 해야 될 것 같은데 <br>
            매일 알고리즘 하나 정해서 백준 한문제씩 풀어볼까... 
        </p>
        
        <img src="img_test.jpg" width="300"><br>
        <!-- img : 이미지 추가-->
        
        <p style="margin-top: 45px;">
            <ul> <!--unordered list : 목차 구분-->
                <li>240122 ~ 240128</li> <!-- list : 목차 요소-->
                <ol> <!--ordered list : 자동 넘버링-->
                    <li>생활코딩 WEB 1 : HTML & Internet</li>
                    <li>알고리즘</li>
                </ol>
                <li><strong>240129 ~ 240204</strong></li>
                <li>240205 ~ 240211</li>
                <li>240212 ~ 240218</li>
                <li>240219 ~ 240223</li>
            </ul>
        </p>
    </body>
</html>

 

 

인터넷이 동작하는 원리

  • Web Browser 와 WEb Server 두 대의 컴퓨터가 인터넷으로 연결되어 있음
  • 웹 서버 => html 파일 존재, 주소 가짐, response(server)
  • 웹 브라우저 => 여기서 그 html 검색, request(client) 
  • 웹 브라우저에서 웹 서버에 신호를 줘서 하드디스크에서 html을 찾아서 보내줌
       
  • 웹 호스팅 : 웹 서버를 해주는 대행 업체 => 호스팅, 클라우드
  • ==> 제일 유명한 웹 호스팅 서비스 : 깃허브
  • 내가 만든 웹페이지 파일을 웹 호스팅 쪽에 넘겨주면 그 업체가 웹서버를 활성화 시켜서 그 도메인의 이름을 부여
  • 웹브라우저(방문자)가 도메인에 접속하면, 웹 서버가 html 파일을 읽고 그 소스코드를 웹브라우저에 전송

 

  • 내가 웹서버를 직접 열었을 경우.
  • file://desktop/web/ ..  => 웹브라우저가 직접 파일을 열었을 때
  • http://127.0.0.1:5500 .. => 웹서버를 통해 파일을 열었을 때
  • 웹 서버를 끄면 두번 째 주소는 접속 x

 

  • http : hyper text transfer protocal
  • 127.0.0.1 :  내 컴퓨터를 나타내는 ip
  • 5500 : port 번호, 하나의 컴퓨터가 여러개의 서버를 동작할 때, 웹브라우저가 통신할 서버를 구분하기 위해 각 서버에 포트번호 존재

 

https://yjg0815.github.io/web_1/

 

웹 실습

이번 방학 모든 공부 / 플젝 내용은 수정입니다 <!-- a : link , href : hyperlink reference target="_blank" : 새 페이지로 열리게 title : 커서 올려놓으면 뜨는 타이틀 --> 와 함께합니다. HTML CSS JavaScript 자 내가

yjg0815.github.io

깃허브 호스팅 페이지 (위 코드)

 

 

깃허브 호스팅 방법 

  • 새 repository 파고
  • 관련 파일 업로드
  • setting => pages => branch 에 none을 main으로 변경 후 save

 

내 컴퓨터 웹서버 설정 방법

  • vscode 에서 live server 설치 
  • 하단바에 go live 생기면 클릭