210506_5~8(HTML 기초)

HTML_JS(Sol) 2021. 5. 6. 17:23

HTML

하이퍼텍스트 마크업 언어는 웹페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크,이용과 그밖의 항복으로 구조적 문서를 만들 수있는 방법을 제공한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>글자모양과 관련된 태그</title>
</head>
<body>

<!-- HTML 주석입니다 : 디자인과 관련된 주석에 사용합니다. -->
<!-- 태그는 대소문자 구별이 없다. 태그는  보통 열리는 태그와 닫히는 태그로 쌍을 이룬다.   -->
<!-- 태그는 서버가 없이 웹브라우져만 있어도 확인이 가능하다 -->
1. 글자모양과 관련된 태그 <br>
	<b>무궁화 꽃이 피었습니다.</b> <br> 
	<i>무궁화 꽃이 피었습니다.</i> <br>
	<strong>무궁화 꽃이 피었습니다.</strong> <br>
	<!-- 웹페이지에서는 공란 한칸만 인식된다  여러칸은 &nbsp; 로써야한다-->
	무궁화 꽃이 피었습니다. &nbsp;&nbsp; &nbsp; &nbsp; 	무궁화 꽃이 피었습니다.	
	<!-- 아래 u 태그는 실행은 되지만 html5에서는 제외됨 -->
	<u>무궁화 꽃이 피었습니다.</u>
	<br><br><br><br>
	<!-- font는 색상과 크기를 동시에 지정할수있는 태그이다. -->
	<font color="red" size="1">홍길동 도술을 부립니다.</font><br>
	<font color="orange" size="2">홍길동 도술을 부립니다.</font><br>
	<font color="yellow" size="3">홍길동 도술을 부립니다.</font><br>
	<font color="green" size="4">홍길동 도술을 부립니다.</font><br>
	<font color="skyblue" size="5">홍길동 도술을 부립니다.</font><br>
	<font color="blue" size="6">홍길동 도술을 부립니다.</font><br>
	<font color="purple" size="7">홍길동 도술을 부립니다.</font><br>
	
	<!-- 태그는 중첩이 가능하다 -->
	<font color="green" size="7"><u><b>무궁화 꽃이 피었습니다.</u></b></font>
	

</body>
</html>

줄넘김

볼드체

이탤릭체

진하게

  스페이스바

<

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>단락과 관련된 태그</title>
</head>
<body>
<!--  br은 줄만 바뀌고, p는 한줄을 더 띄운다  -->
<!--  h1 ~h6는 제목을 달때 사용하는 태그 1이 가장크고 6이 가장작다 -->
<h1>첫번째 제안</h1>
<p>
최근 외국 매체들이 일제히 이 같은 소식을 보도하고 나섰다. 외국 보도를 종합해 보면 최근 미국과 유럽우주기구(ESA) 
전문가들이 특별한 일주일 가상 시나리오에 참가했다. 미국 항공우주국(NASA)이 만든 시뮬레이션이었다.
</p>
<h2>두번째 제안</h2>
<p>
지구에서 5천632만7천40km 떨어진 곳에서 소행성이 발견됐다. 이 거리는 지구와 태양 거리의 약 2.6분의 1에 해당하는 거리이다. 
이 소행성은 점점 지구로 다가오고 있고 남은 시간은 6개월. 지구와 충돌한다는 시나리오이다.
</p>
<h3>세번째 제안</h3>
<p>
이에 전문가들은 소행성의 크기, 궤도, 충돌의 영향 등을 분석하기 시작한다. 이 소행성은 동유럽을 강타하는 것으로 설정했다. 
전문가들은 관련 데이터를 토대로 서로 정보를 교환하면서 어떻게 충돌을 회피할 수 있을지 갖은 방법을 찾는다.
</p>
<h4>네번째 제안</h4>
<p>
이번 가상 시나리오에 참가한 전문가들은 현재의 기술로는 가상의 소행성 충돌을 피할 수 없다고 결론 내렸다. 
물론 이는 가상 시나리오에 불과하다. 가까운 미래에 지구와 충돌 가능성이 있는 소행성은 없는
</p>
</body>
</html>

<h1~6> 제목. 1이 가장크다</h1~6>

