개요
HTML, CSS, JS가 합쳐져 있는 강의를 듣는데 개인적으로 HTML과 CSS에 대한 지식이 부족함이 느껴져 먼저 생활코딩의 HTML, CSS, JS 강의를 수강하려 한다.
License
Creative Commons license
WEB1 - HTML & Internet 4.
HTML의 장점
1. 쉽다.
2. 중요하다.
3. Public domain이다.
WEB1 - HTML & Internet 5.
Editor = VScode로 대체
WEB1 - HTML & Internet 6.
Tag = 현실의 개념을 통해 비유적으로 설명하는 것
<Strong>열리는 태그 </Strong>닫히는 태그
<Strong> = 강조
<u> = 밑줄
WEB1 - HTML & Internet 7.
난이도와 중요도는 비례하지 않는다. 쉬울수록 오히려 더 중요할 수 있다.
WEB1 - HTML & Internet 8.
https://www.advancedwebranking.com/seo/html-study/
전세계 모든 웹페이지들이 몇개의 태그로 구성되어있는지, 어떤게 가장 많이 쓰이는지 나타나 있다.
쉬운것, 기초적인 것이 창조의 원천이다.
WEB1 - HTML & Internet 9.
단락을 표현하는 태그 = <p></p>
줄바꿈 태그 = <br>
둘 다 줄바꿈을 해주지만 이 중 <p></p> 태그가 정보로써 더 중요하다.
WEB1 - HTML & Internet 10.
태그를 알고 적절하게 사용하면 검색엔진에 더 쉽게 노출되게 할 수 있다.
또한 스크린 리더 등의 파일을 통해 시각적으로 웹페이지를 이용하기 어려운 분들에게 도움을 줄 수 있다.
WEB1 - HTML & Internet 11.
이미지를 추가하는 태그 = <img>
하지만 태그의 이름만으로는 정보가 부족하다.
<img src="coding.jpg" width="100%">
위와 같이 표현된 내용을 속성(attribute)이라고 한다. (속성의 위치는 상관이 없다)
속성은 태그의 이름만으로는 정보가 부족할 때 속성을 통해 정보를 보충해준다.
https://unsplash.com/
저작권 없는 이미지 사이트
WEB1 - HTML & Internet 12.
부모, 자식 관계에 해당하는 태그들이 있다. ex) <li></li>, <ul></ul>
<li>와 같은 항목들은 그 항목이 어디서부터 어디까지가 서로 연관된 항목인지를 경계짓기 위한
부모 태그가 필요하다.
li태그는 반드시 부모태그를 가지고 있고 부모태그인 ul 은 반드시 자식 태그를 가지고 있다.
<ol> = 넘버링된다 l = list, o = ordered, u = unordered
WEB1 - HTML & Internet 13.
<title></title> = 웹페이지의 제목을 명시적으로 알려줄 수 있으며 검색 엔진이 주요하게 참조한다.
<meta charset="utf-8"> = 문서의 내용을 UTF-8로 읽어라 라고 브라우저에게 말한 것.
<head></head> = 본문을 설명하는 태그.
<body></body> = 본문.
<html></html> = head와 body태그를 감싸는 고위태그.
<!doctype html> = 이 문서는 html로 읽는다.
WEB1 - HTML & Internet 14.
<a> = anchor = 링크를 나타낸다.
<a href="https://..."> = 링크 걸기.
<a target="_blank"> = 링크된 문서를 새 탭에서 오픈.
<a title="설명"> = 마우스 커서를 올리면 나오는 도움말.
WEB1 - HTML & Internet 15.
<a> 링크를 통해서 페이지를 이동할 수 있다.
WEB1 - HTML & Internet 16.
인터넷은 Web을 포함한다. (FTP, EMAIL 등도 포함)
WEB1 - HTML & Internet 17.
두대의 컴퓨터가 정보를 주고 받는 것이 웹의 본질이다.
정보를 요청하는 쪽을 client, 정보를 주는 것을 server라고 한다.
WEB1 - HTML & Internet 18.
웹 호스팅을 github를 이용해 사용하는 방법-
WEB1 - HTML & Internet 19.
자신의 컴퓨터로 서버를 여는 방법. 이후는 HTML 내용이 아니라 pass
'Computer science > Etc' 카테고리의 다른 글
| MIT 6.00 4회차 강의후기 (0) | 2022.04.11 |
|---|---|
| MIT 6.00 3회차 강의후기 (0) | 2022.04.11 |
| MIT 6.00 2회차 강의후기 (0) | 2022.04.11 |
| MIT 6.00 1회차 강의후기 (0) | 2022.04.11 |
| 생활코딩 Web2 - CSS (0) | 2022.04.11 |
