HTML day2
| HTML5의 문서구조 | 목록태그 | 이미지 |
HTML5 의 문서 구조
<!DOCTYPE html> <!--문서를 html이라고 선언하며, 버전 5를 나타냄-->
<html lang="en">
<!--lang 속성 : 웹 접근성에 관한 명시. 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나,
해당 언어에 적합한 발음을 제공할 수 있음 (한국어 : ko)-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta> : <head> 태그에 정보를 추가하기 위한 태그 -->
<!-- charset 속성 : 문자를 인코딩할 때 문자코드를 설정하는 역할, 우리나라 윈도우 기본 문자셋인 EUC-KR을
사용해도 되지만 다국어로 인코딩할기 위해서는 UTF-8 문자셋을 사용하기 권장 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--모바일로 최적화된 사이트에 포함하는 META 속성-->
<!--device-width : 디바이스에 맞는 크기로 viewport를 잡는 것.-->
<title>Document</title>
</head>
<body>
<img src=apple.png></img>
<!-- --- --- ---------------- -->
<!-- 요소 속성 값 -->
</body>
</html>
속성 : 해당 요소(태그)에 대한 추가적인 정보를 제공
<img src=apple.png></img> (O)
<img src=맛있는 사과.png> (X) // 띄어쓰기 까지만 속성을 읽음
<img src="맛있는 사과.png"> (O) // 띄어쓰기가 존재할 경우 ""을 이용함
<!--속성에 대한 값은 따옴표를 꼭 사용하지 않아도 되지만,
값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서 따옴표 쓰기를 권장함 (쌍따옴표, 따옴표 둘다 가능)-->
목록 태그
순서가 없는 목록 태그 <ul>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
· 김사과
· 오렌지
· 반하나
순서가 있는 목록 태그 <ol>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
1. 김사과
2. 오렌지
3. 반하나
사용자 정의 태그 <dl>
<dl>
<dt> 개나리초등학교 </dt> <!--dt : 왼쪽정렬, 제목으로 사용-->
<dd>김사과</dd> <!--dd : 목록으로 사용-->
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
개나리초등학교
김사과
오렌지
반하나
<!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>title</title>
</head>
<body>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr/> <!-- 선긋기 -->
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr/> <!-- 선긋기 -->
<dl>
<dt> 개나리초등학교 </dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
</body>
</html>
이미지
이미지 넣는 방법을 알아보자.
<img src=”이미지가 위치하는 주소 또는 파일 경로” alt=”이미지를 대신할 문자”>
<!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>이미지</title>
</head>
<body>
<img src="./fruit1.png.png" alt="과일 이미지1">
<hr>
<img src="./img/fruit2.png.png" alt="과일 이미지2">
</body>
</html>
