<DO it! 책 기반 작성> 작성일 : 2021.10.07~10.27
1. HTML기본기 다지기
HyperText Markup Language : 웹에서 자유롭게 오갈 수 있는 웹문서를 만드는 언어
- 태그는 소문자 사용을 권장한다.
- <>여는태그, </> 닫는태그
1.1 HTML문서의 기본구조
- <!doctype html> : 현재문서가 html5 언어로 작성된 웹 문서라는 뜻
- <html> ~ </html> : 웹문서의 시작과 끝을나타냄. 웹브라우저가 이태그 처음부터 끝까지의 소스를 읽어 html문법에 맞추어 브라우저에 표시한다.
- <head> ~ </head> : 웹브라우저가 웹문서를 해석하기 위해 필요한 정보들을 입력하는 부분. 실제문서내용이 아니라 문서제목만 브라우저 창에표시되고 나머진 화면에 뜨지 않는다. 스타일이나 스크립트 등이 표함되기도 한다.
- <body> ~ </body> : 실제로 웹 브라우저 화면에 나타날 내용. 태그대부분은 여기들어감
1.2 <head> </head>에 들어가는 것
- <html lang="ko"> 이 태그는 문서에서 사용할 언어를 지정한다.
→ 명시하는 이유 : 특정언어로 제한해 검색할때 그 대상이 되게하기 위해, 화면낭독기에서 웹 문서를 소리내어 읽어줄때 그 언어에 맞추어 발음 억양 목소리등이 달라질 수 있음.
-
<title> 태그
검색엔진과 방문자가 내용을 추측할수있음.
- 콘텐츠는 쉽게 네비게이션 할 수 있어야 한다. →인터넷 웹 콘텐츠 접근성 지침2.0 중,,
- 각 페이지마다 다른 제목이 들어가야하며, 특수기호를 사용할 수없고 긴문장도 지양해야한다.
-
<meta> 태그
문자인코딩 방법, 웹문서 키워드 등을 저장할 수 있다. 웹문서정보를 검색엔진에 전달하는역할
<aside>
💡 <meta charset = "utf-8">
</aside>
위 '문자 인코딩'이 가장중요! 한글과 영문을 비롯해 모든언어를 표시하는 utf-8방식 사용
<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력">
위 코드로 문서에 관한 간단한 설명을 할 수 있으나 국내 포털 사이트는 블로그 중심이라 제역할을 못한다.
이외에 <style> 과 <link> 태그 등이 사용된다.