(40) [HTML] 1일 HTML 기본

HTML이란?
(World Wide Web) 문서를 작성하는 Hyper Text Markup Language
웹 브라우저를 통해 사용자에게 보여 지는 문서의 내부 형식을 규정하는 언어

웹 페이지의 구성

HTML
웹 페이상에서 문단, 제목, 표 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 마크업 언어. 표준화된 태그로 웹 페이지를 작
javascript
객체 기반의 스크립트 프로그래밍 언어, 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근한 수 있는 기능을 가지고 있다.
동적으로 컨텐츠를 바꾸거나 멀티미디어를 다루고, 움직이는 이미지 등 웹페이지를 꾸며주도록 하는 프로그래밍 언어.
CSS
CSS는 HTML 문저 내에 서체의 종류,크기,색, 여백 등을 지정하여 사용자의 wed browser 환경에 상관없이 일정한 화면을 보여주는 기능

HTML 기본 형식

DTD
<html> ~ </html> : HTML 문서의 최상위 요소로 만든 HTML 문서는 하나의 <html> 요소를 갖는다
<head>~</haed> : HTML 문서의 메타데이터를 정의하며, 메타데이터는 HTML 문서에 대한 정보를 의미.
<body>~</body> : 웹 브라우저를 통해 보이는 내용(content) 부분을 나타낸다.

태그(tag)

요소 : 시작과 종료를 나타내는 태그로 이루어진 모든 명령
태그 '<과'>'으로 둘러 쌓인 요소의 일부로 시작 태그 (<tag>)와 종료 태그 (</tag>)로 이루어져 있지만 종료 태그가 없는 태그도 있다.
속성(atrribute) : 요소의 시작 태그 내에서 사용하며 명령어를 구체화 시키는 역할을 함. 태그와 속성은 대소문자를 구분하지 않는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> // UTF-8이 아닌 경우 한글 깨짐 
<title>Insert title here</title>
</head>
<body>

	<h3>환영 합니다.</h3>
	
	<p> 지금 시간은<%=s %> 입니다.</p>

</body>
</html>

주석

문서의 내용을 설명하거나 나중에 태그 분석 등에 사용하기 위해서 사용한다.

<!--주석 내용 입력-->

<html>~</html>

HTML 문서의 최상위 태그로 HTML 문서의 시작과 끝을 나타낸다. head 요소와 body 요소를 포함할 수 있다. lang 속성으로 내용에서 사용할 언어를 지정할 수 있다.

<head> ~ </haed>

html 요소 내부의 첫번째 요소로 사용. head 요소는 문서의 메타데이터 집합을 나타냄.

<title> ~ </title>

HTML 문서의 제목 표시 부분을 기술함. 이 부분에 기술된 내용은 브라우저의 제목 표시줄에 나타난다.

<meta>

charset : 문자 인코딩을 정의. HTML 5 추가 속성
content : 지정된 메타 키에 대한 관련 정보를 지정
http-equiv : HTTP 응답 메시지 헤더에 대한 정보를 제공

<body>~</body>

body 요소는 문서의 주된 콘텐츠를 나타낸다. HTML 문서에는 body 요소를 반드시 하나 기술한다.

<hx>~</hx>

글자크기를 지정하는 태그로 x는 '1~6'사이의 숫자(1: 가장 큰 글씨, 6: 가장 작은 글씨)

<h> 태그는 자동으로 줄 바꿈이 이루어지며 타이틀을 입력 할 경우에 보통 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h1> h1 태그 예제 </h1>
	<h2> h2 태그 예제 </h2>
	<h3> h3 태그 예제 </h3>
	<h4> h4 태그 예제 </h4>
	<h5> h5 태그 예제 </h5>
	<h6> h6 태그 예제 </h6>

</body>
</html>

~

문단 태그, 단락을 정의하며 한 문단을 나타내는데 사용한다. 태그는 과 유사한 정도의 줄 간격이 생긴다.

