웹과 HTML

월드 와이드 웹(WWW)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.

웹서비스(WEB service)란? :

https://www.fasdjflksd/index.html

https://서버주소/파일이름

크롬 브라우저 : html 문서를 읽어 보여주는 역할도 함

IP(Internet Protocol) (172.217.27.78)

8비트(0 ~ 255)까지의 숫자로 구성된 숫자의 집합, 각자가 가지고 있는 주소와 동일하다.

V4, V6 , 컴퓨터가 너무 많아지면 할당값이 조금씩 늘어나서 V6를 쓰게 될것임

도메인(Domain) (google.com)

네트워크상의 컴퓨터를 식별하는 호스트명

URL(Uniform Resuorce Locator)

https://www.google.co.kr/search?q=구글

도메인 + 경로, 실제로 해당 서버에 저장된 자료의 우치

static web :미리 만들어놓은 HTML 파일을 찾아서 줌<-> dynamic web : 서버 사용자가 요청하면 템플릿으로 HTML 파일 생성

W3C : 웹표준 규약 , HTML CSS JS

WHATWG : 다른 웹표준 규약 최근 승리함

HTML : Hyper Text Markup Language : 하이퍼 링크를 통해 문서간의 연결 뼈대를 만듬, 웹페이지를 작성하기 위한 역할 표시 언어

HTML 파일 : HTML 로 작성된 문서파일

doctype 요소
HTML 요소
- head 요소
- body 요소
  - 브라우저 화면에 나타나는 정보로 실제 내용에 해당

HTTPS(Hyper Text Transfer Protocol) : Hyper Text를 주고 받는 규 칙

Cascading Style Sheet (CSS): 모양이나 위치를 바꾸는 역할, 꾸며줌

JavaScript :

HTML 문서의 기본 구조

&#38;#60;!DOCTYPE html&#38;#62; &#38;#60;!--DOCTYPE 선언부 사용하는 문서의 종류를 선언, 보통 html을 사용한다.--&#38;#62;
&#38;#60;html lang=&#34;ko&#34;&#38;#62; &#38;#60;!--html 요소, html 문서의 최상위 요소로 문서의 root를 뜻한다. head와 body 부분으로 구분된다.--&#38;#62;
&#38;#60;head&#38;#62; &#38;#60;!--head 요소 문서 제목, 문자코드(인코딩)와 같이 해당 문서 정보를 담고 있으며, 브라우저에 나타나지 않는다. CSS 선언 혹은 외부 로딩 파일 지정 등을 작성합니다. og와 같은 메타태그 선언이 이뤄집니다.--&#38;#62;
	&#38;#60;meta charset=&#34;UTF-8&#34;&#38;#62;
	&#38;#60;title&#38;#62;Document&#38;#60;/title&#38;#62;
&#38;#60;/head&#38;#62;
&#38;#60;body&#38;#62;&#38;#60;!--body 요소 브라우저 화면에 나타나는 정보로 실제 내용에 해당한다.--&#38;#62;

&#38;#60;/body&#38;#62;
&#38;#60;/html&#38;#62;

html 문서 예시 (intro.html)

&#38;#60;!-- 주석 내용 ctrl+/로 자동 생성 가능--&#38;#62;
&#38;#60;!-- 요소(Element) : 태그와 내용으로 구성되어 있으며, 대소문자 구별안하지만,
    보통 소문자로 작성, 요소간의 중첩도 가능하다 --&#38;#62;
&#38;#60;!-- 여는태그-&#38;#62; &#38;#60;h1&#38;#62;contents&#38;#60;/h1&#38;#62;&#38;#60;- 닫는 태그 --&#38;#62;
&#38;#60;!-- self-closing element &#38;#60;img src=&#34;url&#34;/&#38;#62; 닫는 태그가 없는 태그, 
    이미지, 다른 스크립트 불러오는 태그 등이 있다.--&#38;#62;
    &#38;#60;!-- 속성(Attribute) 태그에는 속성이 지정될수 있다. href = 속성명, &#34;google.com&#34; = 속성값 &#38;#60;a href=&#34;google.com&#34;/&#38;#62; 이건 하이퍼 텍스트 예시 속성명=&#34;속성값&#34;은 띄어쓰지 않는다.
        속성값은&#34;&#34;(큰 따옴표) 안에 사용!, id : 유일한 식별자, class: 스타일 시트에  --&#38;#62;
