기본구성요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html><!-- html5 문서 형식이라고 선언하는 선언부 -->
<html lang="en"><!-- 주 사용 언어가 영어임을 나타낸다. -->
<head>
<!--
[ head 요소에 포함 되는 내용 ]
1. 주요 설정 정보
2. 웹 페이지의 제목
3. style 요소
4. script 요소
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_basic2.html</title>
</head>
<body>
<!-- body 요소에는 웹브라우저에 표시할 내용과 script 요소가
들어 갈수 있다. -->
<script>
//페이지가 로딩되는 시점에 해석되는 javascript
alert("페이지 로딩이 완료 됩니다.");
console.log("하나");
console.log("두울");
console.log("세엣");
</script>
</body>
</html>
<head> 태그 내부에 들어가는 대표적인 태그들의 목록
<title> 웹 페이지의 제목 <title></title>
<meta>웹 페이지의 보이지 않는 정보를 제공<meta />
<link> css 파일분리 참조 <link/>
<style> CSS 영역 <style></style>
<script> javascrpt 영역 <script></script>
<body> 태그
<body></body>
<body> 태그는 문서의 몸통을 나타내는 태그
<head> 태그와 대조적으며, 브라우저 화면에 보이는 것들이 주로 들어감
<body> 태그 내부에 들어가는 대표적인 태그들의 목록
<br> 줄바꿈 단독 </br>
<p> 하나의 문단 <p></p>
<b> 태그는 글자를 굵게 표시 bold의 약자 <b></b>
<i> 글자를 기울여서 표시 italic의 약자 <i></i>
<h1>~<h6> 문단의 제목 <h1></h1>
<a> 하이퍼링크 <a></a> <a href="http://www.naver.com">Go NAVER</a>
<img> 이미지 삽입 <img src="my_profile.png" width="500" height="300">
alt 이미지를 대체문구
<table> HTML 문서에서 표를 만드는 태그 <table></table>행, 열<tr>, <td>
<div> 레이아웃을 나눔 CSS와 연동 <div></div>
<span> inline <span></span>
<ul> 순서없는 목록 (unordered list) <ul> <li></li> </ul>
<ol> 순서있는 목록 (ordered list) <ol> <li></li> </ol>
<li> 목록을 만드는 태그 list <li></li>
<dl> 요소 설명 목록 <dl> <dt><dt> <dl> , <dl> <dd><dd> <dl>
<form> 웹 페이지에서의 입력 양식
<!-- 여기에 작성하는 문자열을 웹브라우저가 무시 해요 -->
<h1> 태그
<h1></h1> , <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>,
문단의 제목
<p> 태그 (paragraph)
<p></p>
하나의 문단을 만들 때
<br> 태그
<br> 단독형식
줄바꿈 행개행
<div> 태그 (Division)
<div></div>
문단을 묶는 요소, 레이아웃을 나누는데 쓰임
다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰임
<span> 태그
<span></span>
<div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰임<li> 태그
<li></li>
이 태그는 단독으로 쓰이지 않음
<ul></ul> 혹은 <ol></ol> 태그 내부에 쓰임
<ol> 태그는 번호를 매겨 순서가 있는 (ordered list) 목록을 만듬
<ul> 태그는 순서없이 모양으로 (unordered list) 목록을 만듬
*<ul>요소는 위아래 마진을 가지고 또한 왼쪽 페딩을 기본적으로 가지고 있음
*ul 과 li 요소는 모두 블럭 요소
<table> 태그
<table></table>
태그는 HTML 문서에서 표를 만드는 태그 <html>
<body>
<ol>
<li>목록1</li>
<li>목록2</li>
</ol>
<ul>
<li>목록1</li>
<li>목록2</li>
<ol>
<li>목록3-1</li>
<li>목록3-2</li>
</ol>
</ul>
</body>
</html><tr>, <td>
<tr> 태그는 표의 행을 나타냄
<td> 태그는 표의 열을 나타내며, <tr> 태그 하위에 위치
<th> 열의 제목이 들어가는 셀 (칼럼제목)
<td> 내용이 들어가는 셀
'HTML_CSS_JavaScript > analysis of web page' 카테고리의 다른 글
| 클론코딩 (0) | 2022.10.08 |
|---|---|
| useful site.. (0) | 2022.10.08 |
| youtube Wireframe (0) | 2022.10.04 |
