[HTML]01_HTML 기초-h1, hr, p, br, pre, div, span, style 태그 & 회피문자

Frontend/HTML

[HTML]01_HTML 기초-h1, hr, p, br, pre, div, span, style 태그 & 회피문자

sukii 2023. 12. 21. 17:55

🤔HTML(Hyper Text MarkUp Language)이란?

태그(Tag)를 사용하여 웹문서의 구조적 틀을 만드는 마크업 언어

*MarkUp Language(마크업 언어): 웹문서 작업용 언어로 문서의 골격을 만드는 언어

*브라우저 엔진에 의해 해석되어 실행(출력)되는 언어 - CSL(Client Script Language) : HTML, CSS, JavaScript
* HTML이 골격을 만들고, CSS가 색을 입히고, JavaScript가 동적인 기능을 부여

🔸태그를 사용하여 웹문서(HTML 파일) 작성 - 태그는 대소문자 미구분
🔸시작태그와 종료태그가 하나의 그룹으로 묶여져서 사용 - HTML 태그에는 독립태그 존재

<!--예시-->
<h1 align="left" title="문단의 제목을 출력합니다.">문단제목-1</h1>

🔸시작태그와 종료태그 사이에는 하위태그 또는 태그내용 작성

<!--예시-->
<body>
	<h1 align="left">문단제목-1</h1>
</body>

🔸시작태그에 속성과 속성값을 사용하여 태그를 다양하게 표현
=> 동일한 이름의 속성 사용 불가능

실습 예제👩‍💻

*주석문 쓰는 법 :