&#38;#60;!-- DOM트리 : body태그와 h1태그는 부모와 자식 관계 (내부에 속해 있음)
h1태그와 ul태그(순서없는 리스트용)는 형제 관계(같은 곳에 속해 있음) --&#38;#62;
&#38;#60;body&#38;#62;
	&#38;#60;h1&#38;#62;웹문서&#38;#60;/h1&#38;#62;
	&#38;#60;ul&#38;#62;
		&#38;#60;li&#38;#62;HTML&#38;#60;/li&#38;#62;
		&#38;#60;li&#38;#62;CSS&#38;#60;/li&#38;#62;
	&#38;#60;/ul&#38;#62;
&#38;#60;/body&#38;#62;
&#38;#60;!-- 시맨틱태그 : ex) div 태그 : 영역을 나누는 태그 &#38;#60;div&#38;#62; &#38;#60;/div&#38;#62; 공간 분할 의미 외에는 없지만, 컴퓨터에게 의도한 바를 알려줄 수 있다.
개발자가 의도한 요소의 의미가 보임, 유지보수가 쉬워짐, SEO : 검색 엔진 최적화 에 쓰임 article, footer, header 등이 추가로 있음--&#38;#62;
&#38;#60;!-- h1태그는 왠만하면 한페이지에 1개만 쓰자 글자 크기를 바꾸고싶으면 CSS를 활용하자--&#38;#62;
&#38;#60;h1&#38;#62;여기는 h1 중요한 제목입니다.&#38;#60;/h1&#38;#62;
&#38;#60;p&#38;#62;상세한 본문은 &#38;#60;b&#38;#62;여기에 굵게&#38;#60;/b&#38;#62; 표시 됩니다&#38;#60;/p&#38;#62; &#38;#60;!--p : 본문용 태그 b(시멘틱 태그 의미 없음, 단순 강조), strong(시멘틱 태그 의미 추가, SEO가 분석함): 굵은 글씨로--&#38;#62;
&#38;#60;ol&#38;#62;순서가 있는 ol 태그 &#38;#60;!--ol&#38;#62;li*3 하면 자동으로 3개가 속해있는 태그가 생성됨, ol + li*3라고 하면 ol과 li*3가 병렬적으로 생성됨 Emmet.io 참조--&#38;#62;
    &#38;#60;li&#38;#62;원소1&#38;#60;/li&#38;#62;&#38;#60;!--ol 태그 내에 요소를 적음--&#38;#62;
    &#38;#60;li&#38;#62;원소2&#38;#60;/li&#38;#62;
&#38;#60;/ol&#38;#62;
&#38;#60;ul&#38;#62;순서가 없는 ul 태그 
    &#38;#60;li style=&#34;border-style: dotted&#34;&#38;#62;원소1&#38;#60;/li&#38;#62; &#38;#60;!-- 내부 속성 태그로 스타일 등을 바꿀 수 있음 주로 CSS가 해주는 역할임--&#38;#62;
    &#38;#60;li&#38;#62;원소2&#38;#60;/li&#38;#62;
&#38;#60;/ul&#38;#62;
&#38;#60;h2&#38;#62;222&#38;#60;/h2&#38;#62;
&#38;#60;h3&#38;#62;3333&#38;#60;/h3&#38;#62;
&#38;#60;a href=&#34;https://naver.com&#34;&#38;#62;&#38;#60;img src=&#34;http://imgnews.naver.net/image/5002/2017/09/03/0000977925_001_20170903211801431.jpg&#34; alt=&#34;&#34;&#38;#62;&#38;#60;/a&#38;#62;&#38;#60;!--a : 하이퍼 링크 태그href=연결될 경로를 적어야함 닫는 태그 있어야함--&#38;#62;
&#38;#60;!--미디어 태그들--&#38;#62;
&#38;#60;!-- 이미지 태그는 src 경로의 이미지를 불러옮--&#38;#62;
&#38;#60;!-- &#38;#60;video src=&#34;&#34;&#38;#62;&#38;#60;/video&#38;#62; &#38;#60;iframe&#38;#62;     등--&#38;#62;

시맨틱태그의 종류

태그	설명
header	헤더 (문서 전체나 섹션의 헤더)
nav	내비게이션
aside	사이드에 위치한 공간으로, 메인 콘텐츠와 관련성이 적은 콘텐츠에 사용
section	문서의 일반적인 구분으로 컨텐츠의 그룹을 표현하며, 일반적으로 h1~h6 요소를 가짐.
article	문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역(포럼/신문 등의 글 또는 기사)
footer	푸터 (문서 전체나 섹션의 푸터)

HTML 예시 2 (index.html)

