CentOS 에서
su
어제 받은 데모 rpm -Uvh jdk-8u5-linux-x64-demos.rpm 설치.
ls /usr/java/jdk1.8.0_05 로 확인 가능.
오페라 다운 받고 rpm -ivh opera*.rpm 설치.
CentOs 64비트에서는 구글 크롬이 지원하지않는다. 그래서
wget http://chrome.richardlloyd.org.uk/install_chrome.sh
위와 같이 써서 다운을 받는다.
chmod u+x install_chrome.sh 로 실행권한을 주고
./install_chrome.sh 로 설치.(꽤걸림)
service httpd start //Apach service를 켜줌.
HTML5폴더에 index.html(간단한 소스) 의 파일을 만들어서 윈도우즈 웹브라우저에서 http://192.168.89.130/HTML5/ 로 접속해서 확인.
service vsftpd start 해주어서 ftp 서비스를 열어준 후에, 파이어질라 를 이용해서 CentOS로 파일을 넘겨줌.
chmod 777 /WebHome -R //WebHome 폴더의 권한을 줌. 파일의 원활한 이동을 위하여
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
id, class, title
<!DOCTYPE html>
<html>
<head>
<title> id, class, title 연습 </title>
<meta charset="utf-8">
<style>
#jimin{border-color:black;bor-width:10px}
.aaa{font-size:30pt;color:yellow}
dt{font-size:30pt;font-family:궁서체}
</style>
</head>
<body>
<dl>
<dt>id방식</dt>
<dd>document 내의 유일한 태그를 지칭할 때</dd>
<dt>class방식</dt>
<dd>docuent 의 여러개의 태그를 한꺼번에 지칭할 때</dd>
<dt>title방식</dt>
<dd>특정 태그의 보조 역할 : 간단한 설명,Browser 에서는 툴팁으로 보임.</dd>
</dl>
<hr>
<p class="aaa">한지민의 아주 예쁜 사진</p>
<img src="images/jimin.jpg" id="jimin" />
<div class="aaa">작성날짜 : 2014-05-15</div>
<dl>
<dt title="진인사대천명">盡人事待天命</dt>
<dd>사람은 최선을 다하고 그리고 나서 하늘의 운명을 기다린다.</dd>
<dl>
</body>
</html>
설명 :
#jimin{border-color:black;bor-width:10px} <!--id는 #으로 지칭-->
.aaa{font-size:30pt;color:yellow} <!--class는 .으로 지칭-->
<dt title="진인사대천명"> 는 <!--마우스를 올리면 title의 내용이 툴팁으로 쓴다.-->
<!--id는 유일, class는 묶을 때-->
----------------------------
Section
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Section Tag </title>
<meta charset="utf-8">
</head>
<body>
<h1>2014년 8월 8일 자바반 수료식</h1>
<section>
<h1>1부 순서</h1>
<p>국민의례</p>
<p>반장의 대표 연설</p>
<p>원장 연설</p>
<p>수료증 수여식</p>
<p>원장 폐회사</p>
</section>
<section>
<h1>2부 순서</h1>
<p>1차, 2차 프로젝트 발표 동영상 감상</p>
<p>취업한 동기를 축하 동영상</p>
<p>수료 파티</p>
</section>
</body>
</html>
----------------------------------------
nav Tag
<!DOCTYPE html>
<html>
<head>
<title>Search Engines </title>
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="http://www.google.com">Google</li>
<li><a href="http://www.naver.com">Naver</li>
<li><a href="http://www.daum.net">Daum</li>
<li><a href="http://www.nate.com">Nate</li>
</ul>
</nav>
</body>
</html>
----------------------------------------
article Tag
<!DOCTYPE html>
<html>
<head>
<title> article Tag </title>
<meta charset="utf-8">
</head>
<body>
<article>
<header>
<h1>삶에서 가장 중요한 원칙</h1>
<p><time pubdate datetime="2014-05-15T11:16+09:00"></time></P>
</header>
<p>열심히 주위 사람들을 사랑하며 최선을 다해서 살자.</P>
<footer>
<address>
상담을 원하시면 <a href='mailto:chocoddan@naver.com'>me</a> 에게 메일주세요.
</address>
</footer>
</article>
</body>
</html>
---------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Web Page</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>HTML5 List</h1>
<hr color='red' width='70%' size='10'>
<ul>
<li><a href='id.class.title.html'>id.class.title</a></li>
<li><a href='section.html'>section Tag</a></li>
<li><a href='nav.html'>nav Tag</a></li>
</ul>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!DOCTYPE html>
<html>
<head>
<title> anchor Tag </title>
<meta charset="utf-8">
</head>
<body>
<a name="aaa">서론</a>
<nav>
<h3>IT vendors</h3>
<ul>
<li><a href="http://www.oracle.com" target="_blank">Oracle</a></li>
<li><a href="http://www.micorsoft.com" target="_self">Microsoft</a></li>
<li><a href="http://www.google.com" target="_parent">Google</a></li>
<li><a href="http://www.samsung.co.kr" target="top">Samsung</a></li>
</ul>
</nav>
<hr>
<a name="bbb">본론</a>
<nav>
<h3> 2014년 이동 통신사 점유율 순위 </h3>
<ol>
<li><a href="http://www.tworld.co.kr"><img src="images/sk.jpg" alt="SKT" target="_blank"></a></li>
<li><a href="http://www.alleh.co.kr"><img src="images/kt.jpg" alt="KT" target="_blank"></a></li>
<li><a href="http://www.uplus.co.kr"><img src="images/lg.jpg" alt="LGT" target="_blank"></a></li>
</ol>
</nav>
<hr>
<a name="ccc">결론</a>
<h3>Anchor를 이용한 Email 연결하기 </h3>
<p>보다 자세한 내용을 원하시면 <a href="mailto:javaexpert@nate.com">관리자</a> 를 클릭 하세요.</P>
<hr>
<h3>동일 페이지 다른 위치로 이동</h3>
<h2>목차</h2>
<ol type="I">
<li><a href="#aaa">서론</a></li>
<li><a href="#bbb">본론</a></li>
<li><a href="#ccc">결론</a></li>
</ol>
<hr>
<h3> 여러 타입의 파일 링크걸기</h3>
<ul>
<li><a href="../index.html" type="text/html">홈으로 가기</a></li>
<li><a href="Chapter6.pdf" type="application/pdf">PDF 문서</a></li>
<li><a href="sk.zip" type="multipart/x-zip">압축파일</a></li>
<li><a href="images/jimin.jpg" type="image/jpeg">이미지</a></li>
<li><a href="putty.exe">실행파일</a></li>
</ul>
</body>
</html>
설명:
_blank 새창
_self 현재창에서 여는지
pdf파일과 이미지파일은 인터넷 창에서 그냥 열리고, zip과 exe파일은 다운을 받음.
파이어폭스로 실행해보면 다운을 받을때 물어본다.
type은 mime type을 쓴다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
small & big Tag
<!DOCTYPE html>
<html>
<head>
<title> small & big Tag </title>
<meta charset="utf-8">
</head>
<body>
<h3>small Tag</h3>
<p>This is a <small>Sample</small> Text</p>
<h3>big Tag</h3>
<p>This is a <big>Sample</big> Text</p>
</body>
</html>
설명:
기본보다 크기를 1 크게, 1작게
---------------------------------
strike Tag
<!DOCTYPE html>
<html>
<head>
<title> strike Tag</title>
<meta charset="utf-8">
<style>
span{text-decoration:line-through}
</style>
</head>
<body>
<h3>strike Tag</h3>
<figure>
<img src="images/car.jpg">
<figcaption> price : <s>$10,000</s> <span>$9,000</span> $8,000</figcaption>
</figure>
</body>
</html>
설명:
strike tag는 글의 가운데 줄을 긋는 것.
----------------------------------
cite Tag : 기울임
<!DOCTYPE html>
<html>
<head>
<title> cite Tag </title>
<meta charset="utf-8">
</head>
<body>
<h3>영화 소개</h3>
<article>
<h1>Star Wars</h1>
<p>멋진영화</p>
<figure>
<img src="images/starwars.jpg">
<figcaption>1978년 <cite>Star Wars</cite></figcaption>
</figure>
</article>
<article>
<h1>역린</h1>
<p>한지민이 예쁜 영화</p>
<figure>
<img src="images/jimin1.jpg">
<figcaption>2014년 <cite>역 린</cite></figcaption>
</figure>
</article>
</body>
</html>
-----------------------------
q Tag : ""를 시작과 끝에 써줌. q title은 마우스올렸을 때 설명 나오게.
<!DOCTYPE html>
<html>
<head>
<title> q Tag </title>
<meta charset="utf-8">
</head>
<body>
<h3>q Tag</h3>
<p>액션 영화 표적은 역린과 다르게 또다른 매력이 있습니다...<q title="류승룡" cite="http://movie.naver.com/movie/bi/mi/basic.nhn?code=106547">가장 큰 매력은 누가 뭐래도 가장 핫한 배우 류승룡의 탁월한 연기력과 액션신이 아닐까 합니다</q>물론 개인적으로는 특별 출연으로 동생 역할을 한...
</body>
</html>
-------------------------------
ruby Tag : 글씨 위에 글씨를 넣는. <rp>태그는 루비주석을 사용할 때 rt요소가 적용되지 않는 브라우저를 위해 사용
<!DOCTYPE html>
<html>
<head>
<title> Ruby </title>
<meta charset="utf-8">
</head>
<body>
<ruby>
<span>大韓民國</span>
<rp>(</rp>
<rt>대한민국</rt>
<rp>)</rp>
</ruby>
</body>
</html>
-----------------------------
wbr Tag : 화면이 클 때는 상관없지만 화면에 끝에 걸릴 때 중간에 긴단어를 끊을 때 사용. (화면밑으로 내려가는)
<!DOCTYPE html>
<html>
<head>
<title> wbr Tag </title>
<meta charset="utf-8">
</head>
<body>
<h1>Word lineBReak Tag</h1>
<p>Try to shrink the browser window, to view how
the word "XMLHtttpRequest" ion the paragraph
below will break:</p>
<p>To learn AJAX, you must be familiar
with the XML<wbr>Http<wbr>Request Object.</p>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Table - tr은 행 td는 칸, 각각에 색or 이미지 넣기
<!DOCTYPE html>
<html>
<head>
<title> table Tag </title>
<meta charset="utf-8">
</head>
<body>
<h1>Table Tag</h1>
<!-- table, tr, td, th -->
<table width="50%" height='300' border='1' bgcolor='yellow' align='center' cellspacing='0' bordercolor='red'>
<tr bgcolor='yellow'><td bgcolor='red'> </td><td> </td><td> </td></tr>
<tr><td background='car.jpg'> </td><td bgcolor='yellow'> </td><td bgcolor='blue'> </td></tr>
</table>
</body>
</html>
--------
Table - rowspan, colspan
<table width="50%" height='300' border='1' bgcolor='yellow' align='center' cellspacing='0' bordercolor='red'>
<tr bgcolor='yellow'><td rowspan='2'> </td><td colspan='2'> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
--------
Table - td대신 th를 사용하면 가운데 정렬 + Bold 가능. 위치만 맞추고 싶을 때는 align 사용가능.
cellpading은 외곽선과의 간격.
border='0' 을 주면 선이 사라져서 정렬 효과 가능.
<!DOCTYPE html>
<html>
<head>
<title> table Tag </title>
<meta charset="utf-8">
<style>
table{font-size:30pt}
</style>
</head>
<body>
<h1>Table Tag</h1>
<!-- table, tr, td, th -->
<table width="50%" height='300' border='1' bgcolor='yellow' align='center' cellspacing='0' bordercolor='red' cellpadding='20'>
<caption style='color:green'>Java 반 커리큘럼</caption>
<tr><td rowspan='4' align='center' style='color:red'>JAVA</td><th colspan='2'>Oracle</th></tr>
<tr><td colspan='2' align='right'>HTML5</td></tr>
<tr><td style='color:blue'>CSS3</td><td rowspan='2'>JSP</td></tr>
<tr><td>Spring</td></tr>
</table>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
'Java & Oracle' 카테고리의 다른 글
| HTML5 form (0) | 2014.05.20 |
|---|---|
| Applet (0) | 2014.05.19 |
| 이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0) | 2014.05.14 |
| HTML5 (0) | 2014.05.13 |
| 아파치 HTTP, ISS 설치 (0) | 2014.05.12 |