HTML 문서
모든 HTML 문서는 문서 유형 선언으로 시작합니다. : <!DOCTYPE html>
HTML 문서는 <html>로 시작하고 </html> 로 끝납니다.
HTML 문서에서 웹 브라우저를 이용해서 보이는 부분은 <body> 와 </body> 사이에 작성합니다.
<!DOCTYPE html>
<html>
<body>
<h1>첫번째 제목</h1>
<p>첫번째 단락</p>
</body>
</html><!DOCTYPE> 선언
<!DOCTYPE> 선언은 HTML 문서의 유형을 나타내며 브라우저가 올바르게 페이지를 보여줄수 있도록 도움을 줍니다.
<!DOCTYPE> 는 HTML 태그 앞에 한번만 선언되어야 합니다.
<!DOCTYPE> 선언은 대소문자를 구별하지 않아도 됩니다.
<!DOCTYPE html> <!-- HTML5 에 대한 선언 –>HTML 제목
HTML <h1> 에서 <h6> 로 정의할 수 있습니다.
숫자가 낮을수록 중요한 제목입니다.
숫자가 낮을수록 제목의 크기가 큽니다.
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
코드펜 결과화면 : https://codepen.io/astraljoker/pen/ZEXvLee
HTML 단락
HTML 단락은 <p> 태그로 정의합니다.
<p>이것은 단락입니다</p>
<p>이것은 또다른 단락입니다</p>
코드펜 결과화면 : https://codepen.io/astraljoker/pen/gOGogmJ
HTML 링크
HTML 링크를 <a> 태그로 정의합니다.
<a href="https://blog.naver.com/astraljoker">블로그 링크</a>
결과화면 : https://codepen.io/astraljoker/pen/ZEXvLKe
href 에 이동하고 싶은 링크의 주소를 입력합니다.
a 태그 사이에 입력한 텍스트가 링크의 텍스트가 됩니다.
HTML 이미지
HTML 이미지는 <img> 태그로 정의합니다.
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="구글이미지" width="272" height="92">
결과화면 : https://codepen.io/astraljoker/pen/bGoagWN
src : 이미지의 주소
alt : 이미지의 주소가 잘못 되었거나 지워졌을때 대신 보여주는 텍스트
width : 표시할 이미지의 가로 크기
height : 표시할 이미지의 세로 크기
HTML 소스코드 보기
크롬 브라우져를 연 후에 마우스 오른쪽버튼 -> 페이지 소스 보기를 클릭하면 HTML 소스코드를 볼 수 있습니다. 엣지, 파이어폭스, 사파리도 비슷한 방법으로 볼 수 있습니다.
'프로그래밍 > HTML' 카테고리의 다른 글
| html 강좌 - HTML 소개 (0) | 2021.12.25 |
|---|---|
| html 강좌 - html 이란 (0) | 2021.12.25 |
댓글