meta요소의 내용은 브라우저 화면에 보이지 않는 영역입니다. 그렇기 때문에<head>의 자식 요소로 사용되어야 합니다. 일반적인 문서들도 작성자나 제목 등의 정보들을 문서의 본문에 담지 않듯이,html문서의 데이터도 별도의 공간인<head>에 데이터를 담고, 사용하는 데이터를 위한 데이터라고 할 수 있습니다.
<meta>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="application-name" content="velog" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NAVER</title>
</head>- 위는 일반적으로 많이 설정하는
<meta>의 속성값입니다. charset속성은 어떤 문자의 형식을 사용할지 설정하는데,UTF-8은 세계 각국의 언어를 사용할 수 있습니다.<title>은html문서의 제목을 나타냅니다. 제목은 한 눈에 보고, 페이지의 목적을 알 수 있게 간결하게 작성하는 것이 좋습니다. 또한, 브라우저의 북마크명으로도 사용하기 때문에 별도의 변경없이 이용될 수 있는 문구로 작성하는 것이 좋습니다.
name과content속성을 같이 사용하면, 메타데이터를 key-value 형태로 제공할 수 있습니다. 그러므로 현재application-name을velog로 설정하고,viewport의 값을width=device-width, initial-scale=1.0로 설정한 것을 알 수 있습니다.viewport의content는width를 기기의 너비만큼 활용하고, 장치너비와 뷰포트 너비의 비율을 1:1로 정한 의미입니다.title은 페이지를 이동할 때마다, 변할 수도 있기 때문에application-name에 서비스의 이름을 작성하는 것을 권장하고 있습니다.
<link>, MIME타입
<link href="style/example.css" rel="stylesheet" type="text/css" >- 외부 리소스를 연결하기 위해 사용하는 요소입니다.
rel속성은 relation의 약자로 연결하는 리소스와의 관계를 말하고,href속성으로 연결하는 외부 리소스 파일을 연결합니다. - 주로
stylesheet,icon,이미지등을 연결하기 위해 사용합니다. MIME타입이란 클라이언트에게 전송된 문서의 타입을 알려주기 위해서 작성합니다. 웹에서는 파일의 확장자로는 문서를 구분할 수 없기 때문에, 서버가 정확히 설정하는 것이 중요합니다.type속성을 통해 해당 파일이text로 이루어진css파일임을 알려줍니다.
<style>
<style>
p {
color: red;
}
</style>- 해당 문서의 스타일을 지정하기 위해,
<link>로 외부 리소스를 활용할 수도 있지만,<style>요소 내에서도 스타일을 지정할 수 있습니다. 하지만, 일반적으로css코드의 양이 많아지면 외부 파일로 변경합니다.
<script>
<head>
<script>
console.log('head');
</script>
</head>
<body>
<script>
console.log('body');
</script>
</body> <script>는<head>와<body>내에서 모두 사용이 가능합니다. 다만, 브라우저가html문서를 위에서 해석하는데,<script>태그를 만나면script내의 작업이 끝날 때까지 다른 작업을 실행하지 않습니다. 그렇기 때문에 상단에 위치했을 때, 코드가 복잡하다면 화면이 자연스럽지 않게 동작할 수 있습니다. 그런 현상을 방지하기 위해,<body>의 가장 아래 부분에 위치 시키는 것이 권장됩니다.
자기개발 :)