웹 프로그래밍/HTML5

Ch.02-2 HTML 기본 문서 만들기

ddongyeonn 2020. 3. 13. 16:02

타이틀 달기, 문단 제목 달기, 툴팁 설정

<!DOCTYPE html>
<html>
<head><title>문단 제목 달기</title></head>
<body>
	<h1> 1장 홈페이지 만들기 </h1>
	<h2> 1절 html 언어 </h2>
	<h3 title="h3태그로 작성되었습니다">1. 웹</h3>
	<h6>1.1.1.1. 통신</h6>
</body>
</html>

  • 타이틀 달기 : <title> 문단 제목 달기 </title> - 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다.

  • 문단 제목 달기 : <h1>...<h6> - html은 <h1>~<h6>의 6개의 태그를 제공하며 h1이 가장 크고 h6가 가장 작다.

  • 툴팁 달기 : <h3 title="툴팁내용 출력 부분"> - 마우스가 해당 본문에 올라갈 때 설명문(툴팁)이 출력되며 title속성으로 지정한다.

타이틀, 문단제목, 툴팁달기

단락 나누기, 수평선 긋기, 개행 하기

<!DOCTYPE html>
<html>
<head><title>웹 프로그래밍 연습</title></head>
<body>
	<h3>단락 나누기</h3>
		<p>첫번째 단락입니다.</p>
		<p>두번째 단락입니다.</p>
		<p>세번째 단락입니다.</p>

	<h3>수평선 긋기</h3>
		<hr>
			hr태그는 horizontal에서 유래되었습니다.
		<hr>
			즐거운 수평선 긋기

	<h3>새로운 줄로 넘어가기</h3>
		새로운 줄로 넘거가게 됩니다<br>
		또 넘어가게 됩니다.<br>
</body>
</html>

  • <p>~</p> - 문단을 여러 단락으로 나누어 사용할 수 있다. 문단을 표현하므로 </p> 다음에는 자동 개행이 된다.

  • <hr> - 수평선을 삽입하는 태그이다.

  • <br> - Enter키를 입력해도 한 개의 빈칸으로 처리되기 때문에 개행하고자 하면 <br>태그를 이용해야 한다.

단락 나누기, 수평선 긋기, 개행 하기

텍스트 꾸미기

<!DOCTYPE HTML>
<html>
<head><title>텍스트 꾸미기</title></head>
<body>
	<h3>텍스트 꾸미기</h3>
	<hr>
	<p>
		<b>진하게</b><br>
		<strong>중요한</strong><br>
		<em>강조</em><br>
		<i>이탤릭으로 강조</i><br>
		<b><i>진하게 이탤릭으로 강조 </i></b><br>
		보통문자<small>한단계 작은 문자</small><br>
		<del>삭제</del><br>
		<ins>추가</ins><br>
		보통문자의<sup>윗첨자</sup><br>
		보통문자의<sub>아래첨자</sub><br>
		<mark>하이라이팅</mark><br>
	</p>
</body>
</html>

텍스트 꾸미기

블록 태그와 인라인 태그

  • 블록 태그 
    • 항상 새 라인에서 시작하고 브라우저의 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지하는 태그
    • <p> <h1> <div> <ul>
  • 인라인 태그 
    • 블록에 삽입되어 블록 콘텐트의 일부를 표현하는 데 이용
    • <strong> <a> <img> <span>

 

 

 

-참고문헌: 생능출판 명품 HTML5+CSS3+Javascript 웹 프로그래밍 황기태 저