생활코딩 WEBn - WEB1 Html 코스 정리록

생활코딩 WEBn의 WEB1 Html코스를 듣고 정리한 글입니다.


WEB1

Tag

  • <strong></strong> : 강조
  • <u></u> : 밑줄
  • <br> : 단순 줄 바꿈
    <p></p> : 단락의 의미, 정보로써 가치있는 html. 하지만 시각적으로는 자유도가 떨어짐.
    • CSS로 보완
    • <p style="margin-top:40px">
  • <h1></h1> ~ <h6></h6> : heading
  • <img stc="sea.jpg" width="100%">
  • <li></li> : 목록
    • ul : li의 부모 tag로, li를 그룹핑시켜줌. unordered list
    • ol : 마찬가지로 li의 부모 tag. ordered list
  • <tr> : 테이블 태그. 3대가 같이 다님.
  • 문서의 구조 (tag)
    • title
    • meta
    • html
    • head
    • body
  • <a></a> : 링크
    • href, target, title 의 속성을 지님.

통계에 기반한 학습

스크린샷 2020-03-05 오후 3 53 12

Internet VS WEB

  • Internet > WEB, FTP, email …
  • Internet
    • 중앙이 없음. 분산되어 있음. -> 하나가 사라져도 다른 것들이 대체 가능.
  • http://info.cern.ch/
    • home of the first website

서버와 클라이언트

  • Web browser = Client : 정보 요청
  • Web server = Server : 정보 응답
    • Web server 직접 구축
    • Web hosting : 맡기는 방법

웹 호스팅 (github page)

  • Static(html 파일만…) Web Hosting

웹 서버 운영하기

  • using bitnami MAMP stack
  • MAMP
    • M: Mac
    • A: Apache
    • M: MySQL
    • P: PHP

  • http://127.0.0.1:8080/index.html을 웹브라우저에 입력하면 웹브라우저는 같은 컴퓨터에 설치된 웹서버에게 index.html을 요청함.

  • 웹서버는 웹페이지를 저장하기로 약속된 디렉터리인 htdocs에서 index.html 파일의 코드를 읽어서 웹브라우저에게 전송함.

  • 웹서버는 코드를 해석해서 화면에 웹페이지를 표시합니다.

  • 같은 와이파이를 쓰고 있을 때, mac의 ip address로 접속하면

짜잔.


사용한 코드들
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>The World Wide Web (WWW), commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the Internet.[1][2] The resources of the WWW are transferred via the Hypertext Transfer Protocol (HTTP) and may be accessed by users by a software application called a web browser and are published by a software application called a web server.</p>
</body>
</html>

1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
  <p><a href="https://www.w3.org/TR/html51/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating web pages</strong> and <u>web</u> 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="sea.jpg" width="100%">
  <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>

2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]</p>

<p>CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.</p>
</body>
</html>

3.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
</body>
</html>