예전에 노마드코더 "코코아톡 클론코딩"을 보면서 정리했던 내용을 발굴해서 좀 다듬어 올려본다.
Learning HTML
✨파일명, 폴더명 항상 소문자로 만들기
- 파일 생성 전에 vsc에 폴더 열고 시작 (꼭 vsc 사용할 필요 X, 메모장으로도 만들 수 있다.)
- 파일 이름 뒤에 파일 형식 입력 (html, css....)
- html파일은 브라우저로 열기 (브라우저는 코드에 에러가 있다고 알려주지 않음)
HTML 코드
<tag>text</tag>
- html tag 사이에 넣는 텍스트가 무언가가 됨 (title, image...)
- 브라우저는 아무 의미가 없어도 이해하려 함
- 브라우저는 내가 만든 태그를 사용하지 X (텍스트로 표현가능. 다만, 원하는 대로 작동 안 됨)
<h1>text</h1>
<h2>text</h2>
~
<h6>text</h6>
<ol>text</ol>
<li>text</li>
<ul>text</ul>
<a href="adress">text</a>
<a href="adress" target="_blank">text</a>
<img src="img adress">
- <a>는 추가적인 정보(attributes)를 필요로 함
- href는 anchor태그에만 태그 가능
- target의 기본값=self, _blank입력 시 새로운 창에서 링크 열림
- img는 자체 닫기 태그로 /태그가 없음
- src=img안에 사진을 집어넣어 줌.(img에서만 작동)
- 이미지가 다른 폴더에 있을 경우 "폴더/이미지. 확장자"(경로 표기법)
<!DOCTYPE html>
<html>
<head><title>text</title></head>
<body>contents</body>
</html>
- 모든 HTML문서는 <!DOCTYPE html>로 시작
- 브라우저 화면상에 보여질 내용들은 body에 있어야 함
✨<head>는 보이지 않는 사이트 설정들을 바꿔줌
- language=사이트에 사용되는 언어 표기(검색엔진에게 알려줌)
- meta=name, content라는 attribute를 가짐
- name=keyword (검색엔진 키워드를 정의), name=description (웹 페이지에 대한 설명 정의)
- charset=문서의 문자 인코딩 방식 명시
- UTF-8 = 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋
- og:~ = 카카오톡에서 보이는 정보들
<tagname attrname="attrvalue">content</tagname>
<label for="attrvalue">content</label>
<input id="attrvalue">content />
- label for, input id에 똑같은 벨류가 들어가야 함
- ID=body 안에 어떤 태그던 넣을 수 있는 attribute
- element당 하나의 id만 가질 수 있음(중복 id 사용 시 작동 X)
- CSS가 태그를 지정해 디자인하기 위해선 ID가 필요
<div id="semantic"></div> = <semantic tag></semantic tag>
- semantic tag = 문서를 보기만 해도 그 의미를 짐작 가능
- div = 박스개념, 아무런 값이 없는 단순한 box
- div 대체 태그 = <header> (≠ <head>)
- <main> = 내용, <footer> = 꼬리말
🤸RECAP
- tag는 마음대로 달아줄 수 있음
- attribute는 항상 ""로 작성
- 어떤 태그에서도 사용 가능한 attribute (id) ex) image, paragraph, header...
- 어떤 태그에서만 사용 가능한 attribute (src)
- div태그는 가장 통용적인 container 다만, 코드만 보고 의미를 파악하기 쉽게 하기 위해 semantic태그를 사용하는 것이 좋음
참고자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org