단락

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이미지를 다루는 태그</title>
</head>
<body>
1. 블랙핑크 입니다<br><!-- 이미지경로 사용 주의 아래 세가지 방법 모두 숙지-->
<!-- 웹루트가 표시된 절대 경로 \htmlstudy\images\blackpink.jpg -->
<!-- 웹루트가 생략된 절대 경로 \images\blackpink.jpg -->
<!-- 현재 문서를 기준으로 하는 상대경로  .\images\blackpink.jpg-->
<!-- 디폴트 상대경로 images\blackpink.jpg -->
<img alt="웹루트가표시된 절대경로" src="\htmlstudy\images\blackpink.jpg" width="300" height="300">
<img alt="웹루트가 생략된 절대경로" src="\images\blackpink.jpg" width="300" height="300">
<img alt="현재문서를 기준으로 하는 상대경로" src=".\images\blackpink.jpg" width="300" height="300">
<img alt="디폴트 상대경로" src="images/blackpink.jpg">
<a href="sub/third_sub_html.html">third_sub_html로이동</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이미지로드 경로와 border</title>
</head>
<body>
1) 여기서 smile 그림을 로딩하세요<br>
<img alt="smile 이미지입니다" src="../a/b/c/smile.jpg" border="1"> <br>
<!--  '../'상위경로 // 현재경로 한칸상위문서에 a의b의c의 smile.jpg을 로드 -->
2) 여기서 ryan 그림을 로딩하세요<br>
<img alt="ryan 이미지 입니다" src="ryan.jpg" width="500" height="500" border="5"><br>
<!-- 현재 폴더내의 이미지 로드 -->
3) 여기서 bts 그림을 로딩하세요<br>
<img alt="bts 이미지 입니다" src="../images/bts.jpg" width="650" height="500" border="10"><br>
<!--  '../'상위경로의 images폴더내의 bts.jgp 로드 -->
<a href="../four.html">four로이동</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이미지로드 경로와 border</title>
</head>
<body>
1) 여기서 smile 그림을 로딩하세요<br>
<img alt="smile 이미지입니다" src="../a/b/c/smile.jpg" border="1"> <br>
<!--  '../'상위경로 // 현재경로 한칸상위문서에 a의b의c의 smile.jpg을 로드 -->
2) 여기서 ryan 그림을 로딩하세요<br>
<img alt="ryan 이미지 입니다" src="ryan.jpg" width="500" height="500" border="5"><br>
<!-- 현재 폴더내의 이미지 로드 -->
3) 여기서 bts 그림을 로딩하세요<br>
<img alt="bts 이미지 입니다" src="../images/bts.jpg" width="650" height="500" border="10"><br>
<!--  '../'상위경로의 images폴더내의 bts.jgp 로드 -->
<a href="../four.html">four로이동</a>
</body>
</html>

경로 "../abcd/efg.jpg" 상위경로의 abcd폴더내의 efg.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>문서 링크걸기</title>
</head>
<body>
이동하기 a 앵커태그<br>
<ul> <!-- <ul>순서없는 목록 -->
<li><a href="third.html">블핑</a></li>
<li><a href="second.html">second페이지로이동하기</a></li>
</ul>
<ol><!-- <ol>순서있는 목록 -->
<li><a href="first.html">first로 이동하기</a></li>
<li><a href="a/b/third_b.html">third_b로 이동하기</a></li>
</ol>
<a href="first.html">first로이동</a>
<a href="sub/third_sub_html.html">third_sub</a>

</body>
</html>

<ul> 순서없는 목록 </ul> unordered list

<ol> 순서가 있는 목록</ol> ordered list

<li> 순서가있는 목록 </li> list ltem

<dl> 용어를 설명하는 목록</dl> definition list

<a href="url">url링크 걸기</a>

~~링크거는 <a> 앵커도 경로를 잘 써야한다. 틀려서 안됐음..~~

'HTML_JS(Sol)' 카테고리의 다른 글

210507_4(기타부수적인태그) (0)	2021.05.07
210507_3(가입신청폼 만들기) (0)	2021.05.07
210507_1(HTML태그연습) (0)	2021.05.07
210506_4(웹동작원리) (0)	2021.05.06
210506_1~4(웹프로그래밍 설치및세팅) (0)	2021.05.06

ABOUT ME

GO! GO!

HTML

'HTML_JS(Sol)' 카테고리의 다른 글

티스토리툴바

ABOUT ME

HTML

'HTML_JS(Sol)' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바