- 간단한 HTML 문서
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE html> : 문서형식 선언
<html> </html> : html 문서의 시작과 끝을 나타냄
<head> </html>: html 페이지가 어던 정보를 담고 있는지 알려줌
<title> </title>: html 페이지의 제목 지정(브라우저의 제목 표시줄 또는 페이지 탭에 표시됨)
<body> </body> : 문서의 본문 정의
<h1> </h1>: 큰 제목 정의
<p> </p>: 단락 정의- HTML 요소란 무엇인가?
: html 문서를 이루는 모든 것!
<태그네임>콘텐츠 작성</태그네임>
- HTML 제목
<h1>~<h6>태그로 정의- h 뒤의 숫자가 작아질수록 제목의 크기가 커진다
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>- HTML 단락
<p>태그로 정의<hr>로 콘텐츠 분리 가능
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p><br>태그를 이용해 줄나누기 가능
<p>This is<br>a paragraph<br>with line breaks.</p>pre태그를 이용해 입력된 내용 그대로 정의
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
- HTML 링크
a태그로 정의href특성으로 하이퍼링크 정의
<a href="https://www.w3schools.com">This is a link</a>- HTML 이미지
<img>태그로 정의src특성으로 이미지 입력 가능alt특성으로 대체 텍스트 입력 가능widthheight특성으로 너비, 높이 설정 가능
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">- HTML 스타일
style특성을 이용해 색상, 글꼴, 크기 등 요소에 스타일 추가 가능background-color: 요소의 배경색 정의
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>color: 텍스트 색상 정의
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>font-family: 글꼴 정의
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>font-size: 글꼴 크기 정의
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>text-align: 가로 텍스트 정렬 정의
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
감자에옹