태그는 종료 태그를 생략할 수 있는데, 이는 웹 브라우저들이 태그와 만나게 되면 그 이전의 문단이 끝났다고 해석하기 때문이다.

줄 바꿈 태그

줄바꿈을 지정하는데 사용한다.

<hr>

수평선 태그

문서 내에 수평선을 넣어주는 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3> p 태그 / br 태그 / hr 태그 </h3>
	
	<p> p 태그 : 문단을 정의한다.</p>
	<p> 
		p 태그와 p 태스 사이는 약간의 공백이 생긴다.
		(br 태그 두번과 유사) 
	</p>
	<hr>
	
	<p> 
		br 태그 : 줄 바꿈 태그. <br>
		HTML은 엔터가 줄바꿈이 일어나지 않는다. 
	</p>
	<p>
		자바 
		안드로이드<br>
		CSS<br><br>
		Servlet
	</p>
	<hr>
	<hr color="blue">
	<hr width ="50%" align="center">
	<hr size ="5" width ="50%" align="right">
	<hr noshade="noshade" size="5" width="50%">
	
	
	<p> hr 태그 : 수평선 태그 </p>

</body>
</html>

Block Level Element

블록 레벨 요소. 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

특징

항상 새로운 라인에서 시작
화면 크기 전체의 가로 폭을 차지한다.(width : 100%)

lnline Level Element

인 라인 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치

특징

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>block 태그와 inline 태그</h3>
	
	<p> - block 태그</p>
	<p>
		한줄을 차지하는 태그로 항상 새로운 줄에서 지가(화면 전체 가로폭 사용)<br>
		width,height,margin,padding 속성 지정 가능<br>
		block 태그에 inline 태그 포함 가능<br>
		주요 block 태그 : div,h1~h6,p,ol,ul,table,form 등
	</p>
	<hr>
	
	<p> - inline 태그 </p>
	<p>
		다른 요소와 나란히 배치<br>
		content 요소 만큼 폭  차지 <br>
		width, height 는 무시
		margin,padding 은 좌우만 적용<br>
		inline 태그 뒤에 공백(엔터 포함)이 있으면 4px 정도의 공백이 생김 <br>
		주요 inline 태그 : span,a,img,input,select,textarea,button등 
	</p>
	<br>
	
	<h3>block 태그 예 </h3>
	<p style="background:yellow; ">자바</p> 
	<p style="background:#9F81F7; ">스프링</p>
	<p style="width: 200px; background: gray;">웹</p>
	<p style="background: blue;">CSS</p>
	<hr>
	
	
	<h3>inline 태그 예 </h3>
	<span style="background:yellow;">자바</span><span>스프링</span>
	<span style="background:#9F81F7; ">웹</span>
	<span style="background: blue;">CSS</span>
	<span style="background:red;">ORACLE</span>
	<hr>
	
	
	
</body>
</html>

특수문자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>HTML 특수문자</h3>
	
	<p> 대 	한 	민	국</p> <!-- 여러칸의 공백도 하나의 공백만 유효-->
	<p> 대&nbsp;&nbsp;&nbsp;&nbsp;한</p> <!-- 공백 -->
	<p>
		&lt;br%gt; : 라인을 넘긴다. 
	</p>
	
	
</body>
</html>

속성

id	요소의 유일한 식별자. 스타일시트 선택자
class	문서의 요소를 식별.
style	요소에 대한 인라인 스타일 지정
tabindex	탭 순서 위치 지정
title	해당 element의 제목 링크가 걸린 곳에 마우스를 가져 갔을때 노란 색 툴 팁으로 표시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
#header{	/*id selector*/
	font-size: 17px;
	font-family: 궁서체;
	color: blue; 
}


.box1{ /*class selector*/
	border: 3px solid gray;
	width: 300px;
	text-align: center;
	padding: 10px;
}

.box2{
	border: 1px solid red;
	width:  300px;
	height: 50px;
	padding: 10px;
}
</style>


