메타데이터 - LINK / STYLE / MIME Type / BASE

2019. 11. 24. 11:12ㆍ웹/HTML

LINK 태그

외부에서 HTML 문서에 CSS 파일 등을 가지고 와서 사용하는 태그

 

속성 

rel

  • relationship의 약자

  • 외부에서 가져올 문서와 현재 문서와의 관계 지정

  • 필수 속성

  • 값은 LINK TYPES 지정(stylesheet, icon 등)

href

  • 링크된 리소스의 URL 지정

  • 절대적 / 상대적 지정

hreflang

  • 링크된 리소스의 언어 지정

  • 순수히 조언, 굳이 명시하지 않아도 HTML 최상의 상단에 lang 따름

※ LINK 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/link

 

 

 

STYLE 태그

문서나 문서 일부에 대한 스타일 정보를 포함하는 태그

기본적으로 head 태그 내에 작성, body 태그 내에 작성 가능하나 HTML이 브라우저에서 읽히는(동작하는) 방식이 효율적이지 않음 

 

속성

type 

    • 스타일링 언어 정의

    • text/css : HTML5 에서는 생략 가능

media

    • 스타일이 적용될 미디어

    • 값은 미디어 쿼리, 생략 시 기본값 all 적용

scoped

    • 부모 요소에만 스타일 적용

    • 생략 시 문서 전체에 스타일 적용

    • 브라우저 호환성 부분에서 IE, Opera, Safari 에 사용 X

title

    • 대체 스타일시트 세트 지정

    • 굳이 명시할 필요 X

※ Style 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/style

 

 

 

MIME Type

클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘

브라우저는 리소스를 서버로 부터 받았을 때 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입 지정

서버나 클라이언트가 리소스의 타입 지정하여 동작방식의 이해를 돕기위한 속성

 

예제)


<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/html"></style>

 

※ MIME Type 문서 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types

 

 

 

BASE 태그

문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄

한 문서에 하나의 <base> 요소만 올 수 있음

 

예제)

문서 위치

  • Example/css/main.css

  • Exmaple/index.html

Base 사용전


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="author" content="오늘부터개발자">
    <meta name="description" content="오늘부터개발자의 사이트 입니다">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <span>테스트 !!!</span>
    <div>테스트!!!테스트!!!테스트!!!</div>
</body>
</html>

 

Base 사용


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base href="./css/">
    <meta name="author" content="오늘부터개발자">
    <meta name="description" content="오늘부터개발자의 사이트 입니다">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <span>테스트 !!!</span>
    <div>테스트!!!테스트!!!테스트!!!</div>
</body>
</html>

 

설명

  • base 태그를 사용해서 기본적으로 상대 경로를 지정

  • HTML 문서 내에 한번만 사용


※ BASE 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/base

 

 

 

 

출처 : heropy.org

'웹 > HTML' 카테고리의 다른 글

HTML - 컨텐츠 부문 HEADER / FOOTER / H1~H6 / MAIN  (0) 2019.12.11
HTML - 요소 전역 속성  (0) 2019.11.24
메타데이터 - META 태그  (0) 2019.11.24
HTML 구조  (0) 2019.11.24

관련글

티스토리툴바