1. HTML 문서의 구조
일반적으로 HTML문서는 다음과 같은 구조를 가진다
1) <!DOCTYPE html>
• 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다
• HTML은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로
사용되고 있는 HTML버전을 사용하기 위해 적어주는 타입이 바로 'html'이다
2) <html>~</html>
• 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다
• <html>에서부터 HTML문서가 시작되고 </html>에서 HTML문서가 끝난다
• 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다
3) <head>~</head>
• 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은
모두 이 태그에 들어간다
• <meta charset="uft-8">
→ 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다
문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로,
영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다
• <title>~</title>
→ 문서의 제목을 나타낸다
콘텐츠는 브라우저 탭에 표시된다
• <style>
→ HTML 문서를 위한 style 정보를 정의한다
ex) <style>
body {
background-color: yellow;
color: blue;
}
• <script>
→ client-side JavaScript를 정의한다
ex) <link rel="stylesheet" href="style.css">
• <style>
→ HTML 문서를 위한 style 정보를 정의한다
ex) <script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
4) <head>~</head>
• 실제 브라우저 화면에 표시될 내용을 입력하는 태그이다
• 여기에는 다음과 같은 유형의 태그들이 포함될 수 있다
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
2. HTML 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박찬영</title>
</head>
<body>
화이팅
</body>
</html>
블로그 이전했습니다 -> https://young-code.tistory.com