CH9. 메타데이터 요소
1) 메타데이터의 역할
- 메타데이터 : 데이터를 설명하는 데이터
ex) 책의 저서, 사진의 제목 등 - 검색 엔진에서 검색 시, head에 위치한 메타데이터를 통해 정보를 분류
2) title
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목
<title>Grandma's Heavy Metal Festival Journal</title>
- 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시
- 한 문서에는 하나의 head, 하나의 title만 존재할 수 있음
- 결과 페이지의 순서를 결정하는 구성 요소
- 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내림
3) meta - 문서 정보
- 다른 메타관련 요소로 나타낼 수 없는 메타데이터
ex)<base>,<link>,<script>,<style>,<title> - 빈 요소
- name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공
➡ name은 이름, content는 값을 담당
<meta name="viewport" content="width=device-width, initial-scale=1.0">4) meta - 문자 인코딩, 뷰 포트
charset
- 페이지의 문자 인코딩을 선언
- 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현해야 함
<meta charset="UTF-8">- 보통 head의 첫 번째 또는 title의 상단에 넣어줌
viewport
- 현재 화면에 보여지고 있는 영역(=viewport)의 초기 사이즈에 대한 힌트
- 모바일 장치에서만 사용
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport">의 값
- width, height : 웹 사이트를 렌더링 하고자 하는 뷰포트 너비, 높이 ➡ 양의 정수 or device-width
- initial-scale : 장치 너비와 뷰포트 너비의 비율 ➡ 1.0 ~ 10.0
- user-scalable : 웹 페이지 확대 여부 ➡ yes or no
5) link
- 현재 문서와 외부 리소스의 관계를 명시
- 스타일 시트를 연결할 때 제일 많이 사용
- 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결
- 빈 요소
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
<link>속성
- rel : 현재 파일과 어떤 관계인지
- href : 파일 경로
- type : 파일 타입을 명시해주어 어떤 타입인지 인식할 수 있게 함
특성값 : text/html, text/css와 같은 MIME 타입
6) MIME 타입
- 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
- 파일의 타입을 명시하여 브라우저에게 해야 할 기본 동작이 무엇인지 알려줌
일반적인 구조
type/subtype: '/'로 구분된 두 개의 문자열인 타입과 서브타입- 전통적으로 소문자로 작성
7) style
- 문서나 문서 일부에 대한 스타일 정보
- 문서의
<head>안에 위치 - 🙆♀️ 일반적으로 스타일은 외부 스타일 시트에 작성하고,
<link>요소로 연결 - 여러 개의 태그가 중첩된다면, 가장 하단의 style이 적용됨
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>8) script
- 데이터와 실행 가능한 코드를 문서에 포함할 때 사용
- 보통 JavaScript 코드와 함께 사용
<script src="javascript.js"></script>또는,
<script>
alert("Hello World!");
</script>✔ html file 내 css, js 사용 방법
CSS
외부 파일 : link로 불러옴
내부 작성 : style 내부에 작성
JS
외부 파일/내부 작성 : 모두 script 사용
✔ script 작성 위치
일반적으로 script는 body의 최하단에 작성하거나 외부 파일을 불러옴➡ 파일 로딩 중 js 문법을 만나면 하던 작업을 중단하고(여기서는 html) js를 먼저 마친 후, 다시 작업을 이어가기 때문에 페이지 로딩이 느려질 수 있음
CH10. 전역 속성
1) class와 id
class
- 메서드를 통해 요소에 접근할 수 있는 방법
- class들을 공백으로 구분하여 사용 가능
(여러개 가능) - 요소의 의미와 목적을 설명하는 명칭을 사용
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>
<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>.note {
font-style: italic;
font-weight: bold;
}
.editorial {
background: rgb(255, 0, 0, .25);
padding: 10px;
}id
- 문서 전체에서 유일한 고유식별자(ID)를 정의
- 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별
<p>A normal, boring paragraph. Try not to fall asleep.</p>
<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>#exciting {
background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
border: 1px solid #696969;
padding: 10px;
border-radius: 10px;
box-shadow: 2px 2px 1px black;
}✔ id 작성 시, 주의사항
- 공백(스페이스나 탭 등)을 포함해서는 안됨
- ASCII 문자, 숫자, '_', '-' 및 '.'만 사용 가능
2) style
- 요소에 적용할 CSS 스타일을 선언
- 보통 일시적으로 적용해야 할 스타일일 경우 사용
외부 작업을 무시하고, 해당 부분을 우선시 하기 때문
<div style="background: #ffe7e8; border: 2px solid #e66465;">
<p style="margin: 15px; line-height: 1.5; text-align: center;">
Well, I am the slime from your video<br>
Oozin' along on your livin' room floor.</p>
</div>3) title
- 요소와 관련된 추가 정보를 제공하는 텍스트
- title이 중첩된 경우, 가장 하위 요소의 title 내용이 보여짐
- 내부는 띄어쓰기, enter 등이 그대로 적용됨
<p><code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다.
이 <abbr title="This is a
multiline title">예제</abbr>처럼요.</p>4) lang
- 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의
- 컴퓨터가 아닌, 읽는 사람에 대한 언어를 명시
- 페이지의 전체뿐만 아니라, 부분마다도 명시할 수 있음
<html lang="ko">
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>5) data
- 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줌
- 이후 JS에서 접근할 때, 해당 부분을 data-* 내용으로 접근할 수 있음
*: 직접 작성한 내용
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>- 상단의 article에 접근하면 columns라는 이름으로 해당 article의 columns가 3이라는 정보를 얻을 수 있음
- js EX ⬇
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"6) draggable
- 요소의 드래그 가능 여부
- js → event에 따른 행동을 정의할 수 있음
<img draggable="false">⚠ draggable 특성은 불리언이 아니고 열거형 특성이므로, true 또는 false의 지정 또한 필수
7) hidden
- 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성
- 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨짐
(개발자 도구에서는 보임⇒ 보안상으로 중요한 정보일 경우는 hidden 사용 X) - hidden 특성을 가진 요소의 CSS display 속성 값을 변경하면 특성으로 인한 동작을 재정의
블로그 이사했어요 https://ktmihs.tistory.com/