본문 바로가기
IT/HTML

HTML 기본

by 바른롱매 2020. 3. 31.

웹 콘텐츠 폴더에 WEB-INF 에 HTML 문서가 다 들어갑니다.

​

HTML

​

Hyper Text Markup Language

띄어주는 문자열 표시 언어

구성 : Tag

표시언어

​

HTML -> Standard Tag + User Tag

XML -> User Tag 용도 : Data, Setup

​

추가텍스트,,,,,

​

주석문

<!-- 추가 텍스트,,,, -->

​

<%-- jSP 주석문 --%>

 

<!-- 
	Tag
		<태그명>
	
		<태그명 attribute(속성) property(특성)> 내용 </태그명>
 -->


<!DOCTYPE html>

<html> <!-- root tag -->

	<head>
	
		<meta charset="UTF-8">		
		<title>제목</title>
		
		<!--
		CSS(디자인) 설정
		JavaScript 설정
		-->
		
	</head>
	
	<body>
	
		일본 정부가 반도체 생산에 필요한 핵심 소재 세 가지 품목에 대해 한국 수출을 규제할 방침이라고 지난 1일 밝혔다.
		 우리나라 대법원이 강제 징용 피해자에 대한 배상 판결을 내린 데 따른 보복 조치로 해석된다
		
		<!-- Heading -->
		<h1> Title html </h1>
		<h2> Title html </h2>
		<h3> Title html </h3>
		<h4> Title html </h4>
		<h5> Title html </h5>
		<h6> Title html </h6>
		
		<!-- Paragraph 단락 -->
		<p>일본 정부가 반도체 생산에 필요한 핵심 소재 세 가지 품목에 </p>
		<p>대해 한국 수출을 규제할 방침이라고 지난 1일 밝혔다.</p>
		
		<!-- Break 개행  \n -->
		우리나라 대법원이 강제 징용 피해자에 대한 <br> 배상 판결을 내린 데 따른 <br>보복 조치로 해석된다<br>
		
		<!-- Pre Formatted(보고 있는대로) -->
		<pre>
		일본 정부가 반도체 생산에
		필요한 핵심 소재 세 가지 품목에 대해 한국 수출을 규제할 
		방침이라고 지난 1일 밝혔다.
		우리나라 대법원이 강제 징용 피해자에 대한 배상 판결을 내린 데 따른 보복 조치로 
		해석된다
		</pre>
		
		
	
	</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<!--
<태그명 attribute(속성)- style
	 property(특성) - "background-color: red" > 내용 </태그명> 
-->
<body style="background-color: red">

HTML, JavaScript, CSS

<h1 style="color:  yellow;"> 여기가 에이치원태그입니다. </h1>

<h2 style="background-color: #0000ff"> 여기가 h2태그입니다. </h2>

<h3 style="font-family: verdana"> 여기가 h3 태그입니다.</h3>

<h4 style="font-size: 300%"> 여이가 h4태그입니다.</h4>

<p style="text-align: center;"> 여기가 p 태그입니다.</p>

<hr>

<pre style="font-size: 200%;">
일본 정부가 반도체 생산에 필요한 핵심 소재 세 가지 품목에 대해
 한국 수출을 규제할 방침이라고 지난 1일 밝혔다.
우리나라 대법원이 강제 징용 피해자에 대한 배상 판결을 내린 데
 따른 보복 조치로 해석된다
</pre>

<hr> <!-- 수평선 태그 -->

<p style="color: green; font-size: 200%;">
우리나라 대법원이 강제 징용 피해자에
 대한 배상 판결을 내린 데
</p>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

tag 안에 tag를 사요알 수 있는 tag

<p>보통의 텍스트 </p>

<p><b>두꺼운 텍스트 </b></p>

<p><strong>스트롱 텍스트</strong></p>

<p style="font-size: 200%;"><b> ptag + 속성</b> </p>

<p><i> 이탤릭 텍스트 </i></p>

<p> 나는 성공할 수 있습니다 . 이점을  <em>강조</em>하고 싶습니다.</p>

<h2>Html <mark>markup</mark> Formatting</h2>

<p> 보시는 글은 <del>삭제 </del>된 글입니다. </p>

<p> 이것은 <sub>아래 첨자</sub> 입니다. </p>

<p> 이것은 <sup>위 첨자</sup> 입니다. </p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

tag 안에 tag를 사요알 수 있는 tag

<p>보통의 텍스트 </p>

<p><b>두꺼운 텍스트 </b></p>

<p><strong>스트롱 텍스트</strong></p>

<p style="font-size: 200%;"><b> ptag + 속성</b> </p>

<p><i> 이탤릭 텍스트 </i></p>

<p> 나는 성공할 수 있습니다 . 이점을  <em>강조</em>하고 싶습니다.</p>

<h2>Html <mark>markup</mark> Formatting</h2>

<p> 보시는 글은 <del>삭제 </del>된 글입니다. </p>

<p> 이것은 <sub>아래 첨자</sub> 입니다. </p>

<p> 이것은 <sup>위 첨자</sup> 입니다. </p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!--  font  -->

<font size="1" color="blue"> 폰트크기 1, 폰트의 컬러 blue </font>
<br>
<font size="2" color="#ff0000"> 폰트크기 2, 폰트의 컬러 red </font>
<br>
<font size="3" > 폰트크기 3 </font>
<br>
<font> 폰트크기 3 </font>

<pre>

일본 정부가 반도체 생산에 필요한 핵심 소재 세 가지 품목에 대해
<font size="5" color="#00ff00"> 한국 수출 </font>
을 규제할 방침이라고 지난 1일 밝혔다.
우리나라 대법원이 강제 징용 피해자에 대한 배상 판결을 내린 데
따른 보복 조치로 해석된다

</pre>

<!-- 
div : 자체만으로 의미가 없다. 태그를 함께 묶을 때,
	범위를 설정으로 묶을 수 있는 태그 , JS에서 접근하기 용이하다.
 -->
 
<div align="center" style="color: red;">
	<font size="5">5 size Text</font>
	<p>p Tag </p>
	<h3> H3 tag </h3>
</div>

<div style="border-style: solid; border-color: blue; margin-left: 20px; padding-top: 30px; background-color: green; ">
	margin: 밖의 여백, padding : 안쪽 여백
<h1> 여기가 h1 tag 입니다 </h1> 
</div>


<div id="" class = "" name = "">
	id와 class와 name으로 자바스크립트나 JQ에서 접근하기 위한 이름이다.
</div>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- link a(anchor) -->

<p>
	<a href="http://www.google.com">Google Move</a>
</p>

<a href="index1.html">index1.html로 이동</a>
<br><br>


현재창에서 띄운다.
<a href="index2.html" target="_self">index2.html로 이동</a>
<br><br>

새창을 띄어서 간다
<a href="index3.html" target="_blank">index3.html로 이동</a>

<br><br>
<a href="index3.html">
	<img alt = "이미지 없음" src="img.jpg"">
</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#"> 위로 이동</a>
<br><br>

# == id(Resource) . == class(CSS) 
<p> <a href="#chap1"> Chapter1 로 이동</a> </p>
<p> <a href="#chap2"> Chapter2 로 이동</a> </p>
<p> <a href="#chap3"> Chapter3 로 이동</a> </p>

<br><br><br><br><br>

<h3 id="chap1">Chapter 1</h3>
<p>여기가 Chapter1 입니다. </p>

<br><br><br><br><br>

<h3 id="chap2">Chapter 2</h3>
<p>여기가 Chapter2 입니다. </p>

<br><br><br><br><br>

<h3 id="chap3">Chapter 3</h3>
<p>여기가 Chapter3 입니다. </p>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

현재경로에서 해당 폴더의 파일 이름이다.
<img alt="이미지 없음" src="./images/picture.png">

