코딩 6일째
폴더에서 불러오는 이미지 파일의 경우 <img src="img/....> 해줘야 함
img.html
<!DOCTYLE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 태그-img</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<img src="img/p_01.jpg" alt="대체텍스트" height="200" width="auto">
이미지는 대표적인 인라인 요소입니다. <br>
<!-- "placehold.it" -->
<img src="//placehold.it/200x200" alt="">
<!-- "lorempixel.com" -->
<img src=""
</body>
</html>
* placehold.it, lorempixel.com
이미지가 준비 안 되었는데 넣어야 할 때
* <img src="//placehold.it/200" alt="플레이스홀드.잇">
http는 생략해도 된다. 하지만 입력하는 것이 더 안전함.
http 입력하니 안 나옴. //만 입력하기.
* <img src="http://lorempixel.com/200/100" alt="로렘픽셀.컴">
*플레이스 홀드는 사이즈 숫자x숫자(두 숫자가 같을 경우 한 번만 입력
로렘픽셀의 경우 사이즈 숫자/숫자
* <video src="img/v_01.mp4" type="video/mp4" width="300"></video>
*인라인 요소 = 글씨와 같은 특징. 공간이 없으면 흘러내린다.
*비디오 넣을 때 muteㅇ 꼭 해줘야함
---------------------------------------------------------------------------
<!DOCTYLE>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 태그-img</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<img src="img/p_01.jpg" alt="대체텍스트" height="200" width="auto">
이미지는 대표적인 인라인 요소입니다. <br>
<!-- "placehold.it" -->
<img src="//placehold.it/200x100" alt="플레이스홀드.잇">
<!-- "lorempixel.com" -->
<img src="http://lorempixel.com/200/100/cats" alt="로렘픽셀.컴">
<img src="http://lorempixel.com/200/100/cats" alt="로렘픽셀.컴">
<img src="http://lorempixel.com/200/100/cats" alt="로렘픽셀.컴">
<!-- video 태그
'loop' 'autoplay' 'controls' 'muted' 'poster' 'preload'
-->
<
<video src="img/bg.mp4" type="video/mp4" width="300"></video>
<br>
<video width="300" >
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" autoplay muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" controls muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" loop muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" autoplay loop muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
<video width="300" poster="img/p_01.jpg" muted>
<source src="img/bg.mp4" type="video/mp4" >
</video>
</body>
</html>
<video src="img/bg.mp4" type="video/mp4" width="300" controls autoplay></video>
아래 위 결과 똑같음
<video width="300" controls autoplay>
<source src="/img/bg.mp4"></video>
비디오는 type="video/확장자" 적어주기!
*preload: 미리 불러오기 / *loop: 반복 / *controls: 재생도구 출력여부 / *mute: 음소거
p98 자막넣기
<track kind="subtitles" src="subtitles.srt" srclang="ko" label="Korean">
---------------------------------------------------------------------------
공간분할 div 태그
블럭 요소 안 에는 블럭요소/인라인 요소를 넣을 수 있지만
인라인 요소 안에는 블럭요소를 넣을 수 없다.
*블럭요소: div
*인라인 요소: span
---------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charse="utf-8">
<title>공간분할 태그</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!--교재 P115-->
<div>
<div>block 요소</div>
<div>block 요소</div>
<div>block 요소</div>
<div>block 요소</div>
<div>block 요소</div>
</div>
<hr>
<div>
<span>inline 요소</span>
<span>inline 요소</span>
<span>inline 요소</span>
<span>inline 요소</span>
<span>inline 요소</span>
</div>
</body>
</html>
---------------------------------------------------------------------------
html:5 + tab키 쓰면 저절로 나옴.....
*헤더
:로그인, 내비게이션같은 것 들어가는 곳
<header></header>
*내비게이션
<nav></nav>
*본문
<section></section>
<article></article>
*옆
<aside></aside>
*풋
<footer></footer>
---------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 기본문-시멘틱구조</title>
<link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="css/main.css">
<script src="css/normalize.css"></script>-->
<script src="js/script.js"></script>
</head>
<body>
<!--p.120 전부다 블럭이다!-->
<header>페이지의 헤더부분</header>
<nav>내비게이션 부분</nav>
<section>페이지 본문부분</section>
<article>글자가 많이들어가는 부분</article>
<aside>사이드에 위치하는 공간</aside>
<footer>페이지 바닥부분</footer>
</body>
</html>
---------------------------------------------------------------------------
교재 p.120-121
---------------------------------------------------------------------------