<!-- DOCTYPE : 웹문서의 종류 및 버전을 표현 - HTML5를 사용하여 작성된 웹문서(HTML 문서) -->
<!DOCTYPE html>
<!-- html 태그 : HTML 문서를 작성하기 위해 사용되는 최상위 태그 -->
<!-- => 하위태그 : head 태그, body 태그 -->
<html>
<!-- head 태그 : HTML 문서에 대한 정보를 제공하기 위한 태그 -->
<!-- => 하위태그 : meta 태그, title 태그, script 태그, style 태그, link 태그 등 -->	
<head>
<!-- meta 태그 : HTML 문서의 메타 데이타를 태그 속성과 속성값으로 제공하는 태그 -->
<!-- charset 속성 : HTML 문서의 문자형태(CharacterSet - Encoding)를 속성값으로 설정  -->
<!-- => 브라우저가 HTML 문서를 전달받아 해석하여 실행하기 위한 문자의 인코딩 방식 제공 -->
<!-- => 기본 속성값 : ISO-8859-1(서유럽어) -->
<!-- => 한글 관련 캐릭터셋 : euc-kr(완성형), utf-8(조합형) -->
<!-- => 한글 사용 시, utf-8을 더 권장함 -->
<meta charset="UTF-8">
<!-- title 태그 : HTML 문서의 제목을 제공하기 위한 태그 - 브라우저에 페이지 제목으로 출력 처리 --> 
<title>HTML</title>
</head>
<!-- body 태그 : 브라우저에 출력될 내용(Contents)을 제공하기 위한 태그 - Document -->
<!-- => 하위태그 : header 태그(머릿부), navi 태그(메뉴), section 태그(몸체부), article 태그(본문)
, aside 태그(보조문), footer 태그(꼬릿부), h1 태그, p 태그, img 태그 등 -->
<!-- body 태그의 하위태그를 박스모델(BoxModel)로 표현하면 블럭 레벨 태그와 인라인 레벨의 태그로 구분 -->
<!-- 블럭 레벨 태그(Block Level Tag) : 하나의 태그로 표현되는 박스모델이 전체 라인을 모두 사용하는 태그 -->
<!-- => div 태그, p 태그, h1 태그, ol 태그, ul 태그 등 -->
<!-- 인라인 레벨 태그(Inline Level Tag) : 하나의 태그로 표현되는 박스모델이 라인을 일부분만 사용하는 태그 -->
<!-- => span 태그, img 태그, input 태그, select 태그 등 -->
<!-- => 인라인 레벨 태그의 하위 태그로 블럭 레벨 태그를 사용하면 경고 발생 -->
<body>
	<!-- h1~h6 태그 : 문단의 제목을 출력하기 위한 태그 - 1~6(제목의 크기를 표현)  -->
	<!-- align 속성 : 태그내용을 정렬하기 위한 속성 : left(기본), right, center, justify -->
	<!-- title 속성 : 툴팁 기능을 사용하여 설명문(속성값)을 제공하기 위한 속성 -->	
	<h1 align="left" title="문단의 제목을 출력합니다.">문단제목-1</h1>
	<h2 align="center">문단제목-2</h2>
	<h3 align="right">문단제목-3</h3>
	<h4 align="justify">문단제목-4</h4>
	<h5>문단제목-5</h5>
	<h6>문단제목-6</h6>
	
	<!-- hr 태그 : 수평선을 출력하기 위한 태그 -->
	<hr>
	<!-- width : 태그(박스모델)의 폭을 변경하기 위한 속성 - 속성값 : 크기 -->
	<!-- => 크기 또는 위치를 표현하는 단위 : px(기본) - 절대값, %(백분율) - 상대값 --> 
	<hr align="left" width="600">	
	<hr align="left" width="50%">	
	
	<!-- p 태그 : 문단을 출력하기 위한 태그 -->
	<!-- => 태그내용이 박스모델의 폭을 벗어날 경우 자동 줄바꿈 처리되어 출력 -->
	<!-- => HTML 문서에서 엔터(Enter)로 줄바꿈 처리가 불가능하여 다수의 공백(Space)은 하나의 공백으로 처리되어 출력 --> 
	<p>CSL(Client Script Language - HTML, CSS, JavaScript)와
		 SSL(Server Script Language - JSP)를                        배우도록 하겠습니다.</p>
		 
	<!-- br 태그 : 줄바꿈 처리하기 위한 태그 -->	 
	<p>HTML은 웹문서를 구조적으로 표현하기 위한 언어이며<br>CSS는 웹문서에 스타일을 제공하기 위한 언어이다.</p> 
	
	<!-- HTML에서 표현 불가능한 문자는 회피문자(Escape Character)로 표현하여 출력 처리 -->
	<!-- => &nbsp; : 공백, &lt; : < 문자, &gt; : > 문자, &amp; : & 문자 등 -->
	<p>&lt;홍길동님&gt; &amp; &lt;임꺽정&gt;님&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;반갑니다.</p>
	
	<!-- pre 태그 : 브라우저에 태그내용을 그대로 출력 처리하는 태그 -->
	<!-- => 공백 또는 엔터를 사용하여 출력 처리 가능 -->
	<pre>홍길동님,                     만나서 반갑습니다.
	다음에 다시 만나요.</pre>
	
	<!-- div 태그 : 범위를 설정하기 위한 태그 - 블럭 레벨 태그 -->
	<!-- span 태그 : 범위를 설정하기 위한 태그 - 인라인 레벨 태그 -->
	<!-- style 속성 : 태그에 CSS 스타일을 적용하기 위한 속성 -->
	<!-- => 속성값 : CSS 스타일 관련 속성과 속성값을 사용 -->
	<div style="font-size: 24px;">오늘은 <span style="color: red;">
		2023년 12월 20일 수요일</span>입니다.</div>
</body>
</html>

실행결과⬇️

참고/출처:

https://blog.naver.com/jinsoo4474/223232720048

울산자바스크립트학원 - 프로그래밍 언어와 마크업 어는 무엇이 다를까??

안녕하세요~! 여러분은 이 글을 무엇으로 보고 계신가요? 스마트폰인가요? 컴퓨터인가요? 타블렛인가요? 무...

blog.naver.com