WEB1-HTML & Internet (생활코딩)

WEB

WEB1-HTML & Internet (생활코딩)

fafaya 2022. 2. 9. 10:09

https://www.w3schools.com/html/

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<생활코딩-WEB1>

-웹은 퍼블릭 도메인이다.

-<strong></strong>, <u></u>, <h1></h1> h1~h6 헤딩,

자주 사용되는 태그: <head>, <body>, <html>, <title>, <meta>, <div>, <a>, <script>, <link>, <span>,

-검색엔진에서 태그 참고함.

-unsplash.com : 저작권 free 무료 이미지 사이트

-src : source --> <img src="coding.jpg" width="100%">

- 부모/자식 태그

</parent>

-<li>태그는 반드시 부모 태그를 갖고 있다. 부모 태그인 <ul> 태그는 반드시 자식 태그를 가지고 있다.

<ul>	Defines an unordered list
<ol>	Defines an ordered list

-검색엔진과 같은 기계들은 title 태그를 기준으로 정보 검색한다.

-<!doctype html>

<html>

</html>

-W3C html 국제 표준 : https://www.w3.org/TR/2011/WD-html5-20110405/

-<a>></a> anchor 에서. href (hyper reference) : 링크주소 / target="_blank" : 새탭에서 열기 / title="제목" : 클릭하기 전에 커서 가져다대면 뜨는 문구 설정

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">Hypertext Markup Language</a>

index.html

<!doctype html>
<html>
<head>
    <title>WEB - 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>

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>The <a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">HyperText Markup Language</a> or <u><strong>HTML</strong></u> is the standard markup language for documents designed to be displayed in a web browser.</p>
    <br> <img src="coding.jpg" width="100%">
    <p style="margin-top:45px;">It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
    Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. 
    HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</body>

2.html

<!doctype html>
<html>
<head>
    <title>WEB1 - CSS</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>CSS</h2>
    <p>종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
        기본 파일명[2]은 style.css이다.        
        마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.        
        현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 
        또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.</p>
    <br> 
</body>

3.html

<!doctype html>
<html>
<head>
    <title>WEB1 - JavaScript</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>JavaScript</h2>
    <p>자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
        HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.        
        자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.        
        현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.</p>
    <p>
        1. 자바스크립트는 객체 기반의 스크립트 언어입니다.        
        2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.        
        3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.</p>
</body>

-웹의 역사: 1960년에 인터넷 등장. 1990년에 웹 등장. 1960년에는 핵 공격에도 견딜 수 있는 강인한 통신 시스템이 필요했다. 그렇게 생겨난 것이 중앙이 없는 특성의 인터넷이다. 웹은 스위스 제네바의 유럽입자 물리 연구소에서 강입자가속기라는 장치를 관리하려고 웹의 전신이 되는 프로그램을 사용함. 1990년에 CERN에서 인터넷을 사용하기 시작하면서 팀 버너스는 세계 최초의 웹 브라우저인 World Wide Web이라는 프로그램을 만든다. 팀 버너스와 그의 동료는 웹서버라는 프로그램을 만들고 그 프로그램이 설치되어 있는 컴퓨터에 info.cern.ch 라는 주소를 부여한다. 인터넷이 등장한 1960년 이래로 엘리트들만의 시스템이었던 인터넷이 1990년에 웹을 만나면서 대중화된다.

-인터넷이 동작하기 위해서는 최소 2댜의 컴퓨터가 필요하다. 각각 웹 브라우저, 웹 서버 프로그램을 탑재하고 둘은 인터넷으로 연결되어 있다. 웹브라우저가 설치된 컴퓨터는 인터넷을 통해 전기적인 신호를 웹 서버가 있는 컴퓨터에게 보낸다. 그 안에는 나는 index.html 파일을 원한다라는 정보가 담겨있다. (http://info.cern.ch/index.html 입력시) 그러면 info.cern.ch 에 해당되는 컴퓨터에 설치된 웹서버라는 프로그램이 하드디스크에서 index.html 이라는 파일을 찾아서 그것을 웹 브라우저가 설치된 컴퓨터에게 전기적 신호로 바꿔서 보낸다. 그 신호 안에는 index.html 이라는 파일 안에 저장되어있던 코드가 담겨 있다. 그 코드를 웹브라우저가 해석해서 화면에 표시하면 우리가 알고 있는 웹이 동작한다.

-직접 웹 서버를 운영하는 것은 쉽지 않다. 컴퓨터가 항상 켜져있어야 되고 인터넷이 끊기지도 않아야 한다. 웹서버 프로그램을 배워서 설치하고 잘 운영할 수 있어야 한다. 인터넷을 통해 우리의 정보를 외부로 보낼 수 있게 설정도 해야 한다. 이런일을 대행해 주는 회사가 있다. 인터넷에 연결된 컴퓨터 하나하나를 호스트라고 한다. 이런 컴퓨터를 빌려주는 사업을 호스팅이라고 한다. 요즘엔 클라우드라고 부르기도 한다. 호스팅 중에서 컴퓨터의 웹 서버와 같이 웹을 동작하기 위해 필요한 소프트웨어까지 설치해서 빌료주는 비즈니스를 웹 호스팅이라고 부른다. 예) 깃허브

깃허브는 개발자들이 자신의 소스코드를 안전하게 백업하고, 백업된 소스코드를 매개로 해서 개발자들끼리 협읍을 하기 위해 고안된 사이트이다. 이 사이트의 기능 중에 웹 호스팅이 있다.

-웹 호스팅 설정: github - settings-

우리가 파일을 업로드하면 코드가 웹 호스팅으로 업로드가 된다. 웹 호스팅 업체에서는 웹 호스팅에 설치된 웹 서버를 활성화한다. 그리고 컴퓨터에 도메인 이름을 부여한다. 이제 방문자가 도메인 주소로 접속하면 웹서버가 html 을 읽고 웹서버는 방문자에게 html 소스코드를 전송한다. 방문자의 웹브라우저에 웹사이트가 표시된다.