☆ 요소의 크기 지정 및 여백 처리하기
헤드
body{
margin-top:30px;
font:1.2em "맑은 고딕", "Times New Roman", sans-serif;
}
h1{
padding-bottom:20px;
text-align:center;
}
div{
margin:0px auto;
width:70%;
}
p{
padding: 10px 0px;
}
바디
<h1>알버트 아인슈타인 어록 </h1>
<div>
<p>It's not that I'm so smart, it's just that I stay with problems longer.<br/>
나는 똑똑한 것이 아니라 단지 문제를 더 오래 연구할 뿐이다. </p>
<p> I never came upon any of my discoveries through the process of rational thinking.<br/>
나는 단 한번도 이성적인 사고를 통해 발견한 적이 없다. </p>
<p>Technological progress is like an axe in the hands of a pathological criminal. <br/>
기술의 진보는 마치 병적인 범죄자의 손에 든 도끼와 같다.</p>
</div>
결과
☆ 오디오(Audio)태그와 비디오(Video)태그 넣기
바디
audio태그 <video> 사용법
<hr>
<audio controls src="media/music.mp3"></audio>
<video width="320" height="240" autoplay controls>
<source src="media/myMovie.mp4" type="video/mp4"></source>
</video>
☆ 아이프레임 삽입하기
*특징 : 링크 기능에서 이미 만들어놓은 "name.html" 파일을 참조한다.
name.html 소스
바디
<header>
<h1>아이프레임 삽입하기</h1>
<ul>
<li><a href="name.html#toy1" target="toy">toy1</a></li>
<li><a href="name.html#toy2" target="toy">toy2</a></li>
<li><a href="name.html#toy3" target="toy">toy3</a></li>
</ul>
</header>
<section>
<iframe name="toy" scrolling="no" width="600px" height="400px" src="http://www.naver.com"></iframe>
</section>
결과(1) 기본주소값 - 네이버로 지정하였을때
결과(2) toy1 링크를 눌렀을 때 - iframe 안에서 스크롤은 뜨지 않게 하였다.
책갈피 기능을 사용하기 위해서다.
결과(3) toy2 링크를 클릭하였을 때
결과(4) toy3을 클릭하였을 때
☆ 표 스타일 적용해서 배경 꾸미기
1. unit02_01_final.html 파일을 다운받는다.
unit02_01_final.html
<Before> 위에 있는 본래 html 파일이다.
<After> : <thead>, <tbody>, <tfoot> 태그, 그리고 class선택자를 이용해서 만든 모습이다.
전체 소스
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [4주][2일][1~2th] HTML/CSS: 외장CSS, 속성선택자 (0) | 2013.08.06 |
|---|---|
| [4주][1일][1~2th] HTML5/CSS: 회원가입 페이지에 스타일 적용하기 (0) | 2013.08.05 |
| [3주][3일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제(2) (0) | 2013.07.31 |
| [3주][2일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제. (0) | 2013.07.30 |
| [3주][1일][5~7th] 자바스크립트(JAVA SCRIPT) (0) | 2013.07.29 |