1. 주석

<!-- 

	이클립스 단축키
		1. ctrl + shift + +/- : 화면 확대/축소
		2. tab : 들여쓰기 
		3. 범위 지정 후 ctrl + shift + / : 주석 처리
		4. ctrl + s : 파일 저장
		
	주석 : 설명 달기
	
	HTML : HyperText Markup Language
		   - HyperText : 하이퍼링크(웹 페이지를 다른 페이지로 연결하는 링크)가 가능한 텍스트
		   - Markup : 화면 출력하기 위한 구조[문법]
		   - Language : 언어

 -->

2. 형태

<!DOCTYPE html> <!-- HTML5 버전 명시 -->
	<html>          <!-- html 코드 전체를 감싼다. [반드시 필요] -->
		<head>      <!-- 페이지 제목, 설명, 외부파일, 링크 등 표시되는 구역, 주로 옵션이 들어감 -->
			<meta charset="EUC-KR">   <!-- 한글 인코딩[번역기] EUC-KR vs. UTF-8 -->
			<title>상단 페이지 제목</title>   <!-- 페이지 제목 -->
		</head>	   <!-- head tag end -->
		<body>   <!-- web page contents : 웹페이지 실제 내용이 들어감 -->
		
		</body>  <!-- body tag end -->
	</html>  <!-- html tag end -->

3. 태그 사용법

4. 종류

  1. <h1></h1> ~ <h6></h6> : 제목 태그[기본 값 : 글꼴 크기, 진하게]
  2. 제목은 제목 태그를 사용해야 하는 이유 : 검색엔진이 태그 위주로 찾기 때문에😄
<!DOCTYPE html>
	<html> <!-- html start -->
		<head>
			<meta charset="EUC-KR">
			<title> h 태그</title>
		</head>
		<body> <!-- Content start  -->
		
		<!-- tag start -->     <!-- tag end -->
			<h1>        제목 태그1     </h1>
			<h2>        제목 태그2     </h2>
			<h3>        제목 태그3     </h3>
			<h4>        제목 태그4     </h4>
			<h5>        제목 태그5     </h5>
			<h6>        제목 태그6     </h6>
			<h7>        제목 태그7     </h7>   <!-- 알수없는 태그 경고창 -->
			
			태그없이 입력한 텍스트  <!-- h_tag를 안넣어주면 기본 글꼴이 들어감. -->
			
			
		</body> <!-- Content end -->
	</html> <!-- html end -->
  1. <P> ~ </P> : 문단/단락 태그[p : paragraph]
  2. <br/> : 줄 바꿈 태그
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="EUC-KR">
			<title>p 태그</title>
		</head>
		<body>
		
			안녕하세요.
			HTML 문단. 
			
			<p>문단입니다.</p>
			
			<p>안녕하세요.</p>  <!-- <p>은 문단 사이에 여백 O -->
			<p>문단입니다.</p>
			
			안녕하세요 <br/>  <!-- <br>은 문단사이에 여백 X -->
			HTML 문단.
			
		</body>
	</html>
  1. <img/> : 이미지 출력 태그

    1. 속성

      1. src : 이미지가 저장된 경로
      2. 상대 경로 [현재 파일 기준]
        1. ./ : 현재 폴더
        2. ../ : 상위 폴더
      3. alt : 이미지에 이름 달기
      4. width : 사진 가로 길이
        1. % : 사진 크기가 유동적 → 반응형 웹에서 잘 사용함.
        2. px : 사진 크기가 고정

      스크린샷(61).png

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="EUC-KR">
			<title>img 태그</title>
		</head>
		<body>		
			
			<!-- 절대 경로 : 실제파일의 모든 경로의 주소 -->
			<!-- * 해당 컴퓨터가 아닐 경우 이미지가 깨지게 된다.-> PC마다 경로가 다를 수 있다. -->
			
			<img width = "50%" alt = "고양이 사진" src = "C:/Users/504/Desktop/cat1.jpg"/>
				<!-- 해당 파일 오른쪽 클릭 -> properties -> location(절대 경로) -->
			<img src = "C:\\Users\\504\\git\\Ga0_WebStudy\\frontend\\public\\Img\\cat1.jpg"/>
			
			<!-- 상대 경로 : 현재 파일 기준으로 해당 파일의 경로 -->
			
			<!-- 현재 html 폴더와 같은 폴더에 있을 경우 사진 파일명 작성-->
			<img alt = "고양이 사진" src = "cat1.jpg"/>
			<!-- 현재 html 폴더의 상위 폴더[public 폴더]에 있을 경우 -->
			<img src = "../cat1.jpg"/>
			<!-- 현재 html 폴더의 상위 폴더[public 폴더]에 있는 다른 폴더[Img]에 있을 경우 -->
			<img width = "50px" alt = "고양이 사진" src = "../Img/cat1.jpg"/>

		</body>
	</html>
	</html>

  1. <audio></audio> : 오디오 파일 출력

    1. 속성
      1. controls : 오디오 컨트롤러
    2. <source src =” 오디오 파일 경로”> </source>
      1. src : 경로 설정
    <!-- 오디오 -->
			<audio controls> 
				<source src="../audio/음악.mp3"/>
			</audio>