1. Tag, Link
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8"> <!--빈 태그는 어떤 속성을 가지지 않으면 제대로 역할을 할 수 없다.-->
<title>HTML 요소 레퍼런스</title>
<base href="./css/"> <!--base라는 태그를 통해서 상대경로를 입력할수 있는 특정경로를 정해버린다.
즉 특정경로를 하나하나다 작성할 필요 없이 base를 통해서 한번에 들어 갈 수 있다. 하지만 주의사항은 이 base라는 태그는 기본적으로 html문서에 딱 한번만 작성 할 수 있다.
그래서 주요하게 쓰일 경로만 사용하면 된다.-->
<meta name = "author" content = "윤서혜">
<meta nema = "description" content = "윤서혜의 사이트 입니다.">
<meta http-equiv="X-UA-Compatible" content = "IE=edge"> <!--이 내용이 있는 html 문서는 인터넷 익스플로러로 렌더링 될때 최신의 렌더링 방식으로 실제 화면으로 출력을 한다-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--viewport는 어떤 정보를 렌더링하기위한 영역을 설정한다. content에서는 디바이스 가로에 맞춰서 영역이 설정이된다.
나머지는 확대축소에 1로 출발하겠다.-->
<link rel="stylesheet" href="./practice.css"> <!--base에 경로를 지정했기 때문에 css파일 이름만 입력하면 된다.-->
</head>
<body>
<img src="https://yt3.ggpht.com/a/AATXAJxeNxedA3WTStNrvIpoA0W2pXTutYzhNQnqcQ=s68-c-k-c0xffffffff-no-rj-mo" alt="샘플 이미지">
<img src="img/feature-tile__work.png" alt="샘플이미지2"> <!--주소가 정해져 있지 않기때문에 대체 이미지로 제대로 출력이 되지 않는다.-->
</body>
</html>
header = 헤더 - 로고, 메뉴 //영역을 사용하기 때문에 블럭요소이다
footer = 푸터 - 주소, 사업자... //영역을 사용하기 때문에 블럭요소이다
main = 메인 - 핵심 //영역을 사용하기 때문에 블럭요소이다
article = 아티클 - 독립, 재사용 //영역을 사용하기 때문에 블럭요소이다
seciton = 영역 설정 - 영역, 제목(h1~h6) vs div = 영역설정 - 아무의미 없음 //영역을 사용하기 때문에 블럭요소이다
aside = 옆부분 - 광고 //영역을 사용하기 때문에 블럭요소이다
nav = 다른페이지 링크 제공 - Home, About, Contact (목차, 색인 등을 설정) //영역을 사용하기 때문에 블럭요소이다
address = 연락처 정보 제공 - body, article, footer등에서 //영역을 사용하기 때문에 블럭요소이다
ul = unordered list = 순서가 정해져있지 않는 목록 리스트.
li = list item = 리스트아이템 항목.
cf. title은 전역 속성으로서 모든 태그에 다 작성 할 수 있다.
2. Style
<style>
div{
color : red;
background : blue;
}
</style>이와 같은 style태그는 head에 주로 사용되며 body에 사용해도 동작은 된다. 하지만 프로그램이 동작하는데 있어 효율적인 방법이 아니기 때문에 body에 사용하는것은 추천하지 않고 head에 사용하는것을 추천한다.
3. Type
<style type = "text/css">
div{
color : red;
background : blue;
}
</style>다음과 같은 경우는 style태그에 type을 지정해주는것인데 보통 이렇게 사용하지 않는다. 왜냐하면, 저렇게 지정하지 않더라더 자동으로 잘 인식도 하고 저렇게 잘 변환해주기 때문이다. 하지만 style태그와 달리 직접 type을 지정해줘야 하는 경우도 있다.
MIME타입을 검색해서 보면, MIME타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이라고 나온다. 개별 타입같은 경우, 문서의 카테고리를 가리키며 다음중 하나가 될 수 있다.
| text/plain |
| text/html |
| image/jpeg |
| image/png |
| audio/mpeg |
| audio/ogg |
| audio/* |
| video/mp4 |
| application/octet-stream |
| .... |
다 외우는것은 효과적인 방법은 아니고, 필요하면 찾아서 쓰는걸 추천한다.
4. Base
문서에 포함된 모든 상대 URL들의 기준 URL을 나타낸다. 한 문서에 하나의 base 요소만이 올 수 있다.
<title>HTML 요소 레퍼런스</title>
<base href="./css/">
<meta charset = "UTF-8" ><!--기본적으로 메타 태그가 속성을 가지고 있지 않으면 역할을 수행할 수 없다. 그래서 name, content, charset 라는 속성을 추가해야한다.-->
<meta name = "author" content = "김미영">
<meta name = "description" content = "김미영사이트이다.">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<link rel="stylesheet" href="./css/main.css">이 소스코드를 보면 link태그에서 상대경로를 지정을 했다. 하지만 위에 title태그 바로 밑에 base태그도 link태그와 동일하게 "./css/"가 있다는것을 알 수 있는데, 이렇게 한 이유는 미리 상대경로를 "./css/"로 지정하겠다는 뜻이며 코드 제일 먼저 읽을때 바로 적용하겠다라는 뜻이된다. 그래서 보통 base는 중간에 두는것보다 title밑에 바로 두는것이 좋다. 그리고 아까전에 언급했듯이, 이미 base에서 제일 먼저 찾는 상대경로를 지정해 두었기 때문에
<title>HTML 요소 레퍼런스</title>
<base href="./css/">
<meta charset = "UTF-8" ><!--기본적으로 메타 태그가 속성을 가지고 있지 않으면 역할을 수행할 수 없다. 그래서 name, content, charset 라는 속성을 추가해야한다.-->
<meta name = "author" content = "김미영">
<meta name = "description" content = "김미영사이트이다.">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<link rel="stylesheet" href="main.css">링크 태그를 다음과 같이 해도 된다. 그러므로 상대경로 작성시, 모든 태그에 일일이 다 작성하는것보다 base로 경로 딱 잡고 밑에 필요한 경로를 작성하는것이 바람직하다. 단, base는 html문서에 딱 한번만 작성할 수 있다.
또한 파일경로만 사용할수 있는것도 아니다. http 경로로도 사용이 가능하다.
<html lang="ko">
<head>
<title>HTML 요소 레퍼런스</title>
<base href="./css/">
<meta charset = "UTF-8" ><!--기본적으로 메타 태그가 속성을 가지고 있지 않으면 역할을 수행할 수 없다. 그래서 name, content, charset 라는 속성을 추가해야한다.-->
<meta name = "author" content = "김미영">
<meta name = "description" content = "김미영 사이트이다.">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<link rel="stylesheet" href="main.css">
<style type = "text/css">
div{
color : red;
background : blue;
}
</style>
</head>
<body>
<div>안녕하시오</div>
<img src="https://heropcode.github.io/GitHub-Responsive/img/feature-tile__projects.png" alt="sample image1">
<img src="https://heropcode.github.io/GitHub-Responsive/img/feature-tile__build.png" alt="sample image2">
</body>
</html>다음과 같은 소스코드를
<!DOCTYPE html>
<html lang="ko">
<head>
<title>HTML 요소 레퍼런스</title>
<base href="https://heropcode.github.io/GitHub-Responsive/">
<meta charset = "UTF-8" ><!--기본적으로 메타 태그가 속성을 가지고 있지 않으면 역할을 수행할 수 없다. 그래서 name, content, charset 라는 속성을 추가해야한다.-->
<meta name = "author" content = "김미영">
<meta name = "description" content = "김미영 사이트이다.">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<link rel="stylesheet" href="main.css">
<style type = "text/css">
div{
color : red;
background : blue;
}
</style>
</head>
<body>
<div>안녕하시오</div>
<img src="img/feature-tile__projects.png" alt="sample image1">
<img src="img/feature-tile__build.png" alt="sample image2">
</body>
</html>이렇게 바꾸어도 동일하게 출력된다.
'HTML > 메타데이터' 카테고리의 다른 글
| 메타데이터 - 속성 (0) | 2020.06.06 |
|---|