안녕하세요. 기계과 감성쟁이입니다.
머신러닝 찍먹을 위해, JS 복습을 하는 중입니다.
그래서 2년 전에 기록해놓았던 HTML 공부 기록을 포스팅합니다.
해당 기록은 아래의 '생활코딩 HTML' 강의를 기반으로 작성되었습니다.
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
6. 태그
-
html에서 사용하는 문법. price tag, dog tag 할 때 그 tag (글에 대한 정보 전달)
-
<strong> : Bold체로 바꿔줌 </strong>
-
<u> : underline 해줌 </u>
7강
-
<h1> ~ <h6> : 제목 태그, 숫자가 커질수록 문자 크기 줄어듦. </h1> ~ </h6>
8강
-
https://advancedwebranking.com/html/ 라는 곳에서 html tag 사용률 통계를 보여줌.
-
여기 있는 걸 공부하는 것도 좋음.
9강
-
<br> : 단순히 한 줄 띄워줌 (엔터같은 역할)
-
<p> : 단락을 나타내고 줄을 띄워 구분해줌. 정보전달 면에서 <br>보다 우위.- 원하는만큼 줄을 띄우지 못한다는 점은 css로 극복 가능. </p>
10강
-
<img> : 이미지를 넣는 태그
-
src = "주소" (ex: <img src = "https://......>)-웹페이지 파일과 같은 위치에 있다면 파일 이름만 써주면 됨 (ex: coding.jpg)width 로 크기 설정 가능 (<img src = "https://..." width = 100%>)
- 숫자, 퍼센트 둘 다 가능
-
11강
-
<li> : 목차 표현 등에 씀. 이 문장 앞에 찍혀있는 점 같은거 나옴. </li>
-
<ul> : 목록과 목록을 구분해주는, 묶어주는 태그.</ul>
-
<ol> : ul과 비슷하나, 목차들에 숫자를 매겨줌. </ol>
- ul : unordered list, ol : ordered list
12강
-
<title>: 문서의 제목을 정함. 크롬 탭에 보이는 그 이름
-
<meta charset = "utf-8"> : 웹브라우저에게 utf-8로 페이지를 열라고 말해줌
-
본문은 <body>로 묶기로 함
-
본문을 설명하는, Body를 설명하는 글은 <head>로 묶기로 함
-
그 위에 <html> : head와 body를 감쌈, <!doctype html>는 맨 위에 무조건 (약속)
13강
-
<a> : anchor 의 약자. 링크 </a>
-
a 뒤에 href (Hypertext REFerence) 를 붙여줌 (ex: <a href = "https://www.w3.org/TR/html51/">)
-
target="_blank"까지 붙여주면 새 탭으로 열림
-
마우스 가져다 댔을 때 툴팁으로 링크 설명하고 싶으면 title ="~~~"
-
-
-
<a href="https://www.w3.org/TR/html51/" target="_blank" title="html5 specification">
14강
-
<a>를 내가 만든 또 다른 문서와 연결시키면 웹사이트 완성
15강
- 인터넷과 웹에 대한 설명과 역사. 웹은 인터넷을 이용한 하나의 도구
- 인터넷을 씀으로써 각각의 이용자?들이 연결국이 됨
16강
-
서버 (Server) : 정보를 제공해주는 존재
-
브라우저 or 클라이언트 (Client) : 정보를 찾거나 제공해주는 존재
-
웹 서버와 호스팅
- 서버를 배우면 어렵고 힘들지만 인터넷에 대해 배울 수 있음
- 호스팅은 돈이 들지만 쉽게 해줌!
17강
-
github 호스팅 이용법
- new repository에 파일(코드) 올린 다음에 settings -> github pages -> master branch
- 안들어가지면 주소 끝에 html 파일 이름 넣으면 됨! (ex : https://..../web1/index.html)
-
이거... 팀플 같은거 정보 공유할 때 써먹을 수도 있을 듯
-
static web hosting : 일정 사용량 넘어 섰을 때 유료가 되는 서비스 (앞에 free 붙이면 무료 서비스 찾을 수 있음)
18강
-
bitnami manager - manage server 에서 초록불은 서버 켜져있다는 시놓
-
127.0.0.1 은 웹브라우저가 설치되어 있는 각자의 컴퓨터의 웹서버를 가리킴
-
http://127.0.0.1/index.html 이란 말은, '자신의 컴퓨터에 설치되어있는 웹서버에 접속해서 index.html 파일을 원해!' 라는 말임
-
직접 index.html 을 여는 것과의 차이는, 웹브라우저가 서버에 요청하는 것 vs 파일을 직접 여는 것
-
http : Hyper Text Transfer Protocol (Hypertext :웹페이지, Transfer : 전송, Protocol : 규약, 약속)
-
cmd - ipconfig 에서 IPv4 주소를 알아낸다음, 같은 인터넷망을 사용하고 있는 다른 기기로 ip주소/index.html 하면 파일 나옴!
19강
-
CSS : 웹사이트를 아름답게 만들고 싶다면
- CSS가 생겨나고 웹 퍼블리셔, 웹 디자이너들이 나타남
-
JavaScript : 사용자와 상호작용하는 웹사이트를 만들고싶다면
- 이 언어가 나타난 후에 웹 프론트 엔지니어, 웹 인터렉티브 디자이너 발전
-
백엔드 : 연산 같은 프로그래밍적(?) 기술이 필요할 때
- JSP,PHP,Node.js