Full-Stack Study / WEB1-HTML.md

WEB1-HTML

2024. 2. 2. 18:50 조회

https://opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

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

opentutorials.org

코딩과 HTML

HTML- 웹페이지를 만드는 코드

HTML 코딩 실습 환경 준비

바탕화면에 폴더를 만들고 그 폴더를 VS 코드로 연다

메뉴 > open folder를 선택하고 파일찾기 화면에서 바탕화면으로 이동한다.

web 폴더를 만들고 폴더를 연다.

WEB 폴더에서 오른쪽 클릭해서 New File...을 선택합니다.
파일명은 1.html입니다.

파일의 내용은 Hello world

1.html을 웹브라우저로 연다.

웹 브라우저에서 단축키를 누른다.

윈도우 : Ctrl + O(알파벳)
맥 : Cmd + O(알파벳)

기본 문법 - 태크

강조표시 문법(Bold)

글 => 글

밑줄 문법(underline)

글 => 글

을 HTML에서는 태그라 부른다

앞을 열리는 태그 뒤를 닫히는 태그라 부른다. 닫히는 태그는 /를 붙인다.

태그는 중첩해서 사용 가능하다.

ex) creating web pages

제목 문법(heading)

h1~h6 숫자가 커지면 글씨가 작아진다.

통계에 기반한 학습

어떤 태그가 많이 쓰이는지 정리해놓은 사이트

https://advancedwebranking.com/html/

HTML Study - AWR SEO Guide

This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.

www.advancedwebranking.com

줄바꿈

새로운 줄 문법

br 태그는 닫는 태그가 없다. = 감싸야하는 컨테츠가 없기 때문에 태그를 닫지 않는다는 규칙

ex) img, input, br, hr, meta

단락을 표현하는 문법(paragraph)

단락

★ 단락을 표현할 때는 줄바꿈 태그 보다는 단락을 표현하는 태그인 p 태그가 더 좋은 선택이다.

=> 단락에 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해 주기 때문이다.

br 태그는 줄바꿈을 의미할 뿐이다.

최후의 문법 속성과 img

이미지를 넣는 태그(image)

<img>

<img>만 쓰면 동작하지 않는다 = 어떤 이미지를 불러올 지에 대한 정보가 부족하기 때문입니다.

속성(attribute)

img 태그에 source의 줄임말인 src를 붙인다.

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">

위의 코드에서 src가 바로 속성이다.

다운 받은 이미지를 속성에 넣고 싶을때

다운받은 이미지를 프로젝트 폴더에 위치시킨다

웹페이지 파일(1.html)과 같은 위치에 있는 이미지 파일이라면 src 속성의 값으로 이미지 파일의 이름만 적으면 된다.

이미지 크기 바꾸는 속성(width)

width의 값으로 숫자나 %를 사용하면 원하는 크기로 조정할 수 있다.

ex) width=100%

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="100%">

부모 자식과 목록

</parent>

(이런 태그는 없음 예시일 뿐)

parent 태그에 대해서 child 태그를 자식 태그라 한다.

또 반대로 child 태그에 대해서 parent 태그를 부모 태크라 한다.

아래 태그를 보면 p태그가 a 태그의 부모, a태크가 p태그의 자식이다.

<a href="https://opentutorials.org">opentutorials</a>

하지만 꼭 a태그가 자식 태그 혹은 p 태그가 부모 태그이어야 하는 것은 아니다.

목차 태그(list)

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

목차를 나눌때 쓰는 문법들(unorded list, orded list)

<ul>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ul>
<ul>
  <li>egoing</li>
  <li>k8805</li>
  <li>sorialgi</li>
</ul>

결과

1. HTML
2. CSS
3. JavaScript

egoing
k8805
sorialgi

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

결과

HTML
CSS
JavaScript

문서의 구조와 슈퍼스타들

우리가 만든 웹페이지 이름 만드는 문법(title)

<title>WEB1 - html</title>

title 태그는 검색엔진이 웹페이지를 분석할 때 중요한 태그이다.

영어가 아닌 문자로 웹페이지를 만들면 문자가 깨지는 경우가 있다.

UTF-8 이 웹페이가 저장된 방식

웹페이지가 UTF-8 방식으로 저장했다면 웹페이지를 열때도 같은 방식으로 해석해서 열어야한다.

웹페이지가 저장된 문자 표현 방식과 웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않을 때
웹브라우저는 저렇게 이상한 문자를 표시하게 됩니다.

<title>WEB1 - html</title>
<meta charset="utf-8">

이렇게 해야 해석하는 방식이 일치한다.

본문 태그와 본문을 설명하는 태그(body, head)

<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
</head>

<body>

본문

</body>

웹페이지가 HTML로 만들어졌다는 것을 나타내는 태그<!doctype html>

body 태그와 head 태그를 감싸는 태그 <html>

<!doctype html>
<html>

</html>

HTML 태그의 제왕

링크

a는 anchor(닻)의 약자이고 href는 HyperText Reference의 약자이다

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>

결과

Hypertext Markup Language (HTML)

target = "_blank"는 링크를 클릭했을 때 새창에서 페이지가 열리게 하는 속성이다

title = " "은 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능이다

툴팁: 마우스 포인터를 특정 텍스트나 이미지 같은 요소에 올릴때 나타나는 팁(설명)이다

웹사이트 완성

웹사이트 만들기

먼저 큰 제목 만들기

각 부분에 링크를 걸어서 다른 페이지와 연결 시키기

1.html 파일을 복제해서 index.html, 2.html, 3.html을 만든다

그리고 각각의 파일에 맞게 수정

결과물

원시웹

웹의 역사

인터넷을 여는 열쇠 : 서버와 클라이언트

웹 서버와 웹 클라이언트

웹서버 운영하기

내 컴퓨터에 웹서버를 설치해서 다른 컴퓨터에서 웹페이지를 볼 수 있도록 한다.

호스팅: 어떤 서비스를 빌려서 사용한다는 말이다.

웹호스팅: 외부의 서버를 빌려서 기능을 사용한다는 말을 의미한다.

회원님의 홈페이지(웹사이트)를 올려놓을 인터넷상의 공간을 임대해주는 서비스입니다.

컴퓨터에 웹서버라는 프로그램을 설치해야 한다.

ex) Apache, IIS, Nginx

VS code의 확장기능에서 Live Server을 설치

아래에 Go live를 누른다

Port : 5500이 표시된다.  성공적으로 웹서버가 실행되었다.

동시에  http://127.0.0.1:5500/ 주소로  웹페이지가 실행된다.

웹서버를 통해서 웹페이지를 여는 것과 파일 찾기를 통해서 웹페이지를 여는 것은 어떤 차이가 있을까?

주소 비교

파일 찾기로 열었을 때: file///Desktop/web/index.html

웹서버를 통해서 열었을 때: http://127.0.0.1:5500/index.html

http는 HyperText Transfer Protocol로 웹페이지를 주고받기 위한 통신규약이다.

127.0.0.1은 Internet Protocol Address로 인터넷에서 사용하는 주소이다.

IP 주소는 0.0.0.0부터 255.255.255.255까지 주소가 존재한다.

127.0.0.1은 내 컴퓨터 자신을 가리키는 특별한 주소이다

Port는 컴퓨터에 여러개의 서버가 작동하고 있을 때 서버를 구분하는 정보이다.

5500에서 동작하고 있는 웹 서버와 통신하게 된다.

IPv4 주소

다른 컴퓨터와 같은 네트워크를 사용하면서 ip address:port를 입력하면 내가 만든 사이트를 다른 컴퓨터에서 열수 있다.

수업을 마치며 123

부록: 코드의 힘

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

<p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="0" allowfullscreen></iframe>
  </p>

동영상에서 공유 버튼을 누르면 퍼가기나 embeded가 뜬다

소스코드가 나온다.

부록: 코드의 힘 - 댓글 기능 추가

DISQUS - https://disqus.com/

Disqus – The #1 way to build your audience

Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.

disqus.com

LiveRe - https://livere.com/

라이브리

소셜댓글 서비스, 무료설치, 체험, 활용사례, 프리미엄 이용안내 등.

livere.com

<div id="disqus_thread"></div>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://web1-47qtsqhdzb.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

이 코드를 추가하고 웹사이트를 보면 댓글 기능을 바로 활용하지 못한다 -> disqus를 바로 열지 못한다 -> 보안상의 이유

주소가 file로 시작한다 -> localhost 127.0.0.1/index.html로 바꿔주고 새로고침하면 열린다.

부록: 코드의 힘 - 채팅 기능 추가

tawk - https://www.tawk.to/

100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to

tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.

www.tawk.to

</> Widget Code

</p>
  <!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/57a72994c11fe69b0bd8fa90/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

이것도 localhost나 127.0.0.1을 사용해서 해야한다.

부록: 코드의 힘 - 방문자 분석기

Google Analytics - https://analytics.google.com/analytics/web/provision/?authuser=0#/provision

Redirecting...

analytics.google.com

'Full-Stack Study' 카테고리의 다른 글

WEB - JavaScript (1)	2024.05.06
WEB2 - CSS (0)	2024.04.02