✅ metadata
<meta charset="UTF-8"
유니코드로 컴퓨터에서 전세계 언어를 표현할 수 있음
✅ link 태그
▲
<link>태그는 현재 문서와 외부 리소스의 관계 명시
▲ 주로 css파일,파비콘 연결할 때 사용
▲ 빈요소(싱글태그)<link href="style/main.css" rel="stylesheet"> <link rel="icon" href="favicon.ico">
✅ MIME type
▲ 파일경로를 해석하지 못하는 경우를 위해 파일의 타입을 명시해주는 것
▲ 일반적인 구조 type/subtype
▲ type에는 텍스트나 이미지와 같은 카테고리를 나타내며, subtype은 파일의 확장자
✅ style 태그
▲
<head>안에 작성하는 것보단 외부 스타일 시트에 작성하고<link>로 연결하는 것이 좋음
▲ 같은 명시도를 가진 경우, 뒤쪽이 앞쪽을 덮어씀
✅ script 태그
▲ 주로 javascript 연결할 때 사용
▲<script>태그는<body>태그 안에서 가장 마지막에 사용하는 것이 좋음 -> 페이지 로딩 관련하여
✅ 상속
▲ 상속을 받으면 부모의 속성을 자식이 그대로 물려받음
▲ 만약 부모와 자식에게 같은 속성이 있다면, 자식은 본인의 속성을 사용
✅ 전역속성 id(유일한 고유식별자)
▲ 모든 태그에서 사용 가능
▲ 고유식별자로, 문서 전체에서 id는 하나의 요소에 하나의 이름으로만 사용해야해. id의 이름이 겹칠 수 없음.
▲ id에는 공백이 들어가면 안됨
▲ 시작은 무조건 영소문자로 시작/중간에 구분할게 있다면
<div id="hello-hi"></div>"-"또는 "_"를 사용하여 구분하기
✅ 전역속성 class(접근자)
▲ class는 문서 전체에서 중복하여 사용 가능함
<div class="hi">A</div> <div class="bye">B</div> <div class="hi">C</div>이런식으로 사용 가능함
▲ 하나의 요소에 여러개의 class사용 가능(단, 공백으로 구분짓기)
<div class="hello hi"></div>
div에 hello와 hi라는 2개의 접근자가 있는 것
✅ 전역속성 style
▲ 테스트를 위해서만 작성하고, 외부 스타일시트에다가 css 작성하기
✅ 전역속성 lang
▲ 언어속성으로 문서가 어떤 언어로 작성되었는지를 표현
▲ 웹 접근성을 위해 사용
▲ 문서 맨 윗부분에<html lang="ko"></html>으로 사용될 뿐만아니라 일부 태그안에서도 사용가능
✅ 전역속성 data- 속성
▲ html에 있는 속성이 아닌, 개발자가 임의대로 만든 속성
▲ 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있음
✅ 전역속성 draggable
▲ 요소가 드래그가 가능한지 안한지를 보는 속성(실제로 움직이는건 아니고, 시각적으로만)
▲ 값을 꼭 명시해줘야 함(요소마다 defalt값 다름)
<img src="images/small.png" draggable="true">or
<img src="images/small.png" draggable="false">
이렇게 값은 true와 false로 주면 됨
▲ javascript에서 이벤트에 따라 다르게 적용시키기 위해 사용
✅ 전역속성 hidden
▲ 요소를 브라우저에서 시각적으로 숨기는 효과 -> 그래서 보안상으로 정보를 보호해야할 땐 사용하면 안돼❌
▲ boolean속성(작성하면 true, 작성하지 않은 기본값 false)<img src="images/small.png"> <img src="images/small.png" hidden>
▲ 만약 그 요소의 css에 display:flex가 있다면 hidden이 있어도 화면에 보이게 됨