<br><br>

웹에 있는 이미지도 불러올수 있다.
<img alt="이미지 없음" src="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000081/81619/81619_185.jpg">

<br><br>

애니메이션도 동작이 된다.
<img alt="이미지 없음" src="./images/huk.gif">


<br><br>

지정크기로 출력할수 있다.
<img alt="이미지 없음" src="./images/picture.png" width="200" height="200">

테두리를 그을수도 있다.
<img alt="이미지 없음" src="./images/picture.png" width="200" height="200" border="2">

<br><br>

이미지와 기사를 같이 넣고 싶은 경우
<img alt="이미지 없음" src="./images/123.jpg" width="200" height="200" align="right" hspace="10">
이라크 북부 쿠르드족 자치구에 있는 한 저수지에서 약 3400년 된 궁전의 유적지가 발견됐다고 CNN 등 외신이 보도했다. 극심한 가뭄 탓에 저수지 수위가 낮아져 그 밑에 있던 궁전터가 모습을 드러낸 것.
<br clear = "right">


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

전기 자동차 란? 전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다. 그 특징은 
다음과 같습니다. 환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재
라고 할 수 있습니다. ・배기 가스를 전혀 배출하지 않음・주행시 소음이 적다 ・에너지 
효율이 높다.

<br><br><br><br>

<p>전기 자동차 란? 전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다.</p>
<p>그 특징은 다음과 같습니다.</p>
<br>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<br>
<p>・배기 가스를 전혀 배출하지 않음</p>
<p>・주행시 소음이 적다 </p>
<p>・에너지 효율이 높다.</p>


<br><br><br><br>


<p>전기 자동차 란?</p>
<p>전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다.</p>
<p>그 특징은 다음과 같습니다.</p>
<br>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<br>
<p>・배기 가스를 전혀 배출하지 않음</p>
<p>・주행시 소음이 적다 </p>
<p>・에너지 효율이 높다.</p>

<br><br><br><br>


<p style="font-size: 200%;"><b>전기 자동차 란?</b></p>
<p>전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다.</p>
<p>그 특징은 다음과 같습니다.</p>
<br>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<br>
<p>・배기 가스를 전혀 배출하지 않음</p>
<p>・주행시 소음이 적다 </p>
<p>・에너지 효율이 높다.</p>

<br><br><br><br>


<p style="font-size: 200%;"><b>전기 자동차 란?</b></p>
<p>전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다.</p>
<p>그 특징은 다음과 같습니다.</p>
<br>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<hr color="00ffff">
<p>・배기 가스를 전혀 배출하지 않음</p>
<p>・주행시 소음이 적다 </p>
<p>・에너지 효율이 높다.</p>
<hr color="00ffff">

<br><br><br><br>

<p style="font-size: 200%;"><b>전기 자동차의 소개</b></p>
<p style="font-size: 150%; font-style:inherit;"><b>전기 자동차 란?</b></p>
<p>전기 자동차는 엔진이 아닌 모터로 구동하는 자동차입니다.</p>
<p>그 특징은 다음과 같습니다.</p>
<br>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<hr color="00ffff">
<p>・배기 가스를 전혀 배출하지 않음</p>
<p>・주행시 소음이 적다 </p>
<p>・에너지 효율이 높다.</p>
<hr color="00ffff">


<br><br><br><br>

<p style="font-size: 200%;"><b>전기 자동차의 소개</b></p>
<p style="font-size: 150%; font-style:inherit;"><b>전기 자동차 란?</b></p>
<p>전기 자동차는 엔진이 아닌 <b style="color: red;">모터</b>로 구동하는 자동차입니다.
그 특징은 다음과 같습니다.</p>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<p style="text-align: right;"><i>(주) 자동차 연구소</i></p>
<p>배기 가스를 전혀 배출하지 않음.주행시 소음이 적다.에너지 효율이 높다.</p>

<br><br><br><br>

