WEB1- HTML & Internet - YouTube
유튜브 '생활코딩' 강의를 듣고 정리했다.
[ WEB1 - 9. 줄바꿈 : br vs p]
'html new line tag' 검색을 통해 줄바꿈 찾기
<br> : 줄바꿈 , 열리는 태그와 닫히는 태그가 따로 존재하지 않음
<br><br>을 통해 단락 처럼 구분 할 수 있음
'html paragraph tag' 검색을 통해 단락 표현 찾기
<p></p> : 단락 표현하기
br태그는 단순한 줄바꿈인 반면에, p태그를 사용해 단락의 처음과 끝을 알 수 있다. 이를 통해 단락의 구간을 의미론적으로 표현 할 수 있다.
-> 정보로서 더 가치있는 HTML이 된다는 것의 중요성
but br태그는 원하는 만큼 줄바꿈을 할 수 있지만, p태그는 정해진 여백만큼만 벌어짐
이는 css 문법(margin)을 통해 해결 가능
[ WEB1 - 10. html이 중요한 이유]
기초의 중요성
편집기를 이용해 글을 쓴다는 것은, 컨텐츠를 만든다는 것은
내부적으로 HTML코드를 생산하는 행위임
[ WEB1 - 11. 최후의 문법 속성 & img]
<img> : 이미지를 웹페이지에 포함시킴 -> 이것만 하면 나타나지 않음 == 태그의 이름만으로는 정보가 부족
<img src="이미지의 주소">
Beautiful Free Images & Pictures | Unsplash
위 사이트에서 저작권에 구애받지 않고 사진 사용 가능
작업하는 파일 안에 사진을 다운로드 받고, 크기를 100%로 지정해 자동으로 100% 크기에 맞게 이미지의 사이즈가 바뀐다.
<img src="coding.jpg" width="100%">
속성(Attribute) 이라고 부름, 속성의 위치는 상관 없음.
태그가 태그의 이름만으로 정보가 부족할때, 속성을 통해 더 많은 의미를 부가할 수 있다.
[ WEB1 - 12. 부모자식과 목록]
<parent>
<child></child>
</parent>
: 위와 같이 포함하는 태그를 부모태그, 포함된 태그를 자식 태그 라고 부른다.
<li> : 목차, 리스트 태그
<ul></ul> : li의 부모태그, 항목들이 어디서부터 어디까지가 서로 연관된 항목인지 경계를 짓기 위한 태그
-> li 태그와 ul 태그는 반드시 서로를 갖고 있음
ol = Ordered List : 자동으로 넘버링
ul = Unordered List
[ WEB1 - 13. 문서의 구조와 슈퍼스타들]
---본문을 설명하는 코드
<title></title> : 웹페이지의 제목 표시
<meta charset="utf-8"> : utf-8 로 문서를 읽어라
** 본문은 <body>라는 태그로 묶고, 본문을 설명하는 코드는 <head> 태그로 묶어야 한다.
** <head></head> : 고위직 태그(body, head)를 감싸는 태그
** <!doctype html>: 이 문서는 html 이다.
[ WEB1 - 14. HTML 태그의 제왕]
'html specification'검색을 통해 설명서 보기
<a></a> : 하이퍼링크
h = hyperlink
ref = 참조
속성
- target="_blank"를 통해 새로운 창에서 열기
- title="html" 를 통해 툴팁이 뜨게 함
[ WEB1 - 15. 웹사이트 완성]
첫번째 사진과 같이 구현하기 위해 각각의 목록에 링크를 걸어주었고, 해당 페이지를 폴더안에 만들었다.
[ WEB1 - 16. 원시웹]
인터넷이 도시라면 웹은 그 도시위에 있는 건물 하나
인터넷이 운영체제라면 웹은 그 운영체제 위에 있는 프로그램 하나
-> 인터넷이라는 전체 안에 웹이라는 부분이 존재(인터넷 안에 웹과 동급인 FTP, email 등이 존재함)
인터넷은 수많은 통신망이 분산해서 전화국과 같은 역할을 하기 때문에 하나가 사라져도 문제 없는 통신 시스템
웹을 통해 인터넷의 대중화가 되었다.
[ WEB1 - 17. 인터넷을 여는 열쇠 : 서버와 클라이언트]
웹브라우저가 깔려있는 컴퓨터는 정보를 요청한다.
웹서버가 설치되어 있는 컴퓨터는 정보를 응답한다.
두 대의 컴퓨터가 정보를 주고받을 때,
정보를 요청하는 컴퓨터를 클라이언트 컴퓨터, 응답하는 컴퓨터를 서버 컴퓨터라고 부른다.
사용자가 게임을 하는 컴퓨터 혹은 스마트폰에 설치되어 있는 프로그램은 게임 클라이언트,
게임 회사가 가지고 있는 서버 컴퓨터에 설치되어 있는 컴퓨터는 게임 서버
사용자가 사용하는 채팅 프로그램을 인터넷이라는 관점에서 채팅 클라이언트,
채팅 회사가 가지고 있는 서버에 설치된 프로그램을 채팅 서버
웹서버를 사용한다는 것
= '내 컴퓨터에 있는 문서를 전세계 누구나 인터넷이 연결되어 있는 컴퓨터에 웹브라우저를 깔면 가져다가 볼 수 있다.'
[ WEB1 - 18. 웹호스팅 : github page]
호스트 : 인터넷에 연결된 컴퓨터
호스트를 빌려준 회사 : 웹호스팅 업체
깃허브 : 오픈소스들이 만들어지는 곳
Repository : 소스코드를 저장할 저장소
Settings : 현재 저장소 설정
- Pages - None(main선택) == (web hosting 기능을 활성화 시켜줌)
Actions : 저장소에서 일어나는 작업들이 어떻게 일어나고 있는지 보여줌
작업한 파일을 업로드하면 깃허브에 있고, 웹서버가 활성화되면서 깃허브가 주소를 알려준다.
방문자에게 알려주면 주소창에 입력하고 웹서버가 파일을 읽어 방문자에게 전달해주면 방문자가 파일을 볼 수 있다.
'Web' 카테고리의 다른 글
| [WEB : 생활코딩] JavaScript - 1. 수업소개 ~ 5. HTML과 JS의 만남 (콘솔) (0) | 2022.05.11 |
|---|---|
| 웹페이지 기획 구성 (0) | 2022.05.08 |
| [WEB : 생활코딩] CSS – 7. CSS 선택자의 기본 ~ 9. 박스 모델 써먹기 (0) | 2022.05.08 |
| [WEB : 생활코딩] CSS – 1. 수업소개 ~ 6. CSS 속성을 스스로 알아내기 (0) | 2022.05.08 |
| [WEB : 생활코딩] HTML & Internet - 1.수업소개 ~ 8.통계에 기반한 학습 (0) | 2022.04.02 |