class, display,ol,ul,li,span,video 속성 이용 연습
HTML4.0 & CSS 2.0 사용연습이다.
HTML4.0에서 새롭게 추가된 class, display,ol,ul,li,span,video 속성에 대한 연습
<html>
<head lang="ko">
<meta charset="utf-8">
<title>HTML4.0 & CSS 2.0</title>
<style>
/*
.은 class를 말합니다.
#은 id를 말합니다. (단, javascript & jquery 사용 주의)
clss 생성시 문자가 먼저 나오고 숫자를 사용하는 방식으로 만듭니다.
또한, 같은 클래스명은 사용하지 않습니다.
*/
.a {width: 100px; height: 100px; border: 1px solid red; }
#a {width: 100px; height: 100px;
background-color: blue;}
.b {width: 50px; height: 50px; background-color: green;}
.c {background-color: green; width: 200px; height: 100px; display: block;}
/* display는 화면에 출력을 설정할 때 사용하는 css속성입니다
none(출력안함), block(출력함)*/
</style>
</head>
<body>
<!--
ul,ol은 목차를 만들 때 사용
ul,ol 모두 li를 사용하게 되며, li는 목차 갯수만큼 생성가능
ul(디스크), ol(번호)
-->
<ul>
<li>삼성카드는 현재 결제 하실 수 없습...</li>
<li>금일 결제시스템 오류사항을 수정...</li>
<li>사이트 리뉴얼이 완료 되었습니다.</li>
</ul><br><br>
<ol>
<li>삼성카드는 현재 결제 하실 수 없습...</li>
<li>금일 결제시스템 오류사항을 수정...</li>
<li>사이트 리뉴얼이 완료 되었습니다.</li>
</ol><br><br>
<!--
div란 여러가지 오브젝트를 생성할 수 있는 태그
tale 태그에서 변형된 부분도 있음
(focus)
class라는 속성값이 나오게 됩니다.
class는 모든 태그에 적용할 수 있는 권한을 가지게 되었으며
class를 사용하면서 <style>태그 안에 있는 css와 유동적으로 연결하는 속성을 가지게 되었습니다.
-->
<div class="a" style="color: red;">
123
</div>
<div class="b">
123
</div>
<!--
span : div와 다르게 단독 메뉴 및 레이어 팝업 날개배너 등
div 보다는 작은 단위로 만들때 사용하는 태그로 나오게 됩니다.
-->
<span class="c">안녕하세요</span>
<strike> 38,000원 </strike> > 16,000원
<!--
strike : 취소선을 사용할 때 이용되는 태그임
-->
<br><br>
<!-- video태그는 동영상, 소리 등 mp3, mp4, wav, asf, avi, mpeg 등 다양한 영상을 출력할 수 있도록 하는 태그입니다.
<video src="videoplayback.mp4" width="400" height="400" controls></video>-->
<br><br>
<iframe src="http://www.kmong.com" width="500" height="500">
</iframe>
</body>
</html>
아래와같은 창을 확인할 수 있다.
