[HTML/CSS] 메타데이터 요소, 전역 속성

자두·2021년 9월 29일
0

HTML-CSS

목록 보기
5/14
post-thumbnail

2. CSS CH1-2

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

  • 현재 문서와 외부 리소스의 관계를 명시
  • 스타일 시트를 연결할 때 제일 많이 사용
  • 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결
  • 빈 요소
<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 타입

MDN-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 속성 값을 변경하면 특성으로 인한 동작을 재정의
profile
블로그 이사했어요 https://ktmihs.tistory.com/

0개의 댓글