&#38;#60;!DOCTYPE html&#38;#62;
&#38;#60;html lang=&#34;en&#34;&#38;#62;
&#38;#60;head&#38;#62;
    &#38;#60;meta charset=&#34;UTF-8&#34;&#38;#62;
    &#38;#60;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&#38;#62;
    &#38;#60;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;ie=edge&#34;&#38;#62;
    &#38;#60;title&#38;#62;Document&#38;#60;/title&#38;#62;
&#38;#60;/head&#38;#62;
&#38;#60;body&#38;#62;
    &#38;#60;h1&#38;#62;프로그래밍 교육&#38;#60;/h1&#38;#62;
    &#38;#60;a href=&#34;#python&#34;&#38;#62;&#38;#60;img src=&#34;https://cdn.inflearn.com/wp-content/uploads/python-1.png&#34; width=&#34;50&#34; height=&#34;50&#34;&#38;#62;&#38;#60;/a&#38;#62; &#38;#60;!--inline 줄바꿈을 안함--&#38;#62;
    &#38;#60;a href=&#34;#web&#34;&#38;#62;&#38;#60;img src=&#34;images/web.png&#34; width=&#34;50&#34; height=&#34;50&#34;&#38;#62;&#38;#60;/a&#38;#62; &#38;#60;!--하이퍼링크 태그로 해당 ID 값으로 이동할 수 있음--&#38;#62;
    &#38;#60;a href=&#34;intro.html&#34;&#38;#62;웹사이트&#38;#60;/a&#38;#62;&#38;#60;!--다른 문서 경로도 이동 가능--&#38;#62;
    &#38;#60;hr&#38;#62; &#38;#60;!--수평선 긋기 쓰면 안좋음, div로 구별하는것이 좋음--&#38;#62;
    &#38;#60;h2 id=&#34;python&#34;&#38;#62;&#38;#60;a href=&#34;https://docs.python.org/ko/3/tutorial/index.html&#34; target=&#34;_blank&#34;&#38;#62;파이썬&#38;#60;/a&#38;#62;&#38;#60;/h2&#38;#62;&#38;#60;!--태그의 순서는 의미 없음--&#38;#62;

    &#38;#60;h3&#38;#62;Number type&#38;#60;/h3&#38;#62;

    &#38;#60;p&#38;#62;파이썬에서 숫자형은 아래와 같이 있다.&#38;#60;/p&#38;#62;&#38;#60;!--block 한줄을 전부 포함한 범위--&#38;#62;
    &#38;#60;ol&#38;#62;
        &#38;#60;li&#38;#62;int&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;float&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;complex&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;&#38;#60;del&#38;#62;str&#38;#60;/del&#38;#62;&#38;#60;/li&#38;#62; &#38;#60;!--삭선 긋기--&#38;#62;
    &#38;#60;/ol&#38;#62;

    &#38;#60;h3&#38;#62;Sequence&#38;#60;/h3&#38;#62;
    &#38;#60;p&#38;#62;파이썬에서 시퀀스는 아래와 같이 있다.&#38;#60;/p&#38;#62;
    &#38;#60;p&#38;#62;&#38;#60;strong&#38;#62;시퀀스는 for문을 돌릴 수 있다!!&#38;#60;/strong&#38;#62;&#38;#60;/p&#38;#62;
    &#38;#60;ol&#38;#62;
        &#38;#60;li&#38;#62;str&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;list&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;tuple&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;range&#38;#60;/li&#38;#62;
    &#38;#60;/ol&#38;#62;
    &#38;#60;hr&#38;#62;
    &#38;#60;h2 id=&#34;web&#34;&#38;#62;&#38;#60;a href=&#34;https://developer.mozilla.org/en-US/&#34;&#38;#62;웹&#38;#60;/a&#38;#62;&#38;#60;/h2&#38;#62;
    &#38;#60;h3&#38;#62;기초&#38;#60;/h3&#38;#62;
    &#38;#60;ul style=&#34;list-style-type: circle&#34;&#38;#62; &#38;#60;!--list의 bullet 모양 바꾸기--&#38;#62;
        &#38;#60;li&#38;#62;HTML&#38;#60;/li&#38;#62;
        &#38;#60;li&#38;#62;CSS&#38;#60;/li&#38;#62;
&#38;#60;/ul&#38;#62;
&#38;#60;iframe width=&#34;560&#34; height=&#34;315&#34; src=&#34;https://www.youtube.com/embed/I_2D8Eo15wE&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&#34; allowfullscreen&#38;#62;&#38;#60;/iframe&#38;#62;
&#38;#60;!-- html안에 또다른 html을 넣을때 iframe 씀 유튜브에서 만든 웹페이지를 끌어다가 놓은거임 왠만하면 쓰지말자--&#38;#62;
&#38;#60;!--html 표만들기, table 태그 활용--&#38;#62;
&#38;#60;table&#38;#62;
        &#38;#60;thead&#38;#62;
            &#38;#60;th&#38;#62;&#38;#60;/th&#38;#62;
            &#38;#60;th&#38;#62;월&#38;#60;/th&#38;#62;
            &#38;#60;th&#38;#62;화&#38;#60;/th&#38;#62;
            &#38;#60;th&#38;#62;수&#38;#60;/th&#38;#62;
        &#38;#60;/thead&#38;#62;
        &#38;#60;tbody&#38;#62;
            &#38;#60;tr&#38;#62;
                &#38;#60;td&#38;#62;1&#38;#60;/td&#38;#62;
                &#38;#60;td rowspan=&#34;2&#34;&#38;#62;2&#38;#60;/td&#38;#62;
                &#38;#60;td colspan=&#34;2&#34;&#38;#62;3&#38;#60;/td&#38;#62;
            &#38;#60;/tr&#38;#62;
            &#38;#60;tr&#38;#62;
                &#38;#60;td&#38;#62;1&#38;#60;/td&#38;#62;
                &#38;#60;td&#38;#62;2&#38;#60;/td&#38;#62;
                &#38;#60;td&#38;#62;3&#38;#60;/td&#38;#62;
            &#38;#60;/tr&#38;#62;
        &#38;#60;/tbody&#38;#62;
&#38;#60;/table&#38;#62;

&#38;#60;h3&#38;#62;음악페스티벌 타임테이블을 만들어봅시다.&#38;#60;/h3&#38;#62;
&#38;#60;h1&#38;#62;2019 타임테이블&#38;#60;/h1&#38;#62;

&#38;#60;table&#38;#62;
    &#38;#60;thead&#38;#62;
        &#38;#60;th&#38;#62;TIME&#38;#60;/th&#38;#62;
        &#38;#60;th&#38;#62;INDOOR&#38;#60;/th&#38;#62;
        &#38;#60;th colspan=&#34;2&#34;&#38;#62;OUTDOOR&#38;#60;/th&#38;#62;
    &#38;#60;/thead&#38;#62;
    &#38;#60;tbody&#38;#62;
        &#38;#60;tr&#38;#62;
            &#38;#60;td&#38;#62;&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;소극장&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;잔디마당&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;대공연장&#38;#60;/td&#38;#62;
        &#38;#60;/tr&#38;#62;
        &#38;#60;tr&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;10:00&#38;#60;/td&#38;#62;
            &#38;#60;td  style=&#34;border: 2px solid red&#34; rowspan=&#34;2&#34;&#38;#62;안녕하신가영&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;10CM&#38;#60;/td&#38;#62;
        &#38;#60;/tr&#38;#62;
        &#38;#60;tr&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;13:00&#38;#60;/td&#38;#62;

            &#38;#60;td rowspan=&#34;2&#34; style=&#34;border: 2px solid red&#34;&#38;#62;선우정아&#38;#60;/td&#38;#62;
            &#38;#60;td rowspan=&#34;2&#34; style=&#34;border: 2px solid red&#34;&#38;#62;참깨와 솜사탕&#38;#60;/td&#38;#62;
        &#38;#60;/tr&#38;#62;
        &#38;#60;tr&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;15:00&#38;#60;/td&#38;#62;
            &#38;#60;td&#38;#62; &#38;#60;/td&#38;#62;

        &#38;#60;/tr&#38;#62;
        &#38;#60;tr&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;17:00&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;크러쉬&#38;#60;/td&#38;#62;
            &#38;#60;td&#38;#62;&#38;#60;/td&#38;#62;
            &#38;#60;td style=&#34;border: 2px solid red&#34;&#38;#62;폴킴&#38;#60;/td&#38;#62;
        &#38;#60;/tr&#38;#62;
    &#38;#60;/tbody&#38;#62;    
&#38;#60;/table&#38;#62;

&#38;#60;/body&#38;#62;
&#38;#60;/html&#38;#62;

HTML form 예시(subway.html)
```HTML
<!DOCTYPE html>

Document

FORM

주문서를 작성해주세요.

```

ROADVIRUSHN

Categories

Recent views

HTML 개념

웹과 HTML

FORM

1. 샌드위치 선택

2. 사이즈 선택

3. 빵 선택

4. 야채/소스

ROADVIRUSHN

▶ COMPUTER_SCIENCE

▶ WEB

▶ ETC

▶ AI

Recent views

웹과 HTML

FORM

1. 샌드위치 선택

2. 사이즈 선택

3. 빵 선택

4. 야채/소스