💙메타(meta) 태그
메타 데이터
데이터에 대한 데이터로, 다른 데이터를 설명하는 구조화된 데이터이다.
ex) 사진의 날짜 및 시간, 파일 크기
해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 일반적으로 문자인코딩, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는데 사용된다.
메타 데이터는 페이지에 표시되지 않지만 컴퓨터 구문 분석이 가능하다.
브라우저(콘텐츠를 표시하거나 페이지를 다시 로드하는 방법), 검색 엔진 (키워드) 및 기타 웹 서비스에서 사용된다.
메타 태그는 head 태그 요소 내부에 위치한다.
메타 태그 종류
1. Charset (문자 인코딩)
<meta charset = "UTF-8">웹 페이지의 문자 인코딩을 설정한다.
2. Viewport (반응형 웹 디자인)
<meta name="viewport" cotent="width=device-width, initial-scale=1.0">viewport는 화면 상의 표시 영역을 뜻하는 용어로 해당 설정을 통해, 각각 기기 장치에 최적화된 웹 페이지를 볼 수 있게 만들 수 있다.
width=device-width
장치의 화면 너비를 따르도록 페이지 너비를 설정한다. (장치에 따라 다름)
initial-scale=1.0
브라우저에서 페이지를 처음 로드 할 때 초기 확대 / 축소 수준을 설정한다.
3. Description (페이지 설명)
<meta name="description" content="Your page description here">페이지의 간단한 설명을 제공하는 역활을 한다. 검색을 했을 때, 검색 엔진 결과 페이지에 표시되어 사용자 검색 엔진 결과 페이지에도 표시되며 사용자 클릭률을 높이는 데 도움을 준다.
4. keywords (키워드)
<meta name="keywords" content="keyword1, keyword2, keyword3">검색엔진에 의해 검색되는단어를 지정한다.
5. Author (작성자)
<meta name="author" content="Author Name">페이지 작성자의 이름을 설정한다.
6. Robots(크롤러 지시)
<meta name="robots" content="index, follow">검색 로봇, 크롤러에 대한 content 속성을 설정한다.
7. HTTP-equiv (HTTP 헤더)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">HTTP 헤더와 동일한 정보를 제공한다. 주로 페이지의 콘텐츠 타입을 설정하는 데 사용한다.
8. Theme-Color (브라우저 테마 색상)
<meta name="theme-color" content="#4285f4">모바일 웹의 상태바(툴바) 색상을 변경할 때 사용한다.
💙z-index
한 요소 위에 다른 요소 쌓기 위해 순서를 지정한다.
값이 작을수록 아래에 쌓이고 값이 클수록 위에 쌓인다.
명시하지 않을 경우 제일 먼저 삽입된 요소가 1을 가지며, 그 후 추가되는 요소들은 값이 점점 커진다.
<style>
div {
width: 100px;
height: 100px;
border-radius: 50px;
position: absolute;;
}
#c1 {
background-color: red;
}
#c2 {
background-color: orange;
left: 50px;
}
#c3 {
background-color: yellow;
left: 100px;
z-index: 10;
}
#c4 {
background-color: green;
left: 150px;
}
#c5 {
background-color: blue;
left: 200px;
}
</style>💙가상 클래스 (pseudo class)
웹 요소에 사용자가 클릭하거나 마우스를 올려놓는 등 특정 동작을 할때 스타일 적용을 위해 사용한다.
div {
width: 50px;
height: 50px;
background-color: wheat;
}
div:first-child {background-color:green}
div:last-child {background-color:green}첫 번째(상태)와 마지막(상태)에 있는 div 요소를 초록색으로 바꾸기
💙 미디어 쿼리 (Media Query)
단말기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 사이트의 스타일(CSS)을 적용할 수 있다.
@media [not | only] 미디어유형 [and 조건] * [and 조건] {
CSS Code;
}🤍회고
HTML은 기본적인 내용만 배워서, 예전에는 관리자 도구를 켰을 때 보이는 meta 태그가 늘 궁금했다. 처음에는 사진의 메타데이터처럼 단순한 정보라고 생각했지만, 자세히 공부해보니 생각보다 다양한 데이터가 들어가고 활용 범위도 넓어서 신기했다.
