[Html기초] Html 요소 - 3 메타데이터, 전역속성

7991 단어 프론트엔드html 전역속성html 메타데이터htmlhtml기초html요소

🌾메타데이터

  • 눈에 보이지 않는 Head 부분

메타데이터란?

데이터를 설명하는 메타데이터를 의미한다.
만약, 사진이 있다고 생각하면 상세정보에 촬영 일시, 사진작가란 '사진'을 설명하는 데이터들이 있다. 그런 데이터가 메타 데이터다.

1. 언어 설정

<head>
   <meta charset="utf-8">
</head>

html:5만 입력해도 바로 나오는 값이다.
utf-8 이 모든 나라의 언어를 지원해준다.

charset 말고 언어에 관련된 <lang>라는 태그 또한 존재한다.


2. 현재 문서와 외부 리소스 관계

css파일과 html 파일 연결 혹은 파비콘을 넣을 때 많이 사용 된다. 

<link rel="stylesheet" href="css파일 주소">

css 파일과 연결시, rel은 stylesheet로 고정되있다고 생각하면 된다.

<link rel="icon" href="파비콘.ico">

파비콘의 rel 속성은 icon이고, 확장자는 ico를 이용한다. 

<script>
</script>

그 외, javaScript와 html 파일 연결이 필요할 땐 script 태그를 이용한다. <head>에 script 태그를 넣을 수도 있지만, script 태그를 만나는 순간 JS 파일을 먼저 읽기 때문에 index 렌더링이 멈출 수 있다.
따라서 <body> 마지막에 넣는 것을 추천한다 !

🏷️ 전역속성

전역속성은 어떤 태그에도 모두 사용이 가능하다.

1. style

style 은 세 가지 방법으로 사용이 가능하다.

1) <head> 태그 안에서 사용하는 방법

<head>
  <style>
    .id{
       color:blue;
       }
   </style>
</head>

2) 태그 바로 뒤에 사용하는 방법

    <div style="color: red;">

3) css 를 이용

2)번 방식을 이용하면, css에서 한 디자인이 적용되지 않을 가능성이 있다. 디자인의 대부분은 css에서 처리해야한다는 것을 기억해야한다!

2. id와 class

<div id="test"> 안녕하세요 </div>

id는 유일 해야 한다. 다른 <div> 혹은 <p> 등의 태그에서 한 번 쓴 id를 다시 쓸 수 없다. 공백도 허용하지 않는다.

<p class="test2 test3">안녕하세요.</p>
<p>저는</p>
<p class="test2">공부를 열심히 할 거에요</p>

반면에 class는 중복을 허용한다. 공백 또한 허용하는데 class 이름이 test2 test3가 아닌, class가 2개 라는 뜻이다. 따라서 "안녕하세요"를 감싼 div는 test2와 test3 두 개의 클래스를 가지고 있다.

3. draggable

드래그 할 수 없게끔한다.

<div style="color: red;" draggable="true">

답을 입력하지 않아도 되는 boolean 타입이 아니기 때문에 true/ false 중 값을 입력해주어야 한다.

4. hidden

시각적으로도, 스크린 리더에도 보이지 않는다. 하지만 개발자 도구에서는 보이기 때문에 중요한 정보를 hidden 시켜주면 안된다.

Java의 상속과 조합에 대한 잘못된 사용 예
Java 백엔드에서 MD5 암호화 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage