<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 태그2</title>
</head>
<body>
<!--
img 태그
- 인라인 태그(블록태그였으면 이미지가 아래로 내려갔어야했는데 인라인태그니깐 옆에 있을 수 있음)
- 이미지를 추가하는 태그, 화면에 이미지를 보여주는 태그
- 속성
src : 이미지 파일 주소 (주소에 문제가 있으면 이미지 문자열인 alt를 보여줌)
alt : 이미지를 못 불러왔을 때 보여줄 대체 문자열
width : 이미지 폭, 생략하면 원본 이미지 폭, 단위는 px
height : 이미지 높이, 생략하면 원본 이미지 높이, 단위는 px
-width 또는 height 중 하나의 값이 auto이면 정해진 width 또는 height를 기준으로
비율을 유지하면서 값을 설정
- width="100" height="auto"인 경우, 가로 100px를 기준으로 원본 이미지 비율대로 높이를 설정
-->
<!-- img태그가 있는 html문서와 같은 폴더에 있는 rabbit.jpg 이미지를 가져옴-->
<img src="rabbit.jpg" alt="어른이">
<!-- 최상위를 기준으로 최상위 폴더 > day1폴더 > rabbit.jpg 이미지를 가져옴
최상위 폴더의 기준은 open folder를 이용하여 연 폴더를 기준으로 하기 때문에 상황에 따라 최상위 폴더 기준이 달라질 수 있다.
=> /로 시작하는 주소링크는 절대경로를 의미하니 이미지의 주소가 바뀔경우 /뒤에 경로주소도 바꿔줘야 함 -->
<img src="/day1/rabbit.JPG" alt="어른이" width="100" height="100">
<!-- ./는 현재 폴더를 의미 -->
<img src="./rabbit.JPG" alt="어른이" width="100" height="auto">
<!-- ../는 상위폴더, html문서가 있는 폴더에서 상위 폴더로 간 후 거기서 다시 day1폴더 안에 있는 rabbit.jpg이미지를 가져옴-->
<img src="../day1/rabbit.JPG" alt="어른이" width="100" height="auto">
<!-- 인터넷에 있는 이미지를 가져옴 (인터넷에 사진이 이미지주소를 가진 일반이미지는 가능하지만, 링크로 기능이 얽혀있거나 순수한 이미지가 아니면 파일이 깨질 수 있음)-->
<img src="http://www.foodnmed.com/news/photo/201903/18296_3834_4319.jpg" alt="고양이" width="100" height="auto">
<!-- 리스트
- 순서있는 리스트(번호 또는 알파벳) - ol
- 순서 없는 리스트(점 또는 사각형) - ul
- 정의 리스트 - dl
- 해당 태그들 안에 li 태그들로 구성
-->
<!--
- ol
- 속성 (숫자가 앞에 붙음)
- type: 숫자 또는 알파벳으로 1,A,a,I,i 중 하나를 선택
- start: 시작 숫자
- type 속성과 start 속성을 이용하는 대신 css를 이용할 것을 권장
- 블록 태그 (새 라인에서 시작, 오늘의 할일 (새라인) 1.2.3.4.5.)
-->
<br>
오늘의 할 일
<ol type="a" start="5">
<li>출근</li>
<li>수업</li>
<li>점심</li>
<li>수업</li>
<li>퇴근</li>
</ol>
<!--
- ul
- 속성
-type : 기호, disc, circle, square
-->
점심 메뉴
<ul type="square">
<li>짜장</li>
<li>짬뽕</li>
<li>탕수육</li>
</ul>
<!--
- dl
- dt 태그와 dd태그로 이루어져 있음
- dt 태그는 용어, dd 태그는 해당 용어에 대한 설명
-->
웹 브라우저 종류
<dl>
<dt>Internet Explorer</dt>
<dd>마소에서 만든 브라우저</dd>
<dt>Firefox</dt>
<dd>Mozila에서 만든 브라우저</dd>
<dt>Chrome</dt>
<dd>구글에서 만든 브라우저</dd>
</dl>
</body>
</html>
