□ DOCTYPE
○ html 최상단에 사용 태그
○ 해당 파일 문서를 브라우저가 다르게 렌더링 하지 않도록하기 위해 html을 명시해주는 특수태그
□ lang : 문서언어 설정태그 ex)ko, en 등
□ HEAD/BODY태그
○ HEAD 태그안에는 html 문서를 대표하는 필요데이터 기재
○ BODY 태그안에는 html 문서내용을 기재
□ META태그 : 문서전반의 정보 표시기재
○ charset : 문자 인코딩 방식 설정 ex)utf-8등
○ name : 메타정보
- description
- keywords
- author
□ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
○ 호환성관련 태그로 인터넷 익스플로러에서 최신 표준모드로 랜더링되도록 설정
○ 호환성 이슈로 기본적으로 html 문서에 포함되는 것이 좋음
□ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
○ 반응형웹 관련 태그
○ viewport : 웹브라우저 상에서의 현재 창에서 문서를 볼 수 있는 영역
○ 설정값
- width : 초기 뷰포트 너비 (정수로 표기)
- user-scalable : 웹페이지 확대허용여부
- initial-scale : 디바이스 너비와 뷰포트 너비 비율
- maximum-scale : 최대 확대비율 설정
- minimum-scale : 최소 확대비율 설정
□ link : 외부 데이터를 html문서에 가져올때 사용
○ rel : html 문서와 가져온 데이터와의 관계 표기
○ href : 외부데이터 위치/경로
□ style : html에서 css 코딩을 할 때 사용
* css코드는 파일형태로 저장후 link태그를 사용해 html 문서에 적용하거나, html문서에 style 태그를 사용해 적용하는 방법으로 나뉨
□ script : javascript 코드를 html 문서에 작성시 사용
<!--(emmet 단축키) html:5 입력 후 tab 키를 치면 아래와 같은 기본 코드(기본 템플릿)가 자동생성됨-->
<!DOCTYPE html> <!--해당 문서가 HTML을 알리며 부라우저가 랜더링하지 않도록 하는 부분-->
<html lang="en"> <!--언어설정으로 한국어는 'ko'로 설정-->
<head> <!--헤더부분 : 문서를 대표하는 제목태그로 title과 meta 태그를 사용함-->
<!--meta태그 : 문서 전반에 걸친 정보 표시. name으로 description, keywords, author 등을 많이 사용함-->
<meta charset="UTF-8">
<meta name = "description" content= "첫 실습 코드"> <!--검색 키워드-->
<meta name = "keywords" content= "html/css">
<meta name = "author" content= "DH.KIM">
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!--인터넷 익스플로러 IE 최신 표준 모드로 랜더링되는 태그. 호환성 이슈로 반드시 기재해야함-->
<!--viewport : 현재 화면에 보여지고 잇는 직사각형 영역으로 웹 브라우저 상에서는 현재 창에서 문서를 볼 수 있는 화면의미-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<!--CSS파일을 적용 및 연동하기위해 link 태그사용. 주로 css파일과 아이콘 파일을 가져오기 위해 사용-->
<link rel = 'stylesheet' href = 'style.css'>
<link rel = 'icon' href = '---.png'>
<title>테스트입니다</title> <!--웹 헤더시트 명-->
</head>
<body> <!--바디부분-->
</body>
</html>'HTML&CSS > 기본상식' 카테고리의 다른 글
| 모던웹 접근성, 크로스 브라우징 등 (0) | 2023.11.08 |
|---|---|
| 시멘틱 웹(Semantic Web) 태그 (0) | 2023.11.07 |
| 웹 기본기술1 (0) | 2023.10.30 |
