HTML / CSS를 너무 찍먹(어쩌면 그보다 덜,,)한 거 같아서 인프런 강의를 하나 끊었다. JS 객체지향파트 쪽 하다가 다시 돌아왔는데 의심하지말고 다시 나아가야겠다.
Visual Studio Code에서 HTML 파일을 생성하고 나서 html을 타이핑하게 되면 이러한 템플릿(?)이 노출되고 주로 이를 사용한다.
하나씩 뜯어보도록 하자.
DOCTYPE
문서가 형식과 버전으로 작성되었는지를 명시, 선언시 standards mode로 문서실행한다. (최신 형식) 선언을 안할 시 이전버전(?)으로 실행된다고 이해하자 현재는 HTML5 버전이다.
head 태그
우리가 보는 웹사이트 콘텐츠가 아니라 기계가 읽는 정보(메타데이터)가 담기는 곳이다.
- 페이지의 제목
- 파비콘 (웹페이지 탭 상단의 이모티콘?)
- 기타 메타 정보
- CSS와 JS등의 코드 및 링크
title 태그
<title>웹페이지의 제목</title>브라우저의 탭에 표시되며 검색엔지에 노출되는 제목 & 즐겨찾기 제목으로 표시
meta 태그와 속성들
charset
<meta charset="UTF-8">- 글자가 깨지지 않도록 페이지가 어떤 문자로 작성되었는지 명시
- UTF-8 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식 > 저장형식도 동일하게 가져가야 함
<html lang="ko"> 는 언어이다. lang과 charset는 다름 viewport
화면에 보여지고 있는 영역 > 모바일 등 특수한 상황
<meta name="viewport" content="width=device-width, initial-scale=1.0">width : 뷰포트의 너비 (device-width : 기기의 화면 너비. 정수를 넣으면 픽셀 단위로)
initial-scale : 페이지가 처음 로드될 때의 줌 레벨 ( 기본1.0)
Open Graph 정보
Meta(구 페이스북에)에서 만든 프로토콜
라인, 카카오톡 등 url 전달시 노출되는 썸네일 느낌<meta property="og:title" content="얄코의 HTML & CSS 강좌"> <meta property="og:description" content="얄코의 최신 강좌! 웹 개발을 위한 HTML과 CSS 지식들을 '떠먹여'드립니다."> <meta property="og:image" content="https://showcases.yalco.kr/html-css-scoop/03-01/yalco.png">
파비콘
favorites + icon 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘
<link rel="shortcut icon" href="절대경로 or 상대경로" type="">+++ 08.06
global attribute
HTML 언어에서 태그는 각 태그에서 사용할 수 있는 속성이 정해져 있다. 하지만 태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 바로 글로벌 속성이다.
class 속성
<p class="red-color">...</p>class 속성은 요소에 클래스명을 지정할 때 사용. css에서 클래스 선택자로 활용하고 같은 클래스명은 여러 요소가 중복해서 가질 수 있다.
id 속성
<h1 id="title">...</h1>id 속성은 요소에 아이디를 지정할 때 사용. 아이디는 css에서 아이디 선택자로 활요하며 중복 불가
style 속성
style 속성은 css에서 코드를 인라인으로 작성할 때
title 속성
title 속성은 요소에 추가 정보를 넣을 때 사용하는데, 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시 된다.
lang 속성
lang 속성은 요서에 사용한 텍스트의 언어 코드를 지정할 때 사용. 일반적으로 HTML 문서의 언어 코드는 html 태그의 lang 속성에 작성한다. 웹 전근성을 높이기 위해서 기본 설정된 문서에서 특정 언어가 쓰인다면 해당 언어 코드를 명시하면 좋다.
data-* 속성
<p data-name="spiderMan" data-hero="true">...</p>data-* 속성은 사용자 커스텀 속성을 만든다. HTML5에서는 사용자가 원하는 속성을 만들수 있게 구현되어 있다.
