Front-End/HTML

[HTML] HTML에서의 주석문 / p태그, 제목태그, br태그, span태그 등

찐코딩 2021. 10. 6. 09:19 
<!--HTML에서의 주석문 - 주석문 단축키 : ctrl + shift + /(슬래시 키) -->

<!--HTML 문서의 형식 : HTML 버전 1,2,3,4,5 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--웹 문서(html)의 시작을 의미-->
<html>

<!--머릿말(meta, title)
		: 문서의 정보, 웹 문서에 필요한 외부 파일과 옵션을 설정하는 공간-->
<head>

<!--meta 태그 : 기타 정보 - 문서의 타입, 문자의 인코딩 지정(설정)-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!--title 태그 : 웹 브라우저의 제목 표시줄에 나타나는 내용 -->
<title>처음 웹 페이지</title>
</head>

<!--문서의 본문 시작 태그 : 웹 브라우저에 보여질 내용-->
<body>

	<!--HTML(HyperText Markup Language)
		- HTML은 웹 페이지를 만드는 데 사용이 되는 언어이며, 
		매우 쉽게 배울 수 있는 장점이 있음.
		- 모든 태그는 미리 정의가 되어 있어서 각각의 태그와 속성을 사용하면 됨-->
	
	<!--요소 : HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등)
		태그 : 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게
			  분류한 규칙. 요소를 만들 때 사용하는 작성 방법
			  여는 태그와 닫는 태그의 쌍으로 구성되어 있음
			  예) <시작 태그> 텍스트 </종료 태그>
		-->	
		
	<!--제목 태그 : 제목을 나타내는 태그 ==> <hn> </hn> ==> n 숫자(1~6) 
		제목 태그의 특징 : - 글자가 굵게 나타난다(bold)
	               - 상단과 하단에 여백(줄)이 발생한다.
	               - 제목태그는 숫자를 건너 뛰는 방법을 피해 줄 것.
	 -->

	<h1>제목 태그1</h1>
	<h2>제목 태그1</h2>
	<h3>제목 태그1</h3>
	<h4>제목 태그1</h4>
	<h5>제목 태그1</h5>
	<h6>제목 태그1</h6>
	
	HTML의 제목태그입니다.
	
	
<!--문서의 본문 끝 태그-->
</body>

<!--웹 문서(html)의 끝 -->
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- p(paragraph) 태그 : 하나의 문단(문장, 단락)을 사용하는 태그.
	                                               글을 쓸 때 문단을 만들어서 보기 좋게 써야 할 때 사용하는 태그.
	-->
	
	<!-- br 태그 : 줄바꿈을 해 주는 태그. 끝태그가 없음.
	              ==> 끝 태그가 없는 태그를 단독 태그라고 부름. -->
	
	<!-- hn(제목태그)와 p태그는 자체적으로 줄바꿈 기능을 제공해 줌.
	     - 상단 한 줄, 하단 한 줄 공백을 지원해 줌.
	     - 한 줄 전체 영역이 설정. (블록레벨 요소)
	 -->
	<p>
		1절 : 동해물과 백두산이 마르고 닳도록   <br />
		          하느님이 보우하사 우리 나라만세. <br />
		          무궁화 삼천리 화려 강산  <br />
		          대한사람 대한으로 길이 보전하세.
	</p>
	
	<p>
		2절 : 남산 위에 저 소나무 철갑을 두른 듯   <br />
		          바람서리 불변함은 우리 기상일세. <br />
		          무궁화 삼천리 화려 강산  <br />
		          대한사람 대한으로 길이 보전하세.
	</p>
	
	<!-- span 태그는 단어나 문장의 글자만 선택을 하는 태그. (인라인레벨 요소) -->
	<span>span 태그입니다.</span>
	<span>span 태그입니다.</span>
	<span>span 태그입니다.</span>
	
</body>
</html>

 

저작자표시 비영리