-
쓰기 좋은 문단이 없어서 내가 좋아하는 노래 가사를 사용했다.
(1) WEB1 - 9.줄바꿈 : br vs p - YouTube
줄바꿈을 했는데 웹페이지에서는 반영이 안된다.
- 줄바꿈 태그(html new line tag): 새로운 줄을 표현할 때 사용
: <br>(atom에서는 줄바꿈 안 해도 괜찮음)
- <br>을 사용할 수록 여백이 강조된 단락을 표현할 수 있다.
- <h>는 열리는 태그, 닫히는 태그가 존재했지만 <br>은 닫는 게 없다.
<br> 한 번 사용하면 한 줄이 떨어진다.
<br>을 여러 개 쓸 수록 여백이 강조된 단락을 표현할 수 있다.
2. html paragraph tag : 단락 바꿔줌
:<p>
-<p> </p> 함께 써주어야 한다.
-<br>과 같지만 태그는 다르고 맥락상 <p>가 더 좋은 결정이다.
(이유: 정보로서 가치있게 만들 수 있다.)\
-<p>는 <br>에 비해 자유도가 떨어진다.
+ CSS 에서는 <p style="margin-top:40px;" : 여백과 여백이 40픽셀만큼 떨어짐
컨텐츠를 만드는 것은 내부적으로 HTML 코드를 생산하는 행위이다.
제목이 'coding'인 게 검색엔진에서 위에 찾을 수 있을 것이다. 제목이 coding 이라는 것은 <h3>coding</h3>
이미지로 글을 쓰면 검색 엔진에서는 찾기 어렵다.
개방성(접근성) **이 중요하다. 웹페이지를 예쁘게 만들고 싶어서 이미지로 만든다면 이는 개방적이지 못한 것이다.
(1) WEB1 - 11. 최후의 문법 속성 & img - YouTube
1. 사진 넣기- 이미지를 웹페이지에 포함시킬 때 사용하는 태그 : <img src="">
img 만 쓰면 정보가 부족하다.
ex) <img src="love.jpg" width="100%">
""사이에 이미지 있는 주소를 넣어주자.
이미지 얻기 좋은 사이트: Beautiful Free Images & Pictures | Unsplash
이미지 크니까 크기 바꿔주자.
<img src="love.jpg" width="100%"> 로 속성 보기
속성은 위치가 상관 없다. 태그의 이름만으로 정보가 부족할 때 의미 추가 가능하다.
(1) WEB1 - 12. 부모자식과 목록 - YouTube
태그가 서로 포함 관계로 연관되어 있는 경우 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식태그 라고 한다.
<li>, </li>: 목차 만들어주는 태그
ctrl 누르고 클릭하면 한 번에 입력 가능
<ul>, </ul>: 구분해줌 (보기 쉽게 + tab키로 들여쓰기)
li 태그는 반드시 부모 태그를 가지고 있고 부모태그인 ul 태그는 자식 태그를 가지고 있다.
리스트 순서를 수정하고 싶은 경우 ul을 ol로 바꾸고 리스트 숫자를 지워주면 자동으로 숫자가 넘버링 된다.
ol 과 ul의 공통인 l 은 list의 약자.
ol= ordered list
ul= unordered list
(1) WEB1 - 13. 문서의구조와 슈퍼스타들 - YouTube
<title>, </title>: 웹페이지의 제목을 사용자에게 명시적으로 알려주고 검색엔진은 표지로서 활용한다.
제목에 한국어를 적어주면 출력 결과가 다르다. 글씨 그대로 컴퓨터에 저장되는 것이 아니기 때문이다.
utf-8이라는 방식으로 저장되므로 웹페이지를 열 때 utf-8로 열라고 말해주어야 한다.
이 때 사용하는 태그는 <meta charset="utf-8"> ---> 글씨 안 깨짐
본문과 본문을 설명하는 태그로 나누어볼 수 있는데, 본문은 <body>, </body>f로 묶어서 표현한다.
바디를 설명하는 부분은 <head>, </head>로 묶는다.
최고위층 태그는 <html>, </html>이다. <head>위에 써주고, <html> 위에는 관용적으로 <!doctype html>이라고 써준다.
(1) WEB1 - 14. HTML 태그의 제왕 - YouTube
Hyper Text - <a>, </a>:링크
사용설명서-html specification
+ 어디에 닻을 내릴 지 주소를 복사해서 <a href=""> 를 해주면 링크가 걸린다.
새 탭을 열고 싶은 경우 trage="_blank" title="html5 specification">
으로 하면 툴도 함께 뜬다.
(1) WEB1 - 15. 웹사이트 완성 - YouTube
web 클릭하면 index.html 나오게
1.html 하면 1.html..나오게 해보자.
전 강의에서 배운 링크 넣기를 이용하고 1.html을 복사해서 2.html, 3.html, 4.index.html을 만들 수 있다.
(1) WEB1 - 16. 원시웹 - YouTube
인터넷과 웹은 다르다.
인터넷이 도시라면 웹은 도시 위에 건물이다.
인터넷이라는 전체 안에 웹이 존재한다.
웹의 고향은 스위스이다.
1980년 '팀 버너스 리'라는 사람이 입자 연구소에서 Enquire을 만들었다.
1990년 10월에 웹페이지를 만드는 편집기를 만들었다.
1990년 11월 world wide web을 만들었다.
1990년 12월 컴퓨터에 info.cern.ch라는 주소를 부여했다. 여기에서 웹이 시작했다. 팀 버너스가 만든 웹을 web1.
(1) WEB1 - 17. 인터넷을 여는 열쇠 : 서버와 클라이언트 - YouTube
웹브라우저가 깔려있는 컴퓨터는 정보를 요청하고 있다.
웹서버가 설치되어 있는 컴퓨터는 정보를 응답하고 있다.
두 대의 컴퓨터가 정보를 주고받을 때 각자의 역할에 맞춰 client와 server.
즉 요청하는 컴퓨터를 클라이언트 컴퓨터, 응답하는 컴퓨터를 서버 컴퓨터라고 부르기로 했다.
사용자가 게임을 하는 컴퓨터 혹은 스마트폰에 설치되어 있는 프로그램은 게임 클라이언트, 게임 회사가 가지고 있는 서버 컴퓨터에 설치되어 있는 컴퓨터는 게임 서버라고 할 수 있다.
사용자가 사용하는 채팅 프로그램을 인터넷이라는 관점에서 채팅 클라이언트, 채팅 회사가 가지고 있는 서버에 설치된 프로그램을 채팅 서버라고 한다.
(1) WEB1 - 18. 웹호스팅 : github page - YouTube
호스트:인터넷에 연결된 컴퓨터
호스트를 빌려준 회사는 웹호스팅 업체라고 한다.
깃허브 는 오픈소스들이 만들어지는 곳이다. 서비스가 해주는 것은 웹서버를 제공해주는 것이다.
작업한 파일을 업로드하면 깃허브에 있고, 웹서버가 활성화되면서 깃허브가 주소를 알려준다. 방문자에게 알려주면 주소창에 입력하고 웹서버가 파일을 읽어 방문객에게 전달해주면 방문객이 파일을 볼 수 있다.
호스팅 사업의 목적이 웹이라면 그것을 웹 호스팅이라고 부른다.