</head>
<body>

	<h3 id="header">속성</h3> <!-- id속성 -->
	<!-- title, class 속성 -->
	<div title="웹" class="box1">웹프로그램이란?</div>
	<hr>
	
	<div class="box1">HTML 이란 ?</div>
	<hr>
	
	<!-- contenteditable : 내용 입력 가능 여부 지정 -->
	<div class="box2" contenteditable="true"></div>
	<hr>
	
	<p>data-* 속성 : 개발자가 임의의 속성을 html에 추가할때 사용</p>
	
	<ol>
		<li data-subuect = "java">자바</li>
		<li data-subuect = "spring">스프링</li>
		<li data-subuect = "android">안드로이드</li>
	</ol>
	
	
	
	
</body>
</html>

fomatting

<b>~</b>	글자 강조 태그(Bold), 볼드체 (굵은 글씨체) 키워드,리뷰에서의 상품명, 기타 보통 볼드체로 표현하는 텍스트에 사용
<em>~</em>	텍스트 강조 태그. 주관적인 강조를 나타낼뿐, 중요성을 나타내지는 않음
<i>~</i>	이탤릭체 태그. 다른 언어에서 널리 쓰이는 숙어의 인용
<dfn>~</dfn>	용어 정의 태그. 웹 페이지 내의 용어, 단어 등의 정의할 때 사용
<pre>~</pre>	서실 설정 텍스트 태그. 서식이 설정된 텍스트를 표현하는데 사용
<sub>~</sub>	첨자 텍스트 태그
<sup>~</sup>	슈퍼 스크립트 태그
<s>~</s>	텍스트 가운데 선 정의 태그. 문자의 가운데에 선을 넣어준다.
<u>~</u>	밑줄 태그
<cite>~</cite>	인용 태그
<code>~</code>	코드 예제 태그. 컴퓨터와 관련된 모든 코드 마크업 하는 코드. XML 속성이름, 파일이름 등 표시하기 위해 사

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>포멧팅 관련 태그</h3>

	<p>b 태그 : 진하게</p>
	<b>진하게 한잔</b>
	<p style="font-weight: bold;">진하게</p>
	<p style="font-weight: 600;">진하게</p>
	<hr>
	
	<p>em / i 태그 : 이탤릭체</p>
	<i>이탤릭</i> <em>이탤릭</em>
	<hr>
	
	<p>pre 태그 : 서식 설정 태그 </p>
<pre>
	서식이 설정된 텍스트를 표현하는데 사용 
	입력된 그대로의 상태로 보여줌 
	공백,탭,엔터등을 그대로 보존
	단, 		글자크기는 변함 
</pre>		
	<hr>
	
	<p>sub,sup 태그 : 아래 첨자,위첨자</p>
	<p>
		log<sub>2</sub>5<sup>3</sup>
	</p>
	

</body>
</html>

'💻 > HTML' 카테고리의 다른 글

(42) [HTML] 3일 HTML 폼 태그 (0)	2024.04.16
(42) [HTML] 3일 HTML List, Links 태그 (0)	2024.04.15
(41) [HTML] 2일 HTML 테이블 레이아웃 (0)	2024.04.15
(41) [HTML] 2일 HTML 레이아웃 (1)	2024.04.12
(40) [HTML] 1일 HTML 레이아웃 (0)	2024.04.11

Power Up!

(40) [HTML] 1일 HTML 기본

웹 페이지의 구성

HTML 기본 형식

태그(tag)

주석

<html>~</html>

<head> ~ </haed>

<title> ~ </title>

<meta>

<body>~</body>

<hx>~</hx>

<p>~</p>

<br>

<hr>

특수문자

속성

fomatting

'💻 > HTML' 카테고리의 다른 글

티스토리툴바

(40) [HTML] 1일 HTML 기본

웹 페이지의 구성

HTML 기본 형식

태그(tag)

주석

<html>~</html>

<head> ~ </haed>

<title> ~ </title>

<meta>

<body>~</body>

<hx>~</hx>

<p>~</p>

<br>

<hr>

특수문자

속성

fomatting

'💻 > HTML' 카테고리의 다른 글

관련글

티스토리툴바