<div style="background-color: yellow;">
<p style="font-size: 200%;"><b>전기 자동차의 소개</b></p>
<p style="font-size: 150%; font-style:inherit;"><b>전기 자동차 란?</b></p>
<p>전기 자동차는 엔진이 아닌 <b style="color: blue;">모터</b>로 구동하는 자동차입니다.
그 특징은 다음과 같습니다.</p>
<p>환경 문제가 주목되는 현재에서 전기 자동차는 활약이 기대되는 존재라고 할 수 있습니</p>
<p>  다.</p>
<p style="text-align: right;"><i>(주) 자동차 연구소</i></p>
<p>배기 가스를 전혀 배출하지 않음.주행시 소음이 적다.에너지 효율이 높다.</p>
</div>

<br><br><br><br>
<p>타히티의 풍경 </p>
<p>남태평양 타히티 (프랑스령 폴리네시아)는 100여개의 섬으로 구성되어 있습니다.</p>
<p>남쪽 섬의 낙원이라고 부르기에 걸맞게 세계적으로 유명한 관광지이기도 합니다.</p>
<img alt="이미지 없음" src="./images/taheti.PNG">
<p>포라포라 섬에는 수상의 호텔이 있습니다. </p>

<br><br><br><br>
<p>타히티의 풍경 </p>
<p>남태평양 타히티 (프랑스령 폴리네시아)는 100여개의 섬으로 구성되어 있습니다.</p>
<p>남쪽 섬의 낙원이라고 부르기에 걸맞게 세계적으로 유명한 관광지이기도 합니다.</p>
<img alt="이미지 없음" src="./images/taheti.PNG" border="5">
<p>포라포라 섬에는 수상의 호텔이 있습니다. </p>

<br><br><br><br>
<p><b>유럽</b></p>
<p>유럽은 크게 네 지역으로 나뉘어. 스칸디나비아 반도를 포함한 북부 유럽, 일찍부터  </p>
<p>산업이 발달한 알프스 산맥 위쪽의 서부 유럽, 고대 그리스·로마 문화가 꽃피었던  </p>
<p>알프스 남쪽의 남부 유럽, 그리고 과거 사회주의 국가가 많았던 동부 유럽으로 나뉘지.</p>
<p>유럽은 민족과 문화가 다양하지만, 최근에는 여러 나라들이 유럽 연합(EU)을 중심으로  </p>
<p>하나의 유럽으로 통합되고 있어. </p>
<img alt="이미지 없음" src="./images/eu.PNG" align="left" hspace="10">
<b>유럽 연합(EU)을 통해 하나 되는 유럽 </b><br>
유럽 연합은 유럽 여러 나라가 세계 시장에서 경쟁력을 높이려고 만든 경제 공동체에서 출발했어. 지금은 경제뿐 아니라 정치, 사회 면에서도 하나 되기 위해 나아가고 있지. 현재 유럽 연합에 속한 27개 나라들은 ‘유로’라는 화폐를 공동으로 사용하고 있어. 우리나라는 하나의 큰 시장이 되어 가는 유럽 연합과 긴밀한 관계를 맺으려 노력하고 있지.
<br clear = "right">

<br><br><br><br>
<img alt="이미지 없음" src="./images/santa.PNG" align="right" hspace="10">
<b>산타 마을에서 지중해까지 다양한 기후 </b><br>
유럽에는 다양한 기후가 나타나. 산타 마을이 있는 북부 유럽의 핀란드는 겨울이 길고 매우 추운 냉대 기후 지역이야. 서부 유럽의 영국은 대서양에서 불어오는 습한 바람 때문에 비가 자주 내리지. 지중해 주변의 남부 유럽은 여름이 덥고 건조하지만, 겨울은 따뜻하고 비가 자주 내려. 그래서 휴양지로 인기가 좋지.
<br clear = "right">



</body>
</html>

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

이클립스 톰캣 연동  (0) 2020.02.26

관련글

댓글

티스토리툴바