[생활코딩] 2일차_HTML & Internet

공부 기록/강의정리

[생활코딩] 2일차_HTML & Internet

코딩걈자 2022. 1. 23. 14:09

<HTML의 문법>

1. 속성

ex) <img> 태그만으로는 정보가 부족 => src 속성 추가(주소), width 등으로 크기 조절

<img src="image.jpg" width="100%">

속성은 태그의 이름만으로는 정보가 부족할 때 사용하며, 여러 개를 입력 가능하고 순서는 상관없다.

🔔이미지를 저작권 없이 사용할 수 있는 사이트 https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

2. 부모 자식과 목록

포함하는 태그를 '부모 태그' 포함된 태그를 '자식 태그'라고 부른다.

<li>: list(목록)

<ul>: Unordered List/ <li>의 부모 태그로 쓰임/ list를 그룹핑을 해주는 역할/ 순서가 없는 리스트를 제공한다.

<ol>: Ordered List/<li>의 부모 태그로 쓰임/ <ul>과 달리 목록에 자동으로 넘버링

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
</ul>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
</ol>

3. 문서의 구조

<title>: 웹페이지의 제목을 보여주며 표지와 같은 역할을 함

<meta charset="utf-8">

=> 두 태그 모두 본문에 대한 설명을 포함하는 태그 => <head> 안에 포함

<전체적인 코드의 틀>

<!DOCTYPE html>
<html>
    <head>
        <title>WEB</title>
        <meta charset="utf-8">  
    </head>
    <body>
    
    </body>
</html>

🔔 <!DOCTYPE html> : HTML은 버전별로 지원하는 태그가 다르기 때문에 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저에게 알려주는 역할의 선언문

4. <a> : 하이퍼링크

<속성>

href: 클릭시 이동 할 링크
target: 링크를 여는 방법
title: 링크의 제목

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" 
        target="_blank" title="WWW">W3C</a>

🔔W3C(World Wide Web Consoritum): WWW를 위한 표준을 개발하고 장려하는 국제 컨소시엄

HTML5

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research

www.w3.org

5. 웹사이트 만들기: 여러 html파일을 연결하기

하이퍼링크를 이용하여 각 파일을 연결하여 페이지 만들기

6. 여러 추가 기능

동영상 넣기 <iframe>: 인라인 프레임을 정의 / 현재 HTML 문서에 다른 문서(동영상, 지도 등)를 포함시킬때 사용

<iframe width="702" height="395" src="https://www.youtube.com/embed/7T7r_oSp0SE?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>

🔔자신이 넣고싶은 url의 동영상에서 소스코드 복사하여 사용!

댓글기능 : DISQUS, LiveRe 등과 같은 댓글 기능을 지원하는 서비스를 사용하여 적용 가능

라이브리

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

livere.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

채팅기능: tack 등 을 이용하여 가능

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

방문자 분석기: google analytics와 같은 서비스 이용 / 방문자 수, 나라, 언어, os의 종류 등을 알 수 있음

<웹서버>

1. Internet

인터넷(Internet)이란 여러 통신망을 하나로 연결한다는 의미의 ‘인터 네트워크(inter-network)’라는 말에서 시작되었으며, 이제는 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망을 의미한다.

2. Web의 시작

영국의 컴퓨터 과학자 팀 버너스리(Tim Berners-Lee)는 1990년 최초로 World Wide Web을 만들고 웹서버를 만들어 주소를 부여함.

"http://info.cern.ch/"

http://info.cern.ch

info.cern.ch

3. 서버와 클라이언트

4. 웹호스팅

서버를 직접 구현하면 시간과 전기등의 여러 어려움이 생기기 때문에 이를 해결하기 위한 서비스이다.

즉, 웹 공간을 임대(Hosting)하는 것을 웹 호스팅이라고 한다.

대표적인 저장소 호스팅 서비스 "GitHub": GitHub Pages 서비스를 이용하여 웹호스팅 가능

GitHub: Where the world builds software

GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

github.com

5. 웹서버

127.0.0.1 자신의 컴퓨터의 서버 포트 / localhost

🔔 크롬의 Web Server for Chrome을 이용하여 서버 실습

가장 기본적인 내용이라 다 알고 있다고 생각했음에도 불구하고 단순히 습관적으로 사용하던 태그들과 구조에 대하여 정리하고 이유를 생각하며 학습하니 HTML에 대한 이해도가 올라갔다.

또한 여러 기능을 제공해주는 사이트들에 대한 정보를 얻을 수 있는 시간이었다.

하지만 아직 익숙하지 못한 서버에 관한 공부는 틈틈이 계속 해야겠다..!

저작자표시 비영리 변경금지

'공부 기록 > 강의정리' 카테고리의 다른 글

[HTML] HTML의 주요 태그 (0)	2022.01.24
[생활코딩] 3일차_실습 정리 (0)	2022.01.24
[생활코딩] 2일차_CSS (0)	2022.01.23
[생활코딩] 1일차 (0)	2022.01.22
FrontEnd 개발 첫걸음 (0)	2022.01.21

현재글[생활코딩] 2일차_HTML & Internet

코딩하는 감자