HTML 기초

유용한 사이트

프로그래밍 언어 태그 설명  https://devdocs.io/

WaybackMachine 예를들어 naver 치면 예전 화면 볼수 있음. 날짜 시간별로   https://archive.org/web/

유니코드 이모티콘 복사해서 사용가능  https://home.unicode.org/emoji/emoji-frequency/

이미지 동그랗게 잘라주기 https://crop-circle.imageonline.co/#circlecropresult

 

키보드에서 이모티곤 찾는 법: 맥에서는 control+command+space

윈도우에서 방법1 이모티콘 넣을 자리에 커서 놓고 WIN+.(마침표) 또는 WIN+;(세미콜론)

윈도우에서 방법2 테스크바 오른쪽 클릭-터치 키보드 버튼 켜기- 키보드에 보면 이모티콘 나옴

 

 

 

---

boiler plate

! tab 누리면 기본 뼈태를 만들어 준다. 이 기본 뼈대를 보일러 플레이트라고 한다.

<DOCTYPE html> : document type은 html 5이다. html4의 보일러 플레이트는 좀 더 내용이 많다. 

<meta charset="utf-8">: meta tag는 이 웹페이지가 뭘 보여줄지 말하는 것.

meta tag 중에서 characterset="UTF-8" name="keywords" content="HTML,CSS,XML,JavaScript"

unicode는 utf-8와 비슷

charset = characterset

 

Opening Tag / Closing tag / Content

<h1> Hello World </h1>

opening tag: <h1> 

closing tag: </h1> 

content: 이 사이에 들어가는 내용

<p> </p> paragraph

 

Self-closing Tag

<br> : self-closing tag, line break 

<hr> :  self-closing tag, horizontal rule 

 

 

<!-- 기타 설명 --> : comment tag

 

Element, Attribute

<hr> :  self-closing tag, horizontal rule 

<hr size="3">

hr : HTML element

size="3": HTML Attribute

List

ul : unorder list

li: list

ol: order list

<ol style="A">

A

B

C

순으로 정렬됨

 

Image 넣기

<img src="cat.jpg" alt="cat" width="128" height="128">

src="../img.cat.jpg" : 이미지 위치

앞..은 지금 파일에서 앞 파일로 이동하라는 의미

 

링크 걸기

하이퍼링크: 글자나 사진 누리면 다른 페이지로 이동 시켜줌. 

하이퍼 텍스트: 하이퍼 링크가 되는 텍스트 

 

<a> link text </a> : anchor tag

<a href=""> </a> 

href: 이동할 페이지 주소 

현페이지에서 링크된 페이지로 이동

<a href="https://www.facebook.com/aaa">Jimin's Facebook</a>

 

링크에 글자 진하게 하기 

<strong><a href="https://www.facebook.com/aaa">Jimin's Facebook</a></strong>

 

새창에서 링크된 페이지 뜸

<a href="https://www.facebook.com/aaa" target="_blank">Jimin's Facebook</a>

 

내가 만든 페이지로 이동하기 

 

hobbies.html파일을 index.html과 같은 라인선상에서 만들고 링크 걸어주기