-
2. HTML 문서개발자 수업/HTML5 2021. 10. 29. 16:40
0. <!DOCTYPE html>
1) 문서의 HTML 버전을 지정
2) DOCTYPE (DTD, Document Type Definition)
3) 마크업 언어에서 문서 형식을 정의
4) 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
5) HTML5 (표준)
1. <html></html>
1) 문서의 전체 범위
2) HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할
2. <head></head>
1) 문서의 정보를 나타내는 범위
2) 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은 웹 페이지의 보이지 않는 정보를 작성하는 범위
3) <meta charset="UTF-8">
HTML 문서(웹 페이지)의 제작자, 내용, 키워드같은 여러 정보를 검색엔진이나 브라우저에게 제공
- charset : 문자인코딩 방식<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ezenac</title> <link rel="stylesheet" href="./main.css"> <link rel="icon" href="./favicon.png"> <style type="text/css"> div { color: red; } </style> <script type="text/javascript" src="./main.js"></script> <script type="text/javascript"> console.log('Hello World!!'); </script> </head> <body> <div>10월의 마지막 밥</div> </body> </html>
4) <title></title>
- HTML 문서의 제목(title)을 정의
- 웹 브라우저 탭에 표시됨
5) <link></link>
- 외부 문서를 가져와 연결할 때 사용(대부분 CSS 파일)
<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">
rel : 필수 속성, 가져올 문서와 관계
href : 가져올 문서의 경로<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ezenac</title> <link rel="stylesheet" href="./main.css"> <link rel="icon" href="./favicon.png"> <style type="text/css"> div { color: red; } </style> <script type="text/javascript" src="./main.js"></script> <script type="text/javascript"> console.log('Hello World!!'); </script> </head> <body> <div>10월의 마지막 밥</div> </body> </html>
6) <style></style>
- 스타일(CSS)을 HTML 문서 안에서 작성하는 경우에 사용
<style type="text/css">
div {
color: red;
}
</style><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> p { background-color: yellow; border: solid 1px red; } </style> </head> <body> <script type="text/javascript"> document.write("<p>단락입니다.</p>") </script> </body> </html>
7) <script></script>
- 자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우에 사용
<script type="text/javascript" src="./main.js"></script>
src : 자바스크립트(JS) 파일 가져오는 경우
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function light_on() { document.getElementById("image").src="../images/light_on.png"; } function light_off() { document.getElementById("image").src="../images/light_off.png"; } </script> </head> <body> <button onclick="light_on()">켜기</button> <button onclick="light_off()">끄기</button> <img id="image" alt="전구" src="../images/light_off.png"> </body> </html>
3. <body></body>
1) 문서의 구조를 나타내는 범위
2) 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지같은 웹 페이지에 보여지는 구조를 작성하는 범위<!DOCTYPE html> <!-- * 자바스크립트 이용하여 웹 브라우저 화면에 변수, 데이터를 출력하는 방법 1) document.write() 이용 2) window.alert() 이용 3) console.log() 이용 4) innerHTML 이용 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> let a = 10; let b = 20; c = a + b; document.write(c); let name = '이순신'; window.alert(name); console.log(10+20); </script> </body> </html><!DOCTYPE html> <!-- * innerHTML : HTML 요소에 내용을 삽입하는데 사용됨 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h3>innerHTML을 이용하여 HTML 요소에 내용 추가하기</h3> <p id="inner"></p> <h3>innerHTML을 이용하여 HTML 요소에 내용 변경하기</h3> <p id="inner02">이순신</p> <script type="text/javascript"> document.getElementById("inner").innerHTML = "이것을 추가했네요"; </script> <script type="text/javascript"> document.getElementById("inner02").innerHTML = "유성룡"; </script> </body> </html>'개발자 수업 > HTML5' 카테고리의 다른 글
HTML5/src/main/webapp/lab03 (0) 2021.11.02 5. CSS 기본 문법 (0) 2021.11.01 4. HTML 문서 구조 (0) 2021.11.01 3. Review (0) 2021.11.01 1. 개요 (0) 